JSON Layout Engine v2 - Live Playground

Experiment with v2's semantic content types, presets, and templates in real-time

What Makes v2 Powerful

Version 2 introduces semantic content types (cards, buttons, badges), powerful presets (hero, features, pricing), template-driven data rendering, and interactive component wrappers (modals, tooltips, selects). Edit the JSON on the left and see instant results on the right!

Semantic Types

Use high-level content types like "card", "button", "badge" instead of raw HTML

Powerful Presets

Pre-built layouts for hero sections, features, pricing, testimonials, and more

Template System

Define once, render multiple items from data arrays with variable substitution

Interactive Components

Built-in wrappers for modals, tooltips, dropdowns with automatic initialization

Quick Examples - Click to Load

Keyboard Shortcuts & Tips

Ctrl/Cmd + Enter → Render layout  |  Alt + Shift + F → Format JSON  |  Ctrl/Cmd + S → Save to browser storage  |  Auto-saves: Changes are automatically saved to your browser every 1 second!

JSON Configuration

Live Preview

Click a preset example or edit the JSON and click "Render" to see the magic!

HTML → JSON Converter