Overview
Lisp-like syntax for wireframes. Embeds in Markdown. Perfect for AI.
Pure text. Markdown native. AI-first.
Get Started →
See it in Action
Try it yourself
Edit the code above and watch the preview update. That's all there is to it — no build step, no complex tooling.
Why WireScript?
Simple Syntax
Clean, readable S-expressions with minimal punctuation. Learn the basics in minutes.
Markdown Native
Embed wireframes directly in your PRDs, specs, and READMEs. Documentation and design live together.
AI-Friendly
Designed for LLMs to generate reliably. Ask Claude to draw your wireframes — it just works.
Pure Text
No HTML, CSS, or JavaScript. Diffs are clean. Code reviews are easy. Merges don't conflict.
30+ Components
Containers, inputs, data displays, navigation, overlays — everything you need for any UI.
Version Controlled
Track UI changes alongside your code. Every wireframe revision is a commit.
Syntax at a Glance
(element-type "content" :properties... children...)| Part | What it does | Example |
|---|---|---|
element-type | What kind of element | box, text, button, card |
"content" | Optional text content | "Hello World" |
:property | Boolean (flag) | :primary, :center |
:property value | Key-value pair | :gap 16, :to dashboard |
children | Nested elements | (box (text "hi")) |
Quick Start
Write your wireframe
Create a .wire file or embed in Markdown:
(wire
(screen home "Home" :desktop
(box :center :gap 24 :padding 48
(text "Hello, WireScript!" :high)
(button "Get Started" :primary))))Preview instantly
Use the Playground, Chrome Extension, or Obsidian Plugin to preview your wireframes. Changes reflect immediately.
Iterate with AI
Ask any LLM to modify, extend, or generate new wireframes. The syntax is trivial to learn.
Who is it for?
Write specs with embedded wireframes
Drop WireScript into your PRDs and requirements docs. Stakeholders see the UI alongside the description. No context switching to Figma.
Wireframes as code
Version control your UI specs. Review wireframe changes in PRs. No binary files, no merge conflicts.
Generate UIs from descriptions
The S-expression syntax is trivially easy for LLMs. Describe what you want, get a working wireframe.
Preview Anywhere
Embed WireScript directly in your markdown files using fenced code blocks:
```wire
(box :gap 16
(text "Hello" :high)
(button "Click me" :primary))
```Then preview your wireframes with our tools:
Chrome Extension
Install from Chrome Web Store to render wireframes on GitHub. View READMEs, issues, and PRs with interactive previews.
Obsidian Plugin
Render wireframes inline in your Obsidian notes. Coming soon to the community plugins — build from source today.
CLI
Validate, render, and build wireframes from the command line. Export to HTML or PNG, generate static sites.
Core Concepts
Screens & Navigation
Every document contains screens. Use :to to navigate between them or open overlays:
Reusable Components
Define components to avoid repetition:
Shared Layouts
Share common page structure across screens:
Elements at a Glance
| Category | Elements |
|---|---|
| Containers | box card section header footer nav form list scroll group |
| Content | text icon image avatar badge divider |
| Interactive | button dropdown |
| Inputs | input datepicker |
| Data | metric chart progress skeleton |
| Navigation | tabs tab breadcrumb crumb |
| Overlays | modal drawer popover |
| Utility | tooltip toast empty slot |