UIDL to SVG Converter

Convert your TeleportHQ-style UIDL JSON directly into an SVG representation inside Visual Studio Code.

✨ Features

• Parses UIDL JSON files
• Converts components (container, text, image) into positioned <svg> elements
• Supports absolute positioning (top, left) and font styling
• Outputs SVG directly in a new text document
• Simple and fast visualization tool for static layout inspection

📦 Usage

1. Open a .json file that follows the UIDL structure.
2. Run the command:
   Command Palette → Convert UIDL to SVG
3. A new editor tab will open showing the SVG code generated from the UIDL.

💡 Example UIDL Input

{
  "componentUIDLs": [
    {
      "name": "Frame",
      "node": {
        "type": "element",
        "content": {
          "elementType": "container",
          "style": {
            "top": { "type": "static", "content": 50 },
            "left": { "type": "static", "content": 50 }
          },
          "children": [
            {
              "type": "static",
              "content": "[A] Hero Section"
            }
          ]
        }
      }
    }
  ]
}

Output Example

<svg width="1000" height="1800" xmlns="http://www.w3.org/2000/svg">
  <text x="50" y="50" font-size="16">[A] Hero Section</text>
</svg>