openmockup

Git-native, AI-ready wireframe format for modern dev teams.

Write mockups as structured text → render as wireframes → generate React code.

npm install -g openmockup

Why

Modern teams are stuck between two worlds:

• Balsamiq / Figma give you a visual — but files are blobs, unreadable by AI agents, untrackable in git
• Confluence / Markdown are great for AI and git — but lose the visual picture

In the age of AI-assisted development you need both at once: an agent that can read the spec, and a human who can see it.

Open Mockup is a single .openmockup file that provides both:

          .openmockup (structured text)
                     │
      ┌──────────────┼──────────────┐
      ↓              ↓              ↓
 Wireframe       GUI editor        Agent
 preview         (for humans)      (for code gen)

Quick start

# Install CLI
npm install -g openmockup

# Validate a DSL file
openmockup my-screen.dsl.json

# Generate wireframe HTML preview
openmockup my-screen.dsl.json -f html -o preview.html

# Generate TypeScript builder code
openmockup my-screen.dsl.json -f builder -o screen.ts

The format

A .openmockup file (or .dsl.json) describes a UI screen in structured JSON:

{
  "$schema": "https://unpkg.com/@openmockup/cli/schema/dsl-v0.1.json",
  "version": "0.1",
  "page": {
    "title": "New Order",
    "layout": {
      "type": "form",
      "fields": [
        { "type": "field", "name": "supplier", "label": "Supplier", "fieldType": "select" },
        { "type": "field", "name": "amount",   "label": "Amount",   "fieldType": "number" }
      ],
      "actions": [
        { "type": "button", "label": "Submit", "variant": "primary" }
      ]
    }
  }
}

Key properties:

• Text-based — diffs in git, readable in any editor
• Structured — parsed without a vision model, no OCR
• Semantic — components carry behavioral meaning (form, table, card)
• Renders instantly — wireframe preview in the browser in one command

Packages

| Package | Description | |---------|-------------| | openmockup | This package — CLI + DSL API in one install | | @openmockup/cli | The CLI tool (openmockup command) | | @openmockup/dsl | TypeScript types and builder functions | | @openmockup/flow | Optional form-flow DSL and runtime (action -> form transitions, back, modals) | | @openmockup/renderer-core | Renderer interface and IR compile step | | @openmockup/renderer-mantine | Mantine v7 wireframe renderer |

Status

Early development — v0.1.0. API and format are not stable.

Star the repo, open issues, try it out: https://github.com/open-mockup/openmockup

License

MIT