Skip to main content
View as Markdown

Content Components

Content components render text and prose. They cover rich text and markdown, code blocks with syntax highlighting, collapsible accordions, styled callouts, blockquotes, an auto-generated table of contents, and the page-level search-input UI. All content components support variable substitution in their content ($record.*, $vars.*, key) and accept the shared props bag, plus visibility, responsive, and i18n modules.

app.yaml
components:
  - type: text
    element: h1
    content: Getting Started
  - type: text
    content: '$record.body'
    props: { format: markdown }
  - type: alert
    props: { variant: info, dismissible: true }
    content: 'Heads up — this is a callout.'

text

The primary content component. Renders inline text, a semantic element (heading, paragraph, blockquote), or full markdown. The same text type covers headings, paragraphs, and quotations via its element/props.

Property Description
content Text or markdown source (supports $record.*, $vars.*, key).
element Semantic element: h1–h6, p, span, label, pre, kbd, blockquote, code. Defaults to p.
props.format Set to markdown to render content as sanitized HTML (headings, bold, italic, links, images, nested lists).
required When element: label, appends a required-indicator (*) after the label text.
props Additional HTML attributes (e.g. className).

element: code renders a plain inline <code> element — it does not syntax-highlight. For a highlighted block with a language, line numbers, and a copy button, use the code type.

Markdown output is sanitized to prevent XSS (no <script> tags or event-handler attributes). Code blocks include a copy-to-clipboard button.

code

A standalone, syntax-highlighted code block. Unlike text with element: code — which renders a plain inline <code> — this type highlights the source, numbers the lines, and adds a copy button.

Property Description
content The code source.
props.language Language for syntax highlighting (e.g. ts, yaml, bash).
props.lineNumbers Display line numbers alongside the code.
props Additional HTML attributes.

Frames, output, and the copy button

A bare code block leaves the reader guessing: is this a file to save, or a command to run? These properties draw chrome around the block to answer that, and control what the copy button puts on the clipboard. They sit at the component top level, as siblings of props.

Property Description
codeFrame Chrome around the block: none (bare), file (filename header), or terminal (shell-session header). Inferred if omitted.
filename The file this snippet belongs in, shown in the header. Also becomes the block's accessible name.
terminalLabel Label for a terminal header (default terminal).
output What the command prints, rendered as a second block below the command inside the same frame.
copy Show the copy-to-clipboard button. Defaults to true.
copyLabel Label and accessible name of the copy button (default Copy).
copiedLabel Label shown briefly after a successful copy (default Copied).

The frame is resolved in this order, first match winning:

  1. an explicit codeFrame — including none, which suppresses chrome that would otherwise be inferred;
  2. else a filename is present, so the frame is file;
  3. else an output is present, so the frame is terminal (only a command has output);
  4. else none.

So the common cases need one property, not two:

app.yaml
components:
  # A file. `filename` alone gives you the file frame.
  - type: code
    props:
      language: yaml
    filename: hello-world.yaml
    content: |
      name: hello-world
      pages:
        - name: home
          path: /

  # A command and what it prints. `output` alone gives you the terminal frame.
  - type: code
    props:
      language: bash
    content: sovrium init hello-world
    output: |
      Created hello-world.yaml
      Run sovrium start hello-world.yaml to boot it.

The copy button copies the command only. The printed output and the filename header are both excluded, so pasting into a shell runs one command, and pasting a named config file yields valid config rather than config preceded by its own name. No prompt glyph is rendered inside the block for the same reason: a decorative $ would end up on the clipboard.

toc

Auto-generates a table of contents from the page's heading hierarchy. Clicking a link smooth-scrolls to the heading anchor; the active section is highlighted based on scroll position.

Property Description
props.sticky Set true to keep the TOC fixed to the viewport on scroll.
props Additional HTML attributes (e.g. className).

accordion

Collapsible content sections, each with a summary trigger and a detail panel.

Property Description
children Accordion items (each with a summary label and detail content).
props.mode single collapses other sections when one opens; multiple allows several open at once.
props.defaultOpen Set true to render a section expanded on page load.
props Additional HTML attributes.

blockquote

A styled quotation block (text with element: blockquote renders the same tag unstyled). Nested blockquotes render with increasing indentation.

Property Description
content The quoted text.
props.cite Citation source URL.
props Additional HTML attributes.

alert

A styled callout block for highlighting information.

Property Description
content The alert message (supports substitution).
props.variant Visual style: info, warning, error, or success — each auto-selects an appropriate icon and color.
props.dismissible Set true to render a close button that hides the alert.
props Additional HTML attributes.

searchInput

A page-level search-input control that drives client-side filtering of a bound list or table. (The full-text engine configuration — indexing, weights, public search — lives in the Search section; this is the UI building block.)

Property Description
props.placeholder Placeholder text shown in the search field.
props.debounceMs Debounce delay before the search fires (results update live after the delay).
props.minLength Minimum query length before searching (prevents empty/short searches).
dataSource Optional binding when the input filters a search-mode data source.

pageSearch

A page-scoped search experience composed of an input plus a results region, bound to a searchable table. Use for in-page filtering of records.

Property Description
dataSource Table binding in search mode (searchFields, debounce, maxResults).
props.placeholder Placeholder for the search field.
children Optional result-template components.

Last updated August 11, 2026

Edit this pageReport an issue

This documentation was written with AI, so errors or outdated content are possible. Sovrium is in beta. Contributions and corrections are welcome.

Built with Sovrium