Reusable components

Declare a named component once at the root level and reference it in any page. The resolver replaces every reference with a deep copy of the declaration.

What is a declaration?

A declaration is a component defined at the root level of the document (outside any page block) with a short identifier:

wiremarkUI
  sidebar SD {
    nav "Dashboard" active, "Users", "Settings"
  }
  header H "My App"
  footer F { text "© 2025 Acme" }

The identifier (SD, H, F) is an uppercase or mixed-case string. It can be any non-keyword identifier.

Using a ref

Inside any page body, write the bare identifier to reference the declaration:

page "Dashboard" {
  H
  SD
  text "Main content here"
}

The resolver replaces the SD and H references with full copies of the declared components before rendering.

Supported component kinds

Any component kind can be declared and reused. The most common are:

• header — shared application bar
• sidebar — shared navigation panel
• navbar — shared top navigation
• footer — shared bottom strip

Live example

Three pages sharing a header and sidebar declaration, linked by a flow: