‼️‼️ IMPORTANT

This extension is used to create widgets with this tool: HtmlWidgetsRust.

📦 YTML Language Support – VS Code Extension

Language support for YTML , a simplified XML/HTML-based format used to build desktop widgets, panels, and UI components.

This extension provides:

🎨 Syntax Highlighting
🔍 Real-time Validation (Diagnostics)
⚠️ Built-in YTML rules
✨ Snippets for fast development
📄 Automatic detection of .ytml files

Perfect for projects that use YTML as a widget-based UI definition language.

🚀 Features

✔️ Syntax Highlighting

Based on text.html.basic, extended with YTML-specific tags:

config
window
decorations
resizable
transparent
body
div
button

✔️ Real-time Validation

The built-in validator checks several structural rules:

🔸 `<body>` is required

If missing, an error is displayed.

🔸 All `<button>` elements must have `id=""`

Invalid example:


<button width="50">🏠</button>

Diagnostic:


Every

🔸 Only one `<config>` block is allowed

Prevents configuration conflicts.

✔️ Snippets Included

window snippet:


<window width="" height="" x="" y="" />

button snippet:


<button id="" width="">Text</button>

📁 Project Structure


ytml-language-support/
├── syntaxes/
│   └── ytml.tmLanguage.json      ← YTML grammar definition
├── snippets/
│   └── ytml.json                 ← Snippets for YTML
├── src/
│   └── extension.ts              ← Validator + diagnostics logic
├── language-configuration.json   ← Auto-closing, brackets, comments
├── package.json                  ← VS Code extension setup
├── tsconfig.json                 ← TypeScript configuration
└── README.md

🛠️ Installation (Development Mode)

Clone the repository:


git clone 
cd ytml-language-support

Install dependencies:


npm install

Compile the extension:


npm run compile

Open the project in VS Code:


code .

Run the extension:

Press F5

→ A new VS Code window opens with the extension enabled

🧪 Testing with a `.ytml` File

Create a file named test.ytml:


<config>
    <window width="60" height="1200" x="0" y="0" />
</config>

<body>
    <div id="taskbar-container">
        <button id="btn-home">🏠</button>
    </div>
</body>

You will see:

Syntax highlighting
Diagnostics for invalid structures
Snippet suggestions
Auto-closing tags

📜 YTML Example Format


<config>
    <window width="200" height="300" x="10" y="10" />
    <decorations enabled="false" />
    <resizable enabled="false" />
</config>

<body>
    <div id="menu">
        <button id="btn-files">📁</button>
        <button id="btn-settings">⚙️</button>
    </div>
</body>

YTML is designed to describe desktop widget layouts in a concise, human-readable way — combining familiar HTML structure with strict UI configuration blocks.

YTML Widget Language

YTML support

‼️‼️ IMPORTANT

📦 YTML Language Support – VS Code Extension

🚀 Features

✔️ Syntax Highlighting

✔️ Real-time Validation

🔸 `<body>` is required

🔸 All `<button>` elements must have `id=""`

🔸 Only one `<config>` block is allowed

✔️ Snippets Included

📁 Project Structure

🛠️ Installation (Development Mode)

🧪 Testing with a `.ytml` File

📜 YTML Example Format

YTML Widget Language

YTML support

‼️‼️ IMPORTANT

📦 YTML Language Support – VS Code Extension

🚀 Features

✔️ Syntax Highlighting

✔️ Real-time Validation

🔸 <body> is required

🔸 All <button> elements must have id=""

🔸 Only one <config> block is allowed

✔️ Snippets Included

📁 Project Structure

🛠️ Installation (Development Mode)

🧪 Testing with a .ytml File

📜 YTML Example Format

🔸 `<body>` is required

🔸 All `<button>` elements must have `id=""`

🔸 Only one `<config>` block is allowed

🧪 Testing with a `.ytml` File