JSON DESIGN App - Advanced UI/UX Design Tool

Select

Rectangle

Circle

Text

Button

Input

Image

Icon

Header

Card

Form

Navbar

Footer

List

iPhone 14 - Preview

Properties

JSON Editor

Code

Element Properties

Sync

Position & Size

Width

Height

Appearance

Border Radius

0px 8px 50px

Text Properties

Shadow & Effects

0% 100% 100%

JSON Editor

Validate

{
  "appName": "JSON DESIGN App",
  "version": "1.0.0",
  "canvas": {
    "width": 375,
    "height": 667,
    "backgroundColor": "#ffffff"
  },
  "elements": [
    {
      "id": "header1",
      "type": "header",
      "position": { "x": 0, "y": 0 },
      "size": { "width": 375, "height": 80 },
      "style": {
        "backgroundColor": "#2563eb",
        "color": "#ffffff",
        "fontSize": "20px",
        "borderRadius": "0 0 20px 20px"
      },
      "content": "JSON DESIGN App",
      "children": []
    },
    {
      "id": "card1",
      "type": "card",
      "position": { "x": 20, "y": 100 },
      "size": { "width": 335, "height": 200 },
      "style": {
        "backgroundColor": "#ffffff",
        "border": "1px solid #e2e8f0",
        "borderRadius": "16px",
        "boxShadow": "0 4px 6px rgba(0,0,0,0.1)"
      },
      "content": "Welcome to JSON DESIGN App",
      "children": [
        {
          "id": "cardTitle",
          "type": "text",
          "position": { "x": 20, "y": 20 },
          "content": "Design Interface",
          "style": {
            "fontSize": "18px",
            "fontWeight": "600",
            "color": "#1e293b"
          }
        }
      ]
    }
  ]
}

Generated Code

Copy

Export Format

// Generated code will appear here