wiremd Syntax Guide & Component Showcase

Welcome to the comprehensive wiremd syntax guide! This document serves as both a reference and tutorial for all supported components and patterns.

💡 Tip: Use this document as a reference when creating your wireframes. Each section includes syntax examples and best practices.

🎨 Visual Styles: This showcase is available in 7 different styles:

• sketch - Balsamiq-inspired hand-drawn look (default)
• clean - Modern minimal design with system fonts
• wireframe - Traditional grayscale with hatching patterns
• tailwind - Utility-first design with purple accents
• material - Google Material Design with elevation
• brutal - Neo-brutalism with bold colors and thick borders
• none - Unstyled semantic HTML for custom CSS

Table of Contents

• 📝 Standard Markdown Support
• 🔘 Buttons
• 📋 Forms & Inputs
  • Text Inputs with Labels
  • Input Types & Attributes
  • Textarea
  • Checkboxes
  • Radio Buttons
  • Dropdown/Select
• 🗂️ Navigation
  • Navigation Bar
  • Breadcrumbs
• 📦 Containers
  • Card Container
  • Hero Section
  • Alert Types
  • Modal Dialog
  • Sidebar
  • Footer
• 🏗️ Grid Layouts
  • 2-Column Grid
  • 3-Column Grid
  • 4-Column Grid
• 📊 Tables
• 🎨 Icons
• 🎯 Component States
• 🎛️ Interactive Components
• ✅ Common Patterns & Best Practices
  • Complete Form Example
  • Dashboard Layout
• 🚀 Complete Page Example

Quick Links:

• Quick Reference - One-page syntax cheat sheet
• FAQ - Common questions and troubleshooting
• Syntax Guide - User-friendly guide
• Formal Specification - Technical specification

📝 Standard Markdown Support

wiremd supports all standard Markdown syntax including:

