Coherent.js Playground

Create and test Coherent.js components safely using JSON syntax. Define your component structure and see the live preview and generated HTML.

Tip: Press Ctrl+Enter to run

Component JSON

{
  "div": {
    "style": "padding: 24px; font-family: system-ui, sans-serif; max-width: 600px;",
    "children": [
      { 
        "h1": { 
          "text": "Welcome to Coherent.js! 🚀",
          "style": "color: #7cc4ff; margin-bottom: 16px; font-weight: 700;"
        } 
      },
      { 
        "p": { 
          "text": "This is a safe component playground using JSON syntax. Edit and click Run!",
          "style": "color: #e6edf3; margin-bottom: 20px; line-height: 1.6;"
        } 
      },
      {
        "div": {
          "style": "background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 20px; border-radius: 12px; text-align: center; margin-bottom: 20px;",
          "children": [
            { "h3": { "text": "Safe JSON Syntax", "style": "margin-bottom: 8px; font-weight: 600;" } },
            { "p": { "text": "No code execution - pure data-driven components" } }
          ]
        }
      },
      {
        "div": {
          "style": "padding: 20px; background: rgba(59, 247, 125, 0.1); border: 1px solid rgba(59, 247, 125, 0.3); border-radius: 12px; backdrop-filter: blur(12px);",
          "children": [
            { "strong": { "text": "Security Features:", "style": "color: #3bf77d; font-size: 16px;" } },
            { "ul": {
              "style": "margin: 12px 0 0 0; padding-left: 20px; color: #e6edf3;",
              "children": [
                { "li": { "text": "No arbitrary code execution", "style": "margin-bottom: 8px;" } },
                { "li": { "text": "Whitelisted HTML elements and properties", "style": "margin-bottom: 8px;" } },
                { "li": { "text": "Safe JSON parsing with validation" } }
              ]
            } }
          ]
        }
      }
    ]
  }
}

Status

Ready to run your component...

Component preview will appear here...

Generated HTML will appear here...