Skip to content
| Marketplace
Sign in
Visual Studio Code>Visualization>UIDL to SVG ConverterNew to Visual Studio Code? Get it now.
UIDL to SVG Converter

UIDL to SVG Converter

supervision

|
2 installs
| (0) | Free
Converts UIDL JSON to SVG representation directly in VS Code.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

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>
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft