Design UI Mockups
with Markdown
The text-first UI design tool for developers who think in code. Create wireframes and mockups as fast as you can type—no clicking, no dragging, just pure markdown magic.
From Markdown to Mockup
Write markdown on the left, see beautiful wireframes on the right—instantly
Built for Developers & Designers
Everything you need to prototype faster and collaborate better
Lightning Fast
No more clicking through UI tools. Type your mockup as fast as you can think. Parse time under 100ms for typical documents.
7 Visual Styles
From Balsamiq-inspired sketches to Material Design. Choose from sketch, clean, wireframe, tailwind, material, brutal, or none.
Multiple Export Formats
Export to HTML, JSON, React (JSX/TSX), and Tailwind CSS. Vue and Svelte renderers coming soon.
TypeScript Core
Built with TypeScript in strict mode. Unified/Remark-based parser with custom plugins for container syntax and inline components.
CLI Tool
Parse and render mockups from the command line. Watch mode with dev server and live reload. Perfect for rapid prototyping.
Performance First
Optimized for speed with target parse times under 100ms. Efficient AST transformation and rendering pipeline.
Markdown First
Valid markdown that degrades gracefully. Works with any markdown parser. No vendor lock-in.
VS Code Live Preview
Edit and preview in real-time. Switch between styles instantly. Responsive viewport testing built-in.
Obsidian Plugin
Live preview wiremd in Obsidian notes. Switch styles with one click. Mobile optimized with export features.
Export to Figma
Import wiremd designs into Figma as fully editable, native Figma designs with auto-layout and styling.
Installation
Up and running in seconds
npm install -g wiremd
Why WireMD?
See how we compare to traditional design tools
| Feature | WireMD | Figma | Balsamiq | Draw.io |
|---|---|---|---|---|
| Text-based input | ✓ | ✗ | ✗ | ✗ |
| Version control friendly | ✓ | ✗ | ✗ | ✗ |
| CLI tool | ✓ | ✗ | ✗ | ✗ |
| Free & open source | ✓ | ✗ | ✗ | ✓ |
| Export to code | ✓ | Limited | ✗ | ✗ |
| Learning curve | 5 minutes | Days | Hours | Hours |
| CI/CD integration | ✓ | ✗ | ✗ | ✗ |
Ready to Design at the Speed of Thought?
Stop wrestling with design tools. Start prototyping in plain text.
WireMD is free, open source, and ready to transform your workflow.