wiremd Components

## Sign In

Email
[_____________________________]{type:email required}

Password
[_____________________________]{type:password required}

- [ ] Remember me

[Sign In]* [Forgot password?]

wiremd converts Markdown with extended syntax into visual wireframes. Use these components to prototype UIs directly in your editor.

Standard Markdown

All standard CommonMark Markdown works inside wiremd files:

Syntax	Example
Headings	# H1, ## H2, ### H3 … ###### H6
Bold	**bold**
Italic	*italic*
Inline code	`code`
Link	[text](url)
Image	
Unordered list	- item
Ordered list	1. item
Blockquote	> quoted text
Table	| col | col | with --- separator row
Horizontal rule	---
Fenced code block	``` … ```

wiremd extends this with UI components — nothing above is broken or overridden.

Best Practices

1. Label inputs — put label text on the line directly above the input, no blank line between them
2. Use semantic headings — # for page title, ## for sections, ### for column/tab panel headings
3. Use plain tokens for common intent — {primary}, {danger}, {large}, {disabled}, {right}
4. Use dot-prefixed tokens only for raw CSS classes — {.custom-class} is the escape hatch
5. Group related items with containers — :::card, :::columns-N, :::row to organise content
6. One ::: container can nest inside another — track depth; the inner ::: closes its own block only

Full syntax reference

Need all components, attributes, and patterns on one page? See the Syntax Reference.