Getting Started

This guide takes you from zero to a complete wireframe in 5 minutes. Every code block below is interactive — edit directly or try examples in the playground.

Your First Element

Let's start with a single button:

That's it. Parentheses, element type, content string. Elements that display text follow this pattern.

Add a flag to change its style:

Flags are keywords that modify behavior. :primary makes the button stand out.

Grouping Elements

Use box to group elements together. By default, elements stack vertically:

Add :gap to control spacing:

Use :high and :low to control text emphasis:

Try :row for horizontal layout:

You can use :col to be explicit about vertical layout, but it's optional since that's the default.

Adding Inputs

Use input for form fields. The :type property controls the input style:

Building a Card

Now combine everything into a card:

Notice the pattern:

• card is a styled container with border and shadow
• :padding 20 adds space inside
• :full makes the button span full width

Adding a Screen

Wrap your UI in a screen inside a wire document:

The screen has:

• ID (signup) — for navigation
• Name ("Sign Up") — display title
• Viewport (:desktop) — size hint

Adding a Modal

Use modal to create overlays. Reference them with #id:

The pattern:

• modal lives inside the screen, after the main content
• :id "forgot" gives the modal a name
• :to #forgot opens it (note the # prefix)
• :to :close closes the current overlay

Multiple Screens & Navigation

Create a flow between screens using :to:

Complete Example

Let's combine everything into a polished auth flow with multiple screens and a modal:

Syntax Summary

Every element follows this pattern:

(element-type "content" :flags :property value children)

Common Flags

What's Next?