• Headings (H1-H6) using # syntax
• Text formatting - bold (**bold**), italic (*italic*), code (`code`)
• Lists - ordered, unordered, and nested lists
• Links - [text](url) and [text](url "title")
• Images -  with optional width/height
• Blockquotes - using > prefix
• Code blocks - fenced with ``` and optional language
• Tables - using standard markdown table syntax
• Horizontal rules - using ---, ***, or ___

The sections below focus on wiremd's unique UI component syntax for designing wireframes.

🔘 Buttons

Button Syntax

[Button Text]           # Default button
[Button Text]*          # Primary button (with asterisk)
[Button Text]{.class}   # Button with class

Basic Buttons

[Default Button]
[Primary Button]*
[Secondary Button]{.outline}

Rendered:

Button States

[Normal]
[Disabled]{state:disabled}
[Loading...]{state:loading}
[Active]{state:active}
[Success]{state:success}

Rendered:

Button Groups (Same Line)

[Save] [Cancel] [Reset]

Rendered:

Button Variants

[Primary Action]{variant:primary}
[Danger Action]{variant:danger}
[Secondary Action]{variant:secondary}

Rendered:

📋 Forms & Inputs

Text Input Syntax

⚠️ Important Rule: Label must be DIRECTLY above input (no blank line between them)

# ✅ Correct - Label touches input
Username
[_____________________________]

# ❌ Wrong - Blank line breaks association
Username

[_____________________________]

Text Inputs with Labels

Username
[_____________________________]

Email Address
[_____________________________] {type:email}

Password
[********] {type:password}

Phone Number
[_____________________________] {type:tel}

Rendered:

Input Width Control

Age
[___]

Zip Code
[_____]

Full Name
[_____________________________]

Rendered:

Input with Placeholder Text

⚠️ Note: Placeholder syntax is currently parsed as buttons. This is a known limitation that will be fixed in a future version.

[Enter your username___________]
[Search products...___________] {type:search}
[your.email@example.com_______] {type:email}

Input Types & Attributes

Date of Birth
[_____________________________] {type:date}

Quantity
[1___] {type:number min:1 max:100}

Website
[https://___________] {type:url}

Time
[_____________________________] {type:time}

Rendered:

Input States

Normal Field
[_____________________________]

Disabled Field
[Cannot edit___________] {state:disabled}

Required Field
[_____________________________] {required:true}

Error State
[Invalid input_________] {state:error}

Rendered:

Textarea (Multi-line)

Comments
[Share your thoughts...] {rows:4}

Description
[Describe your project in detail...] {rows:6 cols:60}

Rendered:

Checkboxes

Select options:
- [x] Option 1 (selected)
- [ ] Option 2
- [ ] Option 3
- [x] Option 4 (selected)

Rendered:

Option 1 (selected) Option 2 Option 3 Option 4 (selected)

Radio Buttons

- (*) Free Plan
- ( ) Pro Plan ($9/mo)
- ( ) Enterprise (Contact us)

Rendered:

Free Plan Pro Plan ($9/mo) Enterprise (Contact us)

Dropdown/Select

Country
[Select your country...v]
- United States
- Canada
- United Kingdom
- Australia
- Other

Rendered:

🗂️ Navigation

Navigation Bar Syntax

[[ Item1 | Item2 | Item3 ]]         # Basic nav
[[ Logo | Item1 | Item2 | [Button] ]] # With button
[[ :icon: Brand | Item1 | *Active* ]] # With icon & active

Examples

[[ Home | Products | Services | About | Contact ]]

[[ :logo: MyApp | Home | Features | Pricing | [Sign In] | [Get Started]* ]]

[[ Logo | Home | *Products* | About | Contact ]]

Rendered:

Breadcrumbs

[[ Home > Products > Electronics > Laptops ]]

Rendered:

📦 Containers

Container Syntax

::: container-type
Content goes here
:::

Card Container

::: card
### Card Title
Card content with any components.

[Card Action]
:::

Rendered:

Hero Section

::: hero
# Welcome Hero Title
Compelling hero description text.

[Primary CTA]* [Secondary CTA]
:::

Rendered:

Alert Types

::: alert success
✅ **Success!** Operation completed successfully.
:::

::: alert info
ℹ️ **Info:** Here's some useful information.
:::

::: alert warning
⚠️ **Warning:** Please review before proceeding.
:::

::: alert error
❌ **Error:** Something went wrong. Please try again.
:::

Rendered:

Modal Dialog

::: modal
### Confirm Delete
Are you sure you want to delete this item?

[Delete]* [Cancel]
:::

Rendered:

Sidebar

::: sidebar
#### Navigation
- Dashboard
- Profile
- Settings
- Logout
:::

Rendered:

Footer

::: footer
[[ Privacy | Terms | Contact ]]
© 2025 Company. All rights reserved.
:::

Rendered:

🏗️ Grid Layouts

Grid Syntax

## Title {.grid-N}  # Where N is number of columns
### Column 1 content
### Column 2 content

2-Column Grid

## Pricing {.grid-2}

### Free Plan
- 10 GB Storage
- Basic Support
- 5 Users

[Choose Free]

### Pro Plan
- Unlimited Storage
- Priority Support
- Unlimited Users

[Choose Pro]*

Rendered:

3-Column Grid

## Features {.grid-3}

### :rocket: Fast
Lightning quick performance

### :shield: Secure
Bank-level security

### :gear: Flexible
Fully customizable

Rendered:

4-Column Grid

## Stats {.grid-4}

### Users
10,000+

### Projects
500+

### Countries
50+

### Uptime
99.9%

Rendered:

📊 Tables

Basic Table

| Column 1 | Column 2 | Column 3 |
|----------|----------|----------|
| Cell 1-1 | Cell 1-2 | Cell 1-3 |
| Cell 2-1 | Cell 2-2 | Cell 2-3 |
| Cell 3-1 | Cell 3-2 | Cell 3-3 |

Rendered:

With Alignment

| Left | Center | Right |
|:-----|:------:|------:|
| Left | Center | Right |
| Text | Text   | Text  |

Rendered:

🎨 Icons

Icon Syntax

:icon-name:       # In text
:icon{name}       # With attributes

Common Icons

:home: Home
:user: User
:settings: Settings
:star: Star
:heart: Heart
:search: Search

Rendered:

Icons in Headings

### :rocket: Launch Features
#### :bulb: Bright Ideas

Rendered:

🚀 Launch Features

💡 Bright Ideas

🎯 Component States

Loading State

::: loading-state
Loading your content...
:::

Rendered:

Empty State

::: empty-state
No items found
[Add First Item]
:::

Rendered:

Error State

::: error-state
Unable to load data
[Retry]
:::

Rendered:

🎛️ Interactive Components

Tabs (Syntax Example - Not Yet Implemented)

::: tabs
::: tab "Overview" active
Overview content here
:::
::: tab "Details"
Details content here
:::
::: tab "Settings"
Settings content here
:::
:::

Accordion (Syntax Example - Not Yet Implemented)

::: accordion
::: accordion-item "Section 1" expanded
First section content
:::
::: accordion-item "Section 2"
Second section content
:::
:::

✅ Common Patterns & Best Practices

Complete Form Example

Dashboard Layout

Analytics Dashboard

Recent Activity

🚀 Complete Page Example

Project Management Dashboard

Active Projects

Manage your team's projects efficiently Track progress, assign tasks, collaborate

New Project Import Export

Current Sprint

This Week's Tasks

Page Footer

This showcase serves as a complete syntax reference for wiremd. Copy and modify these examples to create your own wireframes quickly!