Skip to content

Visual Styles

wiremd includes 7 built-in visual styles. Pass one with --style on the CLI or { style: '...' } in the API.

StyleDescriptionBest for
sketchHand-drawn, Balsamiq-styleBrainstorming, low-fidelity
cleanModern minimalPresentations, high-fidelity mockups
wireframeBlack & white, traditionalDeveloper handoff, specs
materialMaterial Design inspiredAndroid apps, Google-style
brutalNeo-brutalism, bold colorsArtistic, statement designs
tailwindTailwind CSS utility classesTailwind projects
noneSemantic HTML, no CSSCustom styling

sketch is the default when no style is specified.

Previews

sketch

sketch style

clean

clean style

wireframe

wireframe style

material

material style

brutal

brutal style

tailwind

tailwind style

none

none style

CLI

bash
wiremd file.md --style clean --serve 3001 --watch
wiremd file.md --style sketch
wiremd file.md --style wireframe -o output.html

API

typescript
import { parse, renderToHTML } from 'wiremd';

const html = renderToHTML(parse(markdown), { style: 'clean' });

VS Code

Use the style picker in the wiremd preview panel to switch styles live — no terminal needed.