Tiramisu Docs

Content

Rich Content

Use callouts, steps, tabs, accordions, blockquotes, badges, and task lists in your docs.

Built-in components for interactive and highlighted content.

Callouts

Highlight important information with callouts:

tiramisu
callout { type = info, This is an informational callout. }

Four types are available:

Preview

Steps

Numbered instructions:

tiramisu
steps {
  Install the package:
  codeblock { language = bash, npm i -S the-package },

  Configure your project:
  codeblock { language = bash, npx the-package --configure },
  
  Start the dev server:
  codeblock { language = bash, npm run dev}
}
Preview
  1. Install the package:
    bash
    npm i -S the-package
  2. Configure your project:
    bash
    npx the-package --configure
  3. Start the dev server:
    bash
    npm run dev

Tabs

Tabbed content sections with optional group-based persistence:

tiramisu
tabs { group = platforms,
  tab { label = macOS, icon = uim:apple, Instructions for macOS. },
  tab { label = Linux, icon = uim:linux, Instructions for Linux. },
  tab { label = Windows, icon = uim:windows, Instructions for Windows. }
}
Preview
Instructions for macOS.

When multiple tabs blocks share the same group value, selecting a tab in one automatically syncs the selection across all of them. The choice is persisted in localStorage.

Accordion

Collapsible content:

tiramisu
accordion { title = Click to expand, Hidden content goes here. }
Preview

Blockquotes

tiramisu
quote { The best documentation is the documentation that exists., author = Unknown }
Preview
The best documentation is the documentation that exists.
— Unknown

Badges

Inline status indicators:

tiramisu
badge { Stable }
badge { variant = secondary, Beta }
badge { variant = destructive, Deprecated }
badge { variant = outline, v2.0 }
Preview
Stable Beta Deprecated v2.0

Task Lists

tiramisu
tasklist {
  "[x] Write documentation",
  "[x] Add examples",
  "[ ] Review and publish"
}
Preview
  • Write documentation
  • Add examples
  • Review and publish