WireTex syntax

Every component supported by the grammar, with copy-paste snippets. Authoritative source: lib/grammar.pegjs and lib/renderer.ts.

Try it in the sandbox →

Text and structure

Headings

Six levels of headings. Requires a space after the hash marks.

# H1
## H2
### H3
#### H4
##### H5
###### H6

Paragraph

A plain line of text becomes a paragraph.

Any line of plain text

Bold

Inline bold text inside a paragraph.

**bold text**

Italic

Inline italic text. Use a single asterisk, not double.

*italic text*

Horizontal rule

A dashed rule. Only works when *** is the entire line — not for password fields.

***

Inputs

Text input

Single-line text field. Underscores are required.

___

Email input

Email field. More @ symbols are allowed but ___ is required.

  • `@@@` alone is plain text, not an input.
@@@___

Password input

Password field.

  • `***` alone on a line is a horizontal rule, not a password field.
***___

Textarea

Multi-line text area. Each [___] line adds one row.

[___]
[___]
[___]

Button

Default button. Avoid ] in normal button labels.

[Save]

Horizontal nav list. Space after the opening [ of the outer wrapper. Hrefs are parsed but preview links are inert.

[ [Dashboard](/dash) [Reports](/reports) [Settings](/settings) ]

Path breadcrumb. Last segment is shown as the active page.

[/Home/Products/Detail]

Pagination

Page number pager with prev/next arrows.

[1,2,3,4]

Lists and choices

Checkbox group

Checkbox list. Space after the marker is required.

[x] Checked item
[] Unchecked item

Radio group

Radio button list. Space after the marker is required.

(x) Selected radio
() Unselected radio

Select menu. One option per line. A hyphen in the label marks the option disabled.

<[Choose one]>
<[Option A]>
<[Option B -disabled]>

Bullet list

Unordered list. One item per line.

- First item
- Second item
- Third item

Data display

Table

Pipe-delimited table rows. Leading * in a cell marks a header cell.

|*Header|*Header|
|Cell|Cell|
|Cell|Cell|

Progress bar

Horizontal progress indicator with percentage.

  • Spaces around the number are optional: `%68%`
% 68 %

Slider

Range slider at a fixed value.

  • Spaces around the number are optional: `~50~`
~ 50 ~

Loading

Wireframe placeholder for a spinner or loading state.

  • Also accepts `(...)`, `( … )`, and flexible spacing.
( ... )

Badge

Small label chip. Works standalone or inline in a text line.

{New}

Status {Pending review}

Tabs

Tab bar. Must contain | or it parses as a button.

[ Home | Settings | Billing ]

Layout blocks

Card

Bordered card with title and body. Body cannot start with ---.

  • Closing --- is optional when the next line is another block (e.g. ---- column divider or ---Next card---).
---Card title---
Body content
___
[Action]
---

Dialog box with optional footer buttons before the closing ===.

===Dialog title===
Body lines
===[>Confirm<][Cancel]===

Form fieldset

Grouped form section with legend.

!!!Section legend!!!
[x] Option
[>Save<]
!!!

Two-column layout

Side-by-side columns. Use ::: markers with ---- (four dashes) between columns. Cards can sit in either column; a closing --- is optional before the ---- divider.

:::
---Left card---
Content
----
---Right card---
More content
:::

Media

Image

Standalone or inline image. Use # for wireframe placeholders.

![Alt text](#)
![Photo](https://example.com/img.png)

Image group

Fixed-height row of equal-width image columns.

{
![One](#)
![Two](#)
![Three](#)
}

Code

Code block

Fenced multi-line code block with optional language tag.

```javascript
const x = 1;
console.log(x);
```

Preview only

Themes

Not markup — configured in the sandbox UI. CSS variables applied to the preview.

bg, surface, text, muted, border, accent, accentText, inputBg, codeBg, shadow