A feature-rich, framework-agnostic Web Component for editing TAC (Traditional Alphanumeric Codes) aviation meteorology messages with syntax highlighting and intelligent autocompletion.
TAC (Traditional Alphanumeric Codes) are standardized codes used in aviation meteorology, defined by WMO (World Meteorological Organization) and ICAO (International Civil Aviation Organization):
| Code | Full Name | Description |
|---|---|---|
| METAR | Meteorological Aerodrome Report | Routine aerodrome weather observation |
| SPECI | Special Report | Special weather observation (significant changes) |
| TAF | Terminal Aerodrome Forecast | Aerodrome weather forecast (9h, 24h, or 30h) |
| SIGMET | Significant Meteorological Information | Warning for dangerous en-route weather |
| AIRMET | Airmen's Meteorological Information | Weather significant for low-level flights |
| VAA | Volcanic Ash Advisory | Volcanic ash cloud information |
| TCA | Tropical Cyclone Advisory | Tropical cyclone information |
- Multi-Message Support - METAR, SPECI, TAF, SIGMET, AIRMET, VAA, TCA
- Auto-Detection - Automatically loads appropriate grammar based on first token
- Syntax Highlighting - Token-based coloring with customizable themes
- Intelligent Autocompletion - Context-aware suggestions based on grammar rules
- Real-time Validation - Immediate feedback on syntax errors
- Modular Grammars - Each message type has its own loadable grammar file
- Inline Controls - Support for embedded controls (e.g., map for geometry input)
- Dark/Light Themes - Automatic theme detection via
color-scheme - Zero Dependencies - Pure Web Component, works with any framework
- Readonly Mode - Visual indicator when editing is disabled
<!-- Using unpkg -->
<script type="module" src="https://unpkg.com/@softwarity/tac-editor"></script>
<!-- Or using jsDelivr -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@softwarity/tac-editor"></script>npm install @softwarity/tac-editorimport '@softwarity/tac-editor';<!DOCTYPE html>
<html lang="en">
<head>
<script type="module" src="https://unpkg.com/@softwarity/tac-editor"></script>
</head>
<body>
<tac-editor placeholder="Enter TAC message (METAR, TAF, SIGMET...)"></tac-editor>
</body>
</html><tac-editor value="METAR LFPG 281030Z 27015KT 9999 FEW040 12/05 Q1023 NOSIG"></tac-editor>By default, all message types are available. You can restrict to specific ones using WMO TAC codes:
<!-- Only METAR support -->
<tac-editor message-types="SA"></tac-editor>
<!-- METAR and SPECI only -->
<tac-editor message-types="SA,SP"></tac-editor>
<!-- TAF (Long and Short) -->
<tac-editor message-types="FT,FC"></tac-editor>
<!-- All SIGMET variants -->
<tac-editor message-types="WS,WV,WC"></tac-editor>TAC Code Reference:
| Code | Message Type |
|---|---|
| SA | METAR |
| SP | SPECI |
| FT | TAF Long (30h) |
| FC | TAF Short (12h) |
| WS | SIGMET Weather |
| WV | SIGMET Volcanic Ash |
| WC | SIGMET Tropical Cyclone |
| WA | AIRMET |
| FV | VAA |
| FK | TCA |
const editor = document.querySelector('tac-editor');
// Valid TAC emits change event
editor.addEventListener('change', (e) => {
console.log('TAC message:', e.detail.value);
console.log('Message type:', e.detail.type); // 'METAR', 'TAF', etc.
console.log('Tokens:', e.detail.tokens);
});
// Syntax error emits error event
editor.addEventListener('error', (e) => {
console.log('Syntax errors:', e.detail.errors);
});const editor = document.querySelector('tac-editor');
// Set value
editor.value = 'TAF LFPG 281100Z 2812/2912 27012KT 9999 SCT040';
// Get current value
console.log(editor.value);
// Get parsed tokens
console.log(editor.tokens);
// Get current suggestions
console.log(editor.suggestions);
// Check validity
console.log(editor.isValid);
// Get detected message type
console.log(editor.messageType); // 'TAF'| Attribute | Type | Default | Description |
|---|---|---|---|
value |
String | '' |
The TAC message content |
placeholder |
String | '' |
Placeholder text when empty |
readonly |
Boolean | false |
Disable editing |
message-types |
String | 'all' |
Comma-separated list of TAC codes (SA, SP, FT, FC, WS, WV, WC, WA, FV, FK) |
locale |
String | 'en' |
Locale for grammar descriptions (en, fr) |
theme |
String | 'default' |
Theme name (or custom CSS properties) |
tac-editor {
/* Background and text */
--tac-bg: #1e1e1e;
--tac-text: #d4d4d4;
--tac-placeholder: #6e6e6e;
/* Token colors */
--tac-keyword: #569cd6; /* METAR, TAF, SIGMET... */
--tac-location: #4ec9b0; /* ICAO codes: LFPG, EGLL... */
--tac-datetime: #ce9178; /* Date/time: 281030Z */
--tac-value: #b5cea8; /* Numeric values */
--tac-unit: #9cdcfe; /* Units: KT, MPS, SM... */
--tac-weather: #c586c0; /* Weather phenomena: RA, SN, TS... */
--tac-cloud: #dcdcaa; /* Cloud types: FEW, SCT, BKN, OVC */
--tac-remark: #6a9955; /* Remarks section */
--tac-error: #f44747; /* Invalid tokens */
/* UI elements */
--tac-cursor: #aeafad;
--tac-selection: rgba(38, 79, 120, 0.5);
--tac-suggestion-bg: #252526;
--tac-suggestion-hover: #094771;
}The component respects color-scheme:
/* Will use light theme when page prefers light */
:root {
color-scheme: light dark;
}Or force a specific mode:
tac-editor {
color-scheme: dark; /* Always dark */
}Grammars are modular JSON files named using WMO TAC codes:
grammars/
├── sa.{locale}.json # METAR (extends metar-base)
├── sp.{locale}.json # SPECI (extends metar-base)
├── metar-base.{locale}.json # Base grammar for METAR/SPECI
├── ft.{locale}.json # TAF Long 30h (extends taf)
├── fc.{locale}.json # TAF Short 12h (extends taf)
├── taf.{locale}.json # Base grammar for TAF
├── ws.{locale}.json # SIGMET Weather (extends sigmet)
├── wv.{locale}.json # SIGMET Volcanic Ash (extends sigmet)
├── wc.{locale}.json # SIGMET Tropical Cyclone (extends sigmet)
├── sigmet.{locale}.json # Base grammar for SIGMET
├── wa.{locale}.json # AIRMET
├── fv.{locale}.json # Volcanic Ash Advisory
└── fk.{locale}.json # Tropical Cyclone Advisory
Where {locale} is the language code (e.g., en, fr).
Grammar Inheritance: Child grammars use the extends property to inherit tokens, structure, and suggestions from base grammars.
You can load custom grammars:
const editor = document.querySelector('tac-editor');
await editor.loadGrammar('custom', {
name: 'CUSTOM',
tokens: { /* ... */ },
rules: { /* ... */ }
});| Event | Detail | Description |
|---|---|---|
change |
{ value, type, tokens } |
Fired when content changes (valid) |
error |
{ errors } |
Fired when syntax errors detected |
suggestion |
{ suggestions, selected } |
Fired when suggestions change |
- Chrome/Edge 88+
- Firefox 78+
- Safari 14+
METAR LFPG 281030Z 27015G25KT 9999 FEW040CB SCT100 12/05 Q1023 TEMPO 3000 TSRA
TAF LFPG 281100Z 2812/2912 27012KT 9999 SCT040
BECMG 2818/2820 18008KT
TEMPO 2902/2908 3000 BR
SIGMET LFFF 1 VALID 281200/281600 LFPW-
LFFF PARIS FIR SEV TURB FCST WI N4830 E00230 - N4730 E00330 - N4700 E00200
FL250/350 MOV NE 20KT WKN
Contributions are welcome! Please read our Development Guide first.
MIT © Softwarity