WireMD

Free plan APIExtensionLinuxMacWebWindows

What WireMD is

WireMD turns Markdown into UI wireframes and mockups for developers and designers. It is free and open source under the MIT license, with seven visual styles and 41 supported components. Wireframes can be exported as HTML, JSON, React (JSX/TSX), or Tailwind CSS; Vue and Svelte renderers are described as coming soon. Its command-line tool supports watch mode, a development server, and live reload, and its Markdown is CommonMark-compatible. The VS Code extension provides live preview, style switching, and responsive viewport testing. An Obsidian plugin offers live previews, style switching, and export features, while a Figma plugin imports editable native designs with auto-layout and styling. A programmatic API can parse Markdown and render HTML, JSON, React, and Tailwind output. The project says wireframes can be stored as plain text in Git and reviewed in pull requests. Installation options include npm, yarn, pnpm, Homebrew on macOS, or source, with Node.js 18 or later listed. For generated HTML shown in a web context, the security policy advises sanitizing it and validating user-provided input.

Who it suits

WireMD suits developers who prefer text-based design and developers or designers prototyping interfaces. It may fit workflows using VS Code, Obsidian, Figma, or version-controlled plain-text wireframes.

What it does well

Free and open source under the MIT license.
Offers seven visual styles and 41 components.
Exports HTML, JSON, React, and Tailwind CSS.
VS Code extension includes live preview.
Figma plugin imports editable native designs.

What to know first

Vue and Svelte renderers are described as coming soon.
Requires Node.js 18 or later for documented installation.
Generated HTML should be sanitized before web display.

Plans

Plan	Billed and limits	Price
Free	Free and open source · MIT licensed	Free

As wiremd.dev lists them, read 10 Oct 2026. The maker's own page has the final word.

Getting started

Choose an installation route: npm, yarn, pnpm, Homebrew on macOS, or source.
Install with Node.js 18 or later.
Write a UI description in CommonMark-compatible Markdown.
Use the CLI, VS Code extension, Obsidian plugin, Figma plugin, or documented API to render or preview it.

Verdict

WireMD turns text-based wireframes into several developer-oriented outputs and connects with VS Code, Obsidian, and Figma. Review its export formats and follow its security guidance before displaying generated HTML on the web.

Questions

Is WireMD free?

Yes. The Free plan costs nothing, and WireMD is free and open source under the MIT license.

Which platforms does it support?

The listed platforms are API, extension, Linux, macOS, web, and Windows.

What can it export?

It exports HTML, JSON, React (JSX/TSX), and Tailwind CSS. Vue and Svelte renderers are described as coming soon.

Does WireMD work with VS Code, Obsidian, and Figma?

It has extensions or plugins for all three. VS Code provides live preview, style switching, and responsive viewport testing; Obsidian offers previews, style switching, and export; Figma imports editable designs.

How can I install it?

The README documents npm, yarn, pnpm, Homebrew on macOS, and installation from source. Node.js 18 or later is required.

What does its security policy advise?

It advises sanitizing generated HTML when displaying it in a web context and validating user-provided input. For supported-version security reports, it lists an initial response within 48 hours and a status update within 7 days.

Facts from WireMD's own pages

API: The README documents a programmatic API for parsing Markdown and rendering HTML, JSON, React, and Tailwind output. · github.com, 9 Oct 2026
CLI: The CLI can render mockups from the command line and includes watch mode, a development server, and live reload. · wiremd.dev, 10 Oct 2026
Exports: It exports to HTML, JSON, React (JSX/TSX), and Tailwind CSS; Vue and Svelte renderers are described as coming soon. · wiremd.dev, 10 Oct 2026
Figma: The Figma plugin imports designs as editable native Figma designs with auto-layout and styling. · wiremd.dev, 9 Oct 2026
Free and open source: WireMD is free and open source under the MIT license. · wiremd.dev, 9 Oct 2026
Installation: The README documents installation through npm, yarn, pnpm, Homebrew on macOS, or from source, and lists Node.js 18 or later. · github.com, 10 Oct 2026
Integrations: The site lists a VS Code live preview, an Obsidian plugin, and a Figma plugin for importing editable designs. · wiremd.dev, 10 Oct 2026
Markdown compatibility: The site says WireMD uses valid Markdown, works with any Markdown parser, and is 100% CommonMark compatible. · wiremd.dev, 10 Oct 2026
Obsidian: The Obsidian plugin offers live previews, style switching, and export features, and is described as mobile optimized. · wiremd.dev, 9 Oct 2026
Performance: The site gives a target parse time under 100 ms and render time under 200 ms. · wiremd.dev, 10 Oct 2026
Purpose: WireMD turns Markdown into UI wireframes and mockups for developers and designers. · wiremd.dev, 10 Oct 2026
Security: The security policy warns that raw HTML may be allowed in Markdown and advises sanitizing HTML output before displaying it in a web context. · github.com, 10 Oct 2026
Security support: The security policy requests vulnerability reports through the maintainer’s listed email and says the initial response target is within 48 hours. · github.com, 10 Oct 2026
Styles and components: The site lists 7 visual styles and 41 supported components. · wiremd.dev, 9 Oct 2026
Supported components: The site states that WireMD supports 41 components. · wiremd.dev, 10 Oct 2026
Supported version: The security policy lists version 0.1.x as supported for vulnerability patches. · github.com, 10 Oct 2026
Version control: The project README says wireframes can be stored as plain text in Git and reviewed in pull requests. · github.com, 10 Oct 2026
Visual styles: It offers seven styles: sketch, clean, wireframe, tailwind, material, brutal, and none. · wiremd.dev, 10 Oct 2026
VS Code: The VS Code extension provides live preview, style switching, and responsive viewport testing. · wiremd.dev, 9 Oct 2026
What it does: WireMD turns Markdown into UI wireframes and mockups for developers and designers. · wiremd.dev, 9 Oct 2026
Who it is for: WireMD describes itself as a text-first design tool for developers who think in code and for developers and designers prototyping UI. · wiremd.dev, 9 Oct 2026

Where WireMD stands on Freedom251

AI Wireframe Generators#23 of 34