json2mock

Documentation & Examples

Getting Started

json2mock helps you create wireframe sketches from simple JSON descriptions. Perfect for rapid prototyping, brainstorming, and visualizing your app ideas.

How to Use: Paste JSON into the editor on the homepage and click "Generate Mockup"

Describe your layout structure using simple JSON components, and get a clean wireframe sketch instantly. No design experience required!

Let AI Help You Create Wireframes

Don't want to write JSON? Let our AI assistant create wireframes for you! Just describe your app idea in plain English.

🤖 Wireframe Designer by json2mock.com

Our ChatGPT assistant can instantly create wireframes from your descriptions:

  • "Create a dashboard for my business" → Professional dashboard wireframe
  • "Design a mobile app for food delivery" → Mobile app layout
  • "Make a landing page for my startup" → Landing page wireframe

The wireframes appear right in your ChatGPT conversation - no JSON required!

Basic Example

Here's the simplest possible wireframe - just a header and a card:

JSON Input: 

{
  "title": "My App",
  "layout": {
    "type": "container",
    "children": [
      {
        "type": "header",
        "content": "Welcome to My App"
      },
      {
        "type": "card",
        "title": "Main Content",
        "content": "This is where your content goes"
      }
    ]
  }
}

Result:

Generates a clean SVG wireframe with a header and content card.

Layout Components

Layout components organize other elements. They don't render visually but control positioning.

Container

Root wrapper for all layouts. Stacks children vertically.

{
  "type": "container",
  "children": [...]
}

Row

Arranges children horizontally side-by-side.

{
  "type": "row",
  "children": [
    {"type": "card", "title": "Left"},
    {"type": "card", "title": "Right"}
  ]
}

Column

Stacks children vertically (like container).

{
  "type": "column",
  "children": [
    {"type": "header", "content": "Top"},
    {"type": "text", "content": "Bottom"}
  ]
}

Grid

Arranges children in a grid layout.

{
  "type": "grid",
  "columns": 3,
  "children": [
    {"type": "card", "title": "Item 1"},
    {"type": "card", "title": "Item 2"},
    {"type": "card", "title": "Item 3"}
  ]
}

Content Components

Visual components that render content in your wireframe.

Header

Large title text, typically at the top of pages.

{
  "type": "header",
  "content": "Page Title"
}
Properties: content

Card

Bordered container with optional title, content, and items list.

{
  "type": "card",
  "title": "Card Title",
  "content": "Line 1\nLine 2",
  "items": ["Item 1", "Item 2", "Item 3"]
}
Properties: title, content, items
Use \n for line breaks in content

Text

Simple text content with multiline and alignment support.

{
  "type": "text",
  "content": "Line 1\nLine 2\nLine 3",
  "align": "center"
}
Properties: content, align (left/center/right)
Use \n for line breaks

Image

Placeholder for images.

{
  "type": "image",
  "title": "Product Photo"
}
Properties: title (optional caption)

Table

Data table placeholder.

{
  "type": "table",
  "title": "User Data"
}
Properties: title

List

Bulleted list of items.

{
  "type": "list",
  "title": "Features",
  "items": ["Fast", "Reliable", "Easy"]
}
Properties: title, items

Interactive Components

Components representing user interface elements.

Button

Clickable button element.

{
  "type": "button",
  "content": "Click Me"
}
Properties: content

Form

Input form with placeholder fields.

{
  "type": "form",
  "title": "Contact Form"
}
Properties: title

Navigation

Horizontal navigation menu.

{
  "type": "nav",
  "items": ["Home", "About", "Contact"]
}
Properties: items

Sidebar

Vertical navigation sidebar.

{
  "type": "sidebar",
  "width": "25%",
  "items": ["Dashboard", "Settings", "Help"]
}
Properties: items, width

Form Elements New!

Specific form input elements for creating detailed forms.

Input

Text input field with label and placeholder.

{
  "type": "input",
  "label": "Email Address",
  "placeholder": "user@example.com"
}
Properties: label, placeholder

Checkbox

Multiple selection checkboxes.

{
  "type": "checkbox",
  "label": "Select options",
  "items": ["Option A", "Option B", "Option C"],
  "checked": [0, 2]
}
Properties: label, items, checked

Radio

Single selection radio buttons.

{
  "type": "radio",
  "label": "Choose one",
  "items": ["Yes", "No", "Maybe"],
  "selected": 0
}
Properties: label, items, selected

Dropdown

Select dropdown menu.

{
  "type": "dropdown",
  "label": "Country",
  "placeholder": "Select country..."
}
Properties: label, placeholder

Tabs

Tab navigation component.

{
  "type": "tabs",
  "items": ["Overview", "Details", "Settings"],
  "activeTab": 0
}
Properties: items, activeTab

Progress

Progress bar with percentage.

{
  "type": "progress",
  "label": "Upload Progress",
  "value": 75,
  "showValue": true
}
Properties: label, value, showValue

Dashboard Example

A complete dashboard layout with sidebar and metrics grid:

JSON Input: 

{
  "title": "Analytics Dashboard",
  "layout": {
    "type": "container",
    "children": [
      {
        "type": "header",
        "content": "Analytics Dashboard"
      },
      {
        "type": "row",
        "children": [
          {
            "type": "sidebar",
            "width": "20%",
            "items": ["Overview", "Reports", "Settings", "Help"]
          },
          {
            "type": "column",
            "width": "80%",
            "children": [
              {
                "type": "grid",
                "columns": 3,
                "children": [
                  {"type": "card", "title": "Users", "content": "1,234"},
                  {"type": "card", "title": "Revenue", "content": "$12,345"},
                  {"type": "card", "title": "Orders", "content": "567"}
                ]
              },
              {
                "type": "card",
                "title": "Recent Activity",
                "content": "Latest user interactions and system events"
              }
            ]
          }
        ]
      }
    ]
  }
}

Contact Form Example

A simple contact page layout:

JSON Input: 

{
  "title": "Contact Us",
  "layout": {
    "type": "container",
    "children": [
      {
        "type": "header",
        "content": "Get In Touch"
      },
      {
        "type": "row",
        "children": [
          {
            "type": "column",
            "width": "60%",
            "children": [
              {
                "type": "form",
                "title": "Contact Form"
              },
              {
                "type": "button",
                "content": "Send Message"
              }
            ]
          },
          {
            "type": "column",
            "width": "40%",
            "children": [
              {
                "type": "card",
                "title": "Office Hours",
                "content": "Mon-Fri: 9AM-5PM"
              },
              {
                "type": "card",
                "title": "Location",
                "content": "123 Main Street"
              }
            ]
          }
        ]
      }
    ]
  }
}

E-commerce Example

Product page with navigation and details:

JSON Input: 

{
  "title": "Product Store",
  "layout": {
    "type": "container",
    "children": [
      {
        "type": "nav",
        "items": ["Home", "Products", "About", "Cart"]
      },
      {
        "type": "header",
        "content": "Featured Products"
      },
      {
        "type": "grid",
        "columns": 3,
        "children": [
          {
            "type": "card",
            "title": "Product 1",
            "content": "$29.99"
          },
          {
            "type": "card", 
            "title": "Product 2",
            "content": "$39.99"
          },
          {
            "type": "card",
            "title": "Product 3", 
            "content": "$19.99"
          }
        ]
      },
      {
        "type": "text",
        "content": "Free shipping on orders over $50"
      }
    ]
  }
}