GrafiqHand-drawn mockups from text

A code-backed mockup DSL — think “Mermaid for wireframes”. LLM-friendly, deterministic, and it drops straight into markdown.

Get started

Syntax cheatsheet

Components

Playground

Tiny, forgiving DSL

One component per line, indentation for nesting. Unknown attributes are ignored and errors render as sticky notes instead of throwing.

Deterministic sketch rendering

A seeded RNG means the same DSL always renders identically — great for spec diffs and screenshots.

Lightly interactive

Dropdowns open, tabs switch, checkboxes flip, and screens scroll — right inside your docs.

Try it

screen "Login" size=380x520
  navbar "MyApp"
    avatar
  col pad=24 gap=16
    heading "Welcome back"
    text "Sign in to continue" muted
    input "Email" placeholder="you@example.com"
    input "Password" type=password
    row gap=8
      checkbox "Remember me" checked
      spacer
      link "Forgot password?"
    button "Sign In" primary fill
    divider "or"
    button "Continue with Google"

Hover the mockup and click the </> button to see the source.

GrafiqHand-drawn mockups from text

Tiny, forgiving DSL

Deterministic sketch rendering

Lightly interactive

Try it ​

Try it