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
- Open a
.json file that follows the UIDL structure.
- Run the command:
Command Palette → Convert UIDL to SVG
- A new editor tab will open showing the SVG code generated from the UIDL.
{
"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>
| |