---
title: "Comark Components"
description: "Every Basic Memory Comark component, with its Markdown source, how it renders, every attribute it accepts, and a link to try it in the playground."
canonical_url: "https://docs.basicmemory.com/cloud/comark-components"
---
# Comark Components

> Every Basic Memory Comark component, with its Markdown source, how it renders, every attribute it accepts, and a link to try it in the playground.

Basic Memory Cloud renders these components in Notes, the [Wiki](https://docs.basicmemory.com/cloud/wiki), and [shared notes](https://docs.basicmemory.com/cloud/shared-notes). Each one is written as Markdown: a `::bm-` directive with attributes in braces, a body, and a closing `::`. Everywhere else, in a local editor, on GitHub, or in a raw `bm_read`, the same note reads as plain Markdown, so your AI writes and reads these as text.

Each example below shows its source, how it renders, and every attribute it accepts. **Open in playground** loads it in the [Comark playground](https://app.basicmemory.com/playground), where you can edit the source and switch between the rendered view and the plain text an agent reads. See [Live Notes](https://docs.basicmemory.com/cloud/live-notes) for how components and live views fit into a note.

<tip>

Your AI can learn every component and its attributes from the `memory-comark` [agent skill](https://docs.basicmemory.com/integrations/skills), or from the `comark(7)` manual page (`bm man comark`, or `memory://man/comark(7)` over MCP).

</tip>

---

## Content and layout

### Frame

`bm-frame`: A framed claim or section with an optional theme-derived visual.

```markdown
::bm-frame{title="Release 1.0" description="One Markdown source for Notes, Wiki, and export." variant="emphasized" visual="dither-mesh"}
## Ready for the final mile

The release is healthy, the migration is ahead of plan, and two decisions remain.
::
```

<theme-image alt="The bm-frame example rendered" dark="/screenshots/comark/comark-bm-frame-dark.png" light="/screenshots/comark/comark-bm-frame-light.png">



</theme-image>

[Open in playground ↗](https://app.basicmemory.com/playground?example=bm-frame)

#### Frame attributes

**Body:** Any Markdown.

<table>
<thead>
  <tr>
    <th>
      Attribute
    </th>
    
    <th>
      Accepts
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        title
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      Label drawn in the frame header.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        description
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      Lead line under the title.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        variant
      </code>
    </td>
    
    <td>
      <code>
        default
      </code>
      
      , <code>
        subtle
      </code>
      
      , <code>
        emphasized
      </code>
    </td>
    
    <td>
      <code>
        default
      </code>
    </td>
    
    <td>
      Frame weight.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        density
      </code>
    </td>
    
    <td>
      <code>
        comfortable
      </code>
      
      , <code>
        compact
      </code>
    </td>
    
    <td>
      <code>
        comfortable
      </code>
    </td>
    
    <td>
      Spacing inside the frame.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        visual
      </code>
    </td>
    
    <td>
      <code>
        none
      </code>
      
      , <code>
        dither
      </code>
      
      , <code>
        dither-mesh
      </code>
      
      , <code>
        dither-scan
      </code>
    </td>
    
    <td>
      <code>
        none
      </code>
    </td>
    
    <td>
      Static, theme-derived pattern behind the frame.
    </td>
  </tr>
</tbody>
</table>

### ASCII

`bm-ascii`: A local image redrawn as a character field, with bounded motion.

```markdown
::bm-ascii{title="Geometric wave" preset="paper" detail="high" contrast="edge" polarity="dark" motion="wave"}
![Layered dark blue waves curling around a pale circular moon](/playground/media/ascii-wave.svg)
::
```

<theme-image alt="The bm-ascii example rendered" dark="/screenshots/comark/comark-bm-ascii-dark.png" light="/screenshots/comark/comark-bm-ascii-light.png">



</theme-image>

[Open in playground ↗](https://app.basicmemory.com/playground?example=bm-ascii)

#### ASCII attributes

**Body:** One Markdown image of a project file, with alt text. `rain` and `glitch` need no image.

<table>
<thead>
  <tr>
    <th>
      Attribute
    </th>
    
    <th>
      Accepts
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        title
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      Label drawn in the frame header.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        caption
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      Short line under the figure that says what it shows.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        preset
      </code>
    </td>
    
    <td>
      <code>
        crisp
      </code>
      
      , <code>
        paper
      </code>
    </td>
    
    <td>
      <code>
        crisp
      </code>
    </td>
    
    <td>
      Character set and texture.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        detail
      </code>
    </td>
    
    <td>
      <code>
        low
      </code>
      
      , <code>
        medium
      </code>
      
      , <code>
        high
      </code>
    </td>
    
    <td>
      <code>
        medium
      </code>
    </td>
    
    <td>
      How many characters sample the image.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        contrast
      </code>
    </td>
    
    <td>
      <code>
        soft
      </code>
      
      , <code>
        edge
      </code>
    </td>
    
    <td>
      <code>
        edge
      </code>
    </td>
    
    <td>
      Soft tones or hard edges.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        polarity
      </code>
    </td>
    
    <td>
      <code>
        dark
      </code>
      
      , <code>
        light
      </code>
    </td>
    
    <td>
      <code>
        dark
      </code>
    </td>
    
    <td>
      Whether dark or light areas of the image draw characters.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        motion
      </code>
    </td>
    
    <td>
      <code>
        none
      </code>
      
      , <code>
        drift
      </code>
      
      , <code>
        pulse
      </code>
      
      , <code>
        wave
      </code>
      
      , <code>
        rain
      </code>
      
      , <code>
        glitch
      </code>
    </td>
    
    <td>
      <code>
        none
      </code>
    </td>
    
    <td>
      Bounded animation. Motion stops when the viewer asks for reduced motion.
    </td>
  </tr>
</tbody>
</table>

### Image

`bm-image`: A local image as a theme-colored halftone or ordered dither.

```markdown
::bm-image{title="Halftone wave" effect="halftone" detail="high" palette="duo" motion="pulse"}
![Layered dark blue waves curling around a pale circular moon](/playground/media/ascii-wave.svg)
::
```

<theme-image alt="The bm-image example rendered" dark="/screenshots/comark/comark-bm-image-dark.png" light="/screenshots/comark/comark-bm-image-light.png">



</theme-image>

[Open in playground ↗](https://app.basicmemory.com/playground?example=bm-image)

#### Image attributes

**Body:** One Markdown image of a project file, with alt text.

<table>
<thead>
  <tr>
    <th>
      Attribute
    </th>
    
    <th>
      Accepts
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        title
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      Label drawn in the frame header.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        caption
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      Short line under the figure that says what it shows.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        effect
      </code>
    </td>
    
    <td>
      <code>
        dither
      </code>
      
      , <code>
        halftone
      </code>
    </td>
    
    <td>
      <code>
        dither
      </code>
    </td>
    
    <td>
      How the image is redrawn.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        detail
      </code>
    </td>
    
    <td>
      <code>
        low
      </code>
      
      , <code>
        medium
      </code>
      
      , <code>
        high
      </code>
    </td>
    
    <td>
      <code>
        medium
      </code>
    </td>
    
    <td>
      Size of the dither or halftone cells.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        palette
      </code>
    </td>
    
    <td>
      <code>
        mono
      </code>
      
      , <code>
        duo
      </code>
    </td>
    
    <td>
      <code>
        duo
      </code>
    </td>
    
    <td>
      One ink or two.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        motion
      </code>
    </td>
    
    <td>
      <code>
        none
      </code>
      
      , <code>
        drift
      </code>
      
      , <code>
        pulse
      </code>
    </td>
    
    <td>
      <code>
        none
      </code>
    </td>
    
    <td>
      Bounded animation. Motion stops when the viewer asks for reduced motion.
    </td>
  </tr>
</tbody>
</table>

### SVG

`bm-svg`: A local SVG with an optional presentation-only motion.

```markdown
::bm-svg{title="Gentle float" fit="contain" motion="float"}
![Layered dark blue waves curling around a pale circular moon](/playground/media/ascii-wave.svg)
::
```

<theme-image alt="The bm-svg example rendered" dark="/screenshots/comark/comark-bm-svg-dark.png" light="/screenshots/comark/comark-bm-svg-light.png">



</theme-image>

[Open in playground ↗](https://app.basicmemory.com/playground?example=bm-svg)

#### SVG attributes

**Body:** One Markdown image of a project `.svg` file, with alt text.

<table>
<thead>
  <tr>
    <th>
      Attribute
    </th>
    
    <th>
      Accepts
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        title
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      Label drawn in the frame header.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        fit
      </code>
    </td>
    
    <td>
      <code>
        contain
      </code>
      
      , <code>
        cover
      </code>
    </td>
    
    <td>
      <code>
        contain
      </code>
    </td>
    
    <td>
      Scale the SVG to fit inside the frame or to fill it.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        motion
      </code>
    </td>
    
    <td>
      <code>
        none
      </code>
      
      , <code>
        drift
      </code>
      
      , <code>
        pulse
      </code>
      
      , <code>
        float
      </code>
      
      , <code>
        reveal
      </code>
    </td>
    
    <td>
      <code>
        none
      </code>
    </td>
    
    <td>
      Bounded animation. Use <code>
        none
      </code>
      
       for an SVG that animates itself.
    </td>
  </tr>
</tbody>
</table>

### Stat

`bm-stat`: One plain metric with a short detail and tone.

```markdown
::bm-stat{label="Wiki pages" value="128" detail="Current projection" tone="positive"}
Counted from the canonical project.
::
```

<theme-image alt="The bm-stat example rendered" dark="/screenshots/comark/comark-bm-stat-dark.png" light="/screenshots/comark/comark-bm-stat-light.png">



</theme-image>

[Open in playground ↗](https://app.basicmemory.com/playground?example=bm-stat)

#### Stat attributes

<table>
<thead>
  <tr>
    <th>
      Attribute
    </th>
    
    <th>
      Accepts
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        label
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      What the number counts. <strong>
        Required unless it's a live view.
      </strong>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        value
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      The number as shown, with its unit. <strong>
        Required unless it's a live view.
      </strong>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        detail
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      Supporting line under the value.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        tone
      </code>
    </td>
    
    <td>
      <code>
        neutral
      </code>
      
      , <code>
        positive
      </code>
      
      , <code>
        warning
      </code>
      
      , <code>
        critical
      </code>
    </td>
    
    <td>
      <code>
        neutral
      </code>
    </td>
    
    <td>
      Status color.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        query
      </code>
    </td>
    
    <td>
      Pipeline: a source (<code>
        notes
      </code>
      
      , <code>
        search 'phrase'
      </code>
      
      , <code>
        activity 7d|30d
      </code>
      
      ), then <code>
        where
      </code>
      
      , <code>
        group
      </code>
      
      , <code>
        count
      </code>
      
      , <code>
        sum
      </code>
      
      , <code>
        fields
      </code>
      
      , <code>
        daily
      </code>
      
      , <code>
        sort
      </code>
      
      , <code>
        limit
      </code>
    </td>
    
    <td>
      
    </td>
    
    <td>
      Live pipeline that supplies the rows when the note is viewed, such as <code>
        notes | where type == decision | group owner
      </code>
      
      . The body keeps the last frozen snapshot.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        operation
      </code>
    </td>
    
    <td>
      Registered operation name
    </td>
    
    <td>
      
    </td>
    
    <td>
      <em>
        Legacy.
      </em>
      
       Names a v1 live operation such as <code>
        bm.search.metadata
      </code>
      
      . Write new live views with <code>
        query
      </code>
      
       instead.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        version
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      
    </td>
    
    <td>
      <em>
        Legacy.
      </em>
      
       Contract version of the v1 operation. Only <code>
        1
      </code>
      
       exists.
    </td>
  </tr>
</tbody>
</table>

### KPI

`bm-kpi`: One headline metric with its trend.

```markdown
::bm-kpi{title="Accounts migrated" value="1.2M" label="of 1.8M rows" hint="67% complete" data="120,180,210,320,440,480,590,640,760,810,940,1200" palette="duo"}
::
```

<theme-image alt="The bm-kpi example rendered" dark="/screenshots/comark/comark-bm-kpi-dark.png" light="/screenshots/comark/comark-bm-kpi-light.png">



</theme-image>

[Open in playground ↗](https://app.basicmemory.com/playground?example=bm-kpi)

#### KPI attributes

<table>
<thead>
  <tr>
    <th>
      Attribute
    </th>
    
    <th>
      Accepts
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        title
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      Label drawn in the frame header.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        value
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      The headline number as shown. <strong>
        Required unless it's a live view.
      </strong>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        label
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      What the number measures. <strong>
        Required unless it's a live view.
      </strong>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        hint
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      Short context after the label, such as a percent complete.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        data
      </code>
    </td>
    
    <td>
      2 to 48 numbers separated by commas or spaces
    </td>
    
    <td>
      
    </td>
    
    <td>
      The trend under the number. <strong>
        Required unless it's a live view.
      </strong>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        glyphs
      </code>
    </td>
    
    <td>
      <code>
        bar
      </code>
      
      , <code>
        shade
      </code>
      
      , <code>
        ascii
      </code>
      
      , <code>
        hash
      </code>
    </td>
    
    <td>
      <code>
        bar
      </code>
    </td>
    
    <td>
      Characters used to draw the trend.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        palette
      </code>
    </td>
    
    <td>
      <code>
        mono
      </code>
      
      , <code>
        duo
      </code>
      
      , <code>
        multi
      </code>
    </td>
    
    <td>
      <code>
        mono
      </code>
    </td>
    
    <td>
      Color treatment: one ink, two inks, or several.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        query
      </code>
    </td>
    
    <td>
      Pipeline: a source (<code>
        notes
      </code>
      
      , <code>
        search 'phrase'
      </code>
      
      , <code>
        activity 7d|30d
      </code>
      
      ), then <code>
        where
      </code>
      
      , <code>
        group
      </code>
      
      , <code>
        count
      </code>
      
      , <code>
        sum
      </code>
      
      , <code>
        fields
      </code>
      
      , <code>
        daily
      </code>
      
      , <code>
        sort
      </code>
      
      , <code>
        limit
      </code>
    </td>
    
    <td>
      
    </td>
    
    <td>
      Live pipeline that supplies the rows when the note is viewed, such as <code>
        notes | where type == decision | group owner
      </code>
      
      . The body keeps the last frozen snapshot.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        operation
      </code>
    </td>
    
    <td>
      Registered operation name
    </td>
    
    <td>
      
    </td>
    
    <td>
      <em>
        Legacy.
      </em>
      
       Names a v1 live operation such as <code>
        bm.search.metadata
      </code>
      
      . Write new live views with <code>
        query
      </code>
      
       instead.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        version
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      
    </td>
    
    <td>
      <em>
        Legacy.
      </em>
      
       Contract version of the v1 operation. Only <code>
        1
      </code>
      
       exists.
    </td>
  </tr>
</tbody>
</table>

### Table

`bm-table`: A small data table authored as a Markdown table.

```markdown
::bm-table{title="Release readiness" caption="Current project state" density="compact"}
| Area | State | Owner |
| --- | --- | --- |
| Wiki | Ready | Product |
| Graph | Ready | Platform |
| Export | Review | Runtime |
::
```

<theme-image alt="The bm-table example rendered" dark="/screenshots/comark/comark-bm-table-dark.png" light="/screenshots/comark/comark-bm-table-light.png">



</theme-image>

[Open in playground ↗](https://app.basicmemory.com/playground?example=bm-table)

#### Table attributes

**Body:** A Markdown table. `---:` right-aligns a column; a bold last row reads as a total.

<table>
<thead>
  <tr>
    <th>
      Attribute
    </th>
    
    <th>
      Accepts
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        title
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      Label drawn in the frame header.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        caption
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      Short line under the figure that says what it shows.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        density
      </code>
    </td>
    
    <td>
      <code>
        comfortable
      </code>
      
      , <code>
        compact
      </code>
    </td>
    
    <td>
      <code>
        comfortable
      </code>
    </td>
    
    <td>
      Spacing inside the frame.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        query
      </code>
    </td>
    
    <td>
      Pipeline: a source (<code>
        notes
      </code>
      
      , <code>
        search 'phrase'
      </code>
      
      , <code>
        activity 7d|30d
      </code>
      
      ), then <code>
        where
      </code>
      
      , <code>
        group
      </code>
      
      , <code>
        count
      </code>
      
      , <code>
        sum
      </code>
      
      , <code>
        fields
      </code>
      
      , <code>
        daily
      </code>
      
      , <code>
        sort
      </code>
      
      , <code>
        limit
      </code>
    </td>
    
    <td>
      
    </td>
    
    <td>
      Live pipeline that supplies the rows when the note is viewed, such as <code>
        notes | where type == decision | group owner
      </code>
      
      . The body keeps the last frozen snapshot.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        operation
      </code>
    </td>
    
    <td>
      Registered operation name
    </td>
    
    <td>
      
    </td>
    
    <td>
      <em>
        Legacy.
      </em>
      
       Names a v1 live operation such as <code>
        bm.search.metadata
      </code>
      
      . Write new live views with <code>
        query
      </code>
      
       instead.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        version
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      
    </td>
    
    <td>
      <em>
        Legacy.
      </em>
      
       Contract version of the v1 operation. Only <code>
        1
      </code>
      
       exists.
    </td>
  </tr>
</tbody>
</table>

### Timeline

`bm-timeline`: Events in order; bold is now, italic is next.

```markdown
::bm-timeline{title="Launch"}
1. 2026-09-01 — RFC accepted
2. **2026-09-20 — Beta**
3. *2026-10-15 — General availability*
::
```

<theme-image alt="The bm-timeline example rendered" dark="/screenshots/comark/comark-bm-timeline-dark.png" light="/screenshots/comark/comark-bm-timeline-light.png">



</theme-image>

[Open in playground ↗](https://app.basicmemory.com/playground?example=bm-timeline)

#### Timeline attributes

**Body:** An ordered list of `date — event`. A bold item is the current event, an italic one is upcoming.

<table>
<thead>
  <tr>
    <th>
      Attribute
    </th>
    
    <th>
      Accepts
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        title
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      Label drawn in the frame header.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        density
      </code>
    </td>
    
    <td>
      <code>
        comfortable
      </code>
      
      , <code>
        compact
      </code>
    </td>
    
    <td>
      <code>
        comfortable
      </code>
    </td>
    
    <td>
      Spacing inside the frame.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        query
      </code>
    </td>
    
    <td>
      Pipeline: a source (<code>
        notes
      </code>
      
      , <code>
        search 'phrase'
      </code>
      
      , <code>
        activity 7d|30d
      </code>
      
      ), then <code>
        where
      </code>
      
      , <code>
        group
      </code>
      
      , <code>
        count
      </code>
      
      , <code>
        sum
      </code>
      
      , <code>
        fields
      </code>
      
      , <code>
        daily
      </code>
      
      , <code>
        sort
      </code>
      
      , <code>
        limit
      </code>
    </td>
    
    <td>
      
    </td>
    
    <td>
      Live pipeline that supplies the rows when the note is viewed, such as <code>
        notes | where type == decision | group owner
      </code>
      
      . The body keeps the last frozen snapshot.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        operation
      </code>
    </td>
    
    <td>
      Registered operation name
    </td>
    
    <td>
      
    </td>
    
    <td>
      <em>
        Legacy.
      </em>
      
       Names a v1 live operation such as <code>
        bm.search.metadata
      </code>
      
      . Write new live views with <code>
        query
      </code>
      
       instead.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        version
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      
    </td>
    
    <td>
      <em>
        Legacy.
      </em>
      
       Contract version of the v1 operation. Only <code>
        1
      </code>
      
       exists.
    </td>
  </tr>
</tbody>
</table>

### Tree

`bm-tree`: Nested files or concepts from an ordinary nested list.

```markdown
::bm-tree{title="Project"}
- index.md
- log.md
- docs
  - architecture.md
  - decisions
    - renderer.md
::
```

<theme-image alt="The bm-tree example rendered" dark="/screenshots/comark/comark-bm-tree-dark.png" light="/screenshots/comark/comark-bm-tree-light.png">



</theme-image>

[Open in playground ↗](https://app.basicmemory.com/playground?example=bm-tree)

#### Tree attributes

**Body:** A nested Markdown list.

<table>
<thead>
  <tr>
    <th>
      Attribute
    </th>
    
    <th>
      Accepts
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        title
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      Label drawn in the frame header.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        density
      </code>
    </td>
    
    <td>
      <code>
        comfortable
      </code>
      
      , <code>
        compact
      </code>
    </td>
    
    <td>
      <code>
        comfortable
      </code>
    </td>
    
    <td>
      Spacing inside the frame.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        operation
      </code>
    </td>
    
    <td>
      Registered operation name
    </td>
    
    <td>
      
    </td>
    
    <td>
      <em>
        Legacy.
      </em>
      
       Names a v1 live operation such as <code>
        bm.search.metadata
      </code>
      
      . Write new live views with <code>
        query
      </code>
      
       instead.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        version
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      
    </td>
    
    <td>
      <em>
        Legacy.
      </em>
      
       Contract version of the v1 operation. Only <code>
        1
      </code>
      
       exists.
    </td>
  </tr>
</tbody>
</table>

### Spec

`bm-spec`: A label and value contract.

```markdown
::bm-spec{title="Revenue per Customer"}
- Type: Metric
- Owner: growth-data
- Window: Last 90 days
- Source: Canonical Markdown
::
```

<theme-image alt="The bm-spec example rendered" dark="/screenshots/comark/comark-bm-spec-dark.png" light="/screenshots/comark/comark-bm-spec-light.png">



</theme-image>

[Open in playground ↗](https://app.basicmemory.com/playground?example=bm-spec)

#### Spec attributes

**Body:** `- Label: value` rows, or a two-column table.

<table>
<thead>
  <tr>
    <th>
      Attribute
    </th>
    
    <th>
      Accepts
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        title
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      Label drawn in the frame header.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        operation
      </code>
    </td>
    
    <td>
      Registered operation name
    </td>
    
    <td>
      
    </td>
    
    <td>
      <em>
        Legacy.
      </em>
      
       Names a v1 live operation such as <code>
        bm.search.metadata
      </code>
      
      . Write new live views with <code>
        query
      </code>
      
       instead.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        version
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      
    </td>
    
    <td>
      <em>
        Legacy.
      </em>
      
       Contract version of the v1 operation. Only <code>
        1
      </code>
      
       exists.
    </td>
  </tr>
</tbody>
</table>

### Compare

`bm-compare`: A feature comparison; yes and no become marks.

```markdown
::bm-compare{title="Plans" accent="Studio"}
| Feature | Solo | Studio |
| --- | --- | --- |
| Registry | yes | yes |
| Private source | no | yes |
| Shared workspaces | no | yes |
::
```

<theme-image alt="The bm-compare example rendered" dark="/screenshots/comark/comark-bm-compare-dark.png" light="/screenshots/comark/comark-bm-compare-light.png">



</theme-image>

[Open in playground ↗](https://app.basicmemory.com/playground?example=bm-compare)

#### Compare attributes

**Body:** A Markdown table. A cell of `yes` or `no` draws as ✓ or –.

<table>
<thead>
  <tr>
    <th>
      Attribute
    </th>
    
    <th>
      Accepts
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        title
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      Label drawn in the frame header.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        accent
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      Header of the column to highlight.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        operation
      </code>
    </td>
    
    <td>
      Registered operation name
    </td>
    
    <td>
      
    </td>
    
    <td>
      <em>
        Legacy.
      </em>
      
       Names a v1 live operation such as <code>
        bm.search.metadata
      </code>
      
      . Write new live views with <code>
        query
      </code>
      
       instead.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        version
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      
    </td>
    
    <td>
      <em>
        Legacy.
      </em>
      
       Contract version of the v1 operation. Only <code>
        1
      </code>
      
       exists.
    </td>
  </tr>
</tbody>
</table>

### Diff

`bm-diff`: A compact change summary, or a unified patch.

```markdown
::bm-diff{title="Bundle" rows="keep|vendor|84 kb;add|app|31 kb;remove|sourcemaps|12 kb" footer="shipped|103 kb" palette="duo"}
::
```

<theme-image alt="The bm-diff example rendered" dark="/screenshots/comark/comark-bm-diff-dark.png" light="/screenshots/comark/comark-bm-diff-light.png">



</theme-image>

[Open in playground ↗](https://app.basicmemory.com/playground?example=bm-diff)

#### Diff attributes

**Body:** For `kind="unified"`, a fenced `diff` block.

<table>
<thead>
  <tr>
    <th>
      Attribute
    </th>
    
    <th>
      Accepts
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        title
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      Label drawn in the frame header.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        kind
      </code>
    </td>
    
    <td>
      <code>
        summary
      </code>
      
      , <code>
        unified
      </code>
    </td>
    
    <td>
      <code>
        summary
      </code>
    </td>
    
    <td>
      <code>
        summary
      </code>
      
       draws rows of added, removed and kept items; <code>
        unified
      </code>
      
       draws a patch.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        density
      </code>
    </td>
    
    <td>
      <code>
        comfortable
      </code>
      
      , <code>
        compact
      </code>
    </td>
    
    <td>
      <code>
        comfortable
      </code>
    </td>
    
    <td>
      Spacing inside the frame.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        rows
      </code>
    </td>
    
    <td>
      <code>
        add|label|value
      </code>
      
      , <code>
        remove|…
      </code>
      
       or <code>
        keep|…
      </code>
      
      , joined by <code>
        ;
      </code>
    </td>
    
    <td>
      
    </td>
    
    <td>
      Summary rows.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        footer
      </code>
    </td>
    
    <td>
      <code>
        label|value
      </code>
    </td>
    
    <td>
      
    </td>
    
    <td>
      Total line under the rows.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        palette
      </code>
    </td>
    
    <td>
      <code>
        mono
      </code>
      
      , <code>
        duo
      </code>
      
      , <code>
        multi
      </code>
    </td>
    
    <td>
      
    </td>
    
    <td>
      Color treatment: one ink, two inks, or several.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        operation
      </code>
    </td>
    
    <td>
      Registered operation name
    </td>
    
    <td>
      
    </td>
    
    <td>
      <em>
        Legacy.
      </em>
      
       Names a v1 live operation such as <code>
        bm.search.metadata
      </code>
      
      . Write new live views with <code>
        query
      </code>
      
       instead.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        version
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      
    </td>
    
    <td>
      <em>
        Legacy.
      </em>
      
       Contract version of the v1 operation. Only <code>
        1
      </code>
      
       exists.
    </td>
  </tr>
</tbody>
</table>

### Sheet

`bm-sheet`: A grouped document of headings and tables.

```markdown
::bm-sheet{title="RFC" density="compact"}
### Scope

| Item | Owner | Status |
| --- | --- | --- |
| CLI copies files | Priya | Done |
| Docs previews | Jon | Now |

### Out of scope

| Item | Owner | Status |
| --- | --- | --- |
| Figma kit | Unassigned | Later |
::
```

<theme-image alt="The bm-sheet example rendered" dark="/screenshots/comark/comark-bm-sheet-dark.png" light="/screenshots/comark/comark-bm-sheet-light.png">



</theme-image>

[Open in playground ↗](https://app.basicmemory.com/playground?example=bm-sheet)

#### Sheet attributes

**Body:** A Markdown table.

<table>
<thead>
  <tr>
    <th>
      Attribute
    </th>
    
    <th>
      Accepts
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        title
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      Label drawn in the frame header.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        density
      </code>
    </td>
    
    <td>
      <code>
        comfortable
      </code>
      
      , <code>
        compact
      </code>
    </td>
    
    <td>
      <code>
        comfortable
      </code>
    </td>
    
    <td>
      Spacing inside the frame.
    </td>
  </tr>
</tbody>
</table>

### Check

`bm-check`: A checklist of ordinary Markdown task items.

```markdown
::bm-check{title="Launch checklist" density="compact" palette="duo"}
- [x] Freeze the renderer contract
- [x] Verify strict Wiki export
- [ ] Approve the release notes
- [ ] Schedule the migration window
::
```

<theme-image alt="The bm-check example rendered" dark="/screenshots/comark/comark-bm-check-dark.png" light="/screenshots/comark/comark-bm-check-light.png">



</theme-image>

[Open in playground ↗](https://app.basicmemory.com/playground?example=bm-check)

#### Check attributes

**Body:** A Markdown task list (`- [ ]`, `- [x]`).

<table>
<thead>
  <tr>
    <th>
      Attribute
    </th>
    
    <th>
      Accepts
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        title
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      Label drawn in the frame header.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        density
      </code>
    </td>
    
    <td>
      <code>
        comfortable
      </code>
      
      , <code>
        compact
      </code>
    </td>
    
    <td>
      <code>
        comfortable
      </code>
    </td>
    
    <td>
      Spacing inside the frame.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        palette
      </code>
    </td>
    
    <td>
      <code>
        mono
      </code>
      
      , <code>
        duo
      </code>
      
      , <code>
        multi
      </code>
    </td>
    
    <td>
      
    </td>
    
    <td>
      Color treatment: one ink, two inks, or several.
    </td>
  </tr>
</tbody>
</table>

### Invoice

`bm-invoice`: Parties side by side over the line items.

```markdown
::bm-invoice{title="Invoice 0041" note="Net 30. Wire to the account on file." density="compact"}
### From

Northwind Design · Portland, OR

### Bill to

Acme Studio · 14 Market Street · San Francisco, CA

| Description | Qty | Rate | Amount |
| --- | ---: | ---: | ---: |
| Design system | 1 | 4,200 | 4,200 |
| Motion pass | 1 | 1,800 | 1,800 |
| **Amount due** |  |  | **6,000** |
::
```

<theme-image alt="The bm-invoice example rendered" dark="/screenshots/comark/comark-bm-invoice-dark.png" light="/screenshots/comark/comark-bm-invoice-light.png">



</theme-image>

[Open in playground ↗](https://app.basicmemory.com/playground?example=bm-invoice)

#### Invoice attributes

**Body:** Headings such as `### From` and `### Bill to`, then a line-items table. A bold last row is the amount due.

<table>
<thead>
  <tr>
    <th>
      Attribute
    </th>
    
    <th>
      Accepts
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        title
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      Label drawn in the frame header.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        note
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      Line under the invoice, such as payment terms.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        density
      </code>
    </td>
    
    <td>
      <code>
        comfortable
      </code>
      
      , <code>
        compact
      </code>
    </td>
    
    <td>
      <code>
        comfortable
      </code>
    </td>
    
    <td>
      Spacing inside the frame.
    </td>
  </tr>
</tbody>
</table>

### Kanban

`bm-kanban`: Headings are lanes; bold is now, italic is next.

```markdown
::bm-kanban{title="Roadmap"}
### Shipped
- Component playground
- Strict Wiki export

### Now
- **Live views for every chart**
- Docs examples — this week

### Later
- *Drag and drop* — if someone asks twice
::
```

<theme-image alt="The bm-kanban example rendered" dark="/screenshots/comark/comark-bm-kanban-dark.png" light="/screenshots/comark/comark-bm-kanban-light.png">



</theme-image>

[Open in playground ↗](https://app.basicmemory.com/playground?example=bm-kanban)

#### Kanban attributes

**Body:** One heading per lane with a list under it. A bold item is happening now, an italic one is next.

<table>
<thead>
  <tr>
    <th>
      Attribute
    </th>
    
    <th>
      Accepts
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        title
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      Label drawn in the frame header.
    </td>
  </tr>
</tbody>
</table>

### Card

`bm-card`: A framed summary with an ordinary Markdown body.

```markdown
::bm-card{title="Component guide" density="compact"}
Use **canonical Markdown** for the card body. Links, lists, and code all work.
::
```

<theme-image alt="The bm-card example rendered" dark="/screenshots/comark/comark-bm-card-dark.png" light="/screenshots/comark/comark-bm-card-light.png">



</theme-image>

[Open in playground ↗](https://app.basicmemory.com/playground?example=bm-card)

#### Card attributes

**Body:** Any Markdown.

<table>
<thead>
  <tr>
    <th>
      Attribute
    </th>
    
    <th>
      Accepts
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        title
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      Label drawn in the frame header.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        density
      </code>
    </td>
    
    <td>
      <code>
        comfortable
      </code>
      
      , <code>
        compact
      </code>
    </td>
    
    <td>
      <code>
        comfortable
      </code>
    </td>
    
    <td>
      Spacing inside the frame.
    </td>
  </tr>
</tbody>
</table>

### Card group

`bm-card-group`: A small group of linked resources or summaries.

```markdown
::bm-card-group{title="Resources" density="compact"}
::bm-card{title="Getting started" density="compact"}
Install Basic Memory and write your first note.
::

::bm-card{title="Components" density="compact"}
Every `::bm-*` directive with a live example.
::

::bm-card{title="MCP tools" density="compact"}
How agents read and write your knowledge base.
::
::
```

<theme-image alt="The bm-card-group example rendered" dark="/screenshots/comark/comark-bm-card-group-dark.png" light="/screenshots/comark/comark-bm-card-group-light.png">



</theme-image>

[Open in playground ↗](https://app.basicmemory.com/playground?example=bm-card-group)

#### Card group attributes

**Body:** `bm-card` blocks.

<table>
<thead>
  <tr>
    <th>
      Attribute
    </th>
    
    <th>
      Accepts
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        title
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      Label drawn in the frame header.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        density
      </code>
    </td>
    
    <td>
      <code>
        comfortable
      </code>
      
      , <code>
        compact
      </code>
    </td>
    
    <td>
      <code>
        comfortable
      </code>
    </td>
    
    <td>
      Spacing inside the frame.
    </td>
  </tr>
</tbody>
</table>

### Field

`bm-field`: One typed property with a Markdown description.

```markdown
::bm-field{name="title" type="string" required="true" density="compact"}
Human-readable note title. Shown in Notes, the Wiki, and search results.
::
```

<theme-image alt="The bm-field example rendered" dark="/screenshots/comark/comark-bm-field-dark.png" light="/screenshots/comark/comark-bm-field-light.png">



</theme-image>

[Open in playground ↗](https://app.basicmemory.com/playground?example=bm-field)

#### Field attributes

**Body:** The field description, as Markdown.

<table>
<thead>
  <tr>
    <th>
      Attribute
    </th>
    
    <th>
      Accepts
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        name
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      Field name. <strong>
        Required.
      </strong>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        type
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      Type label shown beside the name.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        required
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
      
      , <code>
        false
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Marks the field as required.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        density
      </code>
    </td>
    
    <td>
      <code>
        comfortable
      </code>
      
      , <code>
        compact
      </code>
    </td>
    
    <td>
      <code>
        comfortable
      </code>
    </td>
    
    <td>
      Spacing inside the frame.
    </td>
  </tr>
</tbody>
</table>

### Field group

`bm-field-group`: A typed property contract, such as a note schema.

```markdown
::bm-field-group{title="Frontmatter" density="compact"}
::bm-field{name="title" type="string" required="true" density="compact"}
Human-readable note title.
::

::bm-field{name="type" type="string" required="true" density="compact"}
Descriptive concept type, such as `decision` or `metric`.
::

::bm-field{name="tags" type="string[]" density="compact"}
Optional cross-cutting labels.
::
::
```

<theme-image alt="The bm-field-group example rendered" dark="/screenshots/comark/comark-bm-field-group-dark.png" light="/screenshots/comark/comark-bm-field-group-light.png">



</theme-image>

[Open in playground ↗](https://app.basicmemory.com/playground?example=bm-field-group)

#### Field group attributes

**Body:** `bm-field` blocks.

<table>
<thead>
  <tr>
    <th>
      Attribute
    </th>
    
    <th>
      Accepts
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        title
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      Label drawn in the frame header.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        density
      </code>
    </td>
    
    <td>
      <code>
        comfortable
      </code>
      
      , <code>
        compact
      </code>
    </td>
    
    <td>
      <code>
        comfortable
      </code>
    </td>
    
    <td>
      Spacing inside the frame.
    </td>
  </tr>
</tbody>
</table>

### Meter

`bm-meter`: One fill from zero to one.

```markdown
::bm-meter{title="Release confidence" value="0.87" ticks="14" caption="Automated and reviewed checks" tone="positive"}
::
```

<theme-image alt="The bm-meter example rendered" dark="/screenshots/comark/comark-bm-meter-dark.png" light="/screenshots/comark/comark-bm-meter-light.png">



</theme-image>

[Open in playground ↗](https://app.basicmemory.com/playground?example=bm-meter)

#### Meter attributes

<table>
<thead>
  <tr>
    <th>
      Attribute
    </th>
    
    <th>
      Accepts
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        title
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      Label drawn in the frame header.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        value
      </code>
    </td>
    
    <td>
      Number from 0 to 1
    </td>
    
    <td>
      
    </td>
    
    <td>
      How full the meter is. <strong>
        Required unless it's a live view.
      </strong>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        caption
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      Short line under the figure that says what it shows.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        ticks
      </code>
    </td>
    
    <td>
      Whole number from 4 to 40
    </td>
    
    <td>
      14
    </td>
    
    <td>
      Number of segments in the track.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        tone
      </code>
    </td>
    
    <td>
      <code>
        neutral
      </code>
      
      , <code>
        positive
      </code>
      
      , <code>
        warning
      </code>
      
      , <code>
        critical
      </code>
    </td>
    
    <td>
      <code>
        neutral
      </code>
    </td>
    
    <td>
      Status color.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        operation
      </code>
    </td>
    
    <td>
      Registered operation name
    </td>
    
    <td>
      
    </td>
    
    <td>
      <em>
        Legacy.
      </em>
      
       Names a v1 live operation such as <code>
        bm.search.metadata
      </code>
      
      . Write new live views with <code>
        query
      </code>
      
       instead.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        version
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      
    </td>
    
    <td>
      <em>
        Legacy.
      </em>
      
       Contract version of the v1 operation. Only <code>
        1
      </code>
      
       exists.
    </td>
  </tr>
</tbody>
</table>

### Spark

`bm-spark`: A compact trend without axes; the last point is the accent.

```markdown
::bm-spark{title="Read latency" data="210,190,230,180,165,174,142,158,128,139,118,112" caption="Last twelve deploys" palette="duo"}
::
```

<theme-image alt="The bm-spark example rendered" dark="/screenshots/comark/comark-bm-spark-dark.png" light="/screenshots/comark/comark-bm-spark-light.png">



</theme-image>

[Open in playground ↗](https://app.basicmemory.com/playground?example=bm-spark)

#### Spark attributes

<table>
<thead>
  <tr>
    <th>
      Attribute
    </th>
    
    <th>
      Accepts
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        title
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      Label drawn in the frame header.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        data
      </code>
    </td>
    
    <td>
      2 to 48 numbers separated by commas or spaces
    </td>
    
    <td>
      
    </td>
    
    <td>
      The values to draw. <strong>
        Required unless it's a live view.
      </strong>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        caption
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      Short line under the figure that says what it shows.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        glyphs
      </code>
    </td>
    
    <td>
      <code>
        bar
      </code>
      
      , <code>
        shade
      </code>
      
      , <code>
        ascii
      </code>
      
      , <code>
        hash
      </code>
    </td>
    
    <td>
      <code>
        bar
      </code>
    </td>
    
    <td>
      Characters used to draw the trend.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        palette
      </code>
    </td>
    
    <td>
      <code>
        mono
      </code>
      
      , <code>
        duo
      </code>
      
      , <code>
        multi
      </code>
    </td>
    
    <td>
      <code>
        mono
      </code>
    </td>
    
    <td>
      Color treatment: one ink, two inks, or several.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        query
      </code>
    </td>
    
    <td>
      Pipeline: a source (<code>
        notes
      </code>
      
      , <code>
        search 'phrase'
      </code>
      
      , <code>
        activity 7d|30d
      </code>
      
      ), then <code>
        where
      </code>
      
      , <code>
        group
      </code>
      
      , <code>
        count
      </code>
      
      , <code>
        sum
      </code>
      
      , <code>
        fields
      </code>
      
      , <code>
        daily
      </code>
      
      , <code>
        sort
      </code>
      
      , <code>
        limit
      </code>
    </td>
    
    <td>
      
    </td>
    
    <td>
      Live pipeline that supplies the rows when the note is viewed, such as <code>
        notes | where type == decision | group owner
      </code>
      
      . The body keeps the last frozen snapshot.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        operation
      </code>
    </td>
    
    <td>
      Registered operation name
    </td>
    
    <td>
      
    </td>
    
    <td>
      <em>
        Legacy.
      </em>
      
       Names a v1 live operation such as <code>
        bm.search.metadata
      </code>
      
      . Write new live views with <code>
        query
      </code>
      
       instead.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        version
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      
    </td>
    
    <td>
      <em>
        Legacy.
      </em>
      
       Contract version of the v1 operation. Only <code>
        1
      </code>
      
       exists.
    </td>
  </tr>
</tbody>
</table>

### Rank

`bm-rank`: A short ranked list.

```markdown
::bm-rank{title="Most linked"}
1. Pricing model — 14
2. Usage emails — 9
3. Partner portal — 4
::
```

<theme-image alt="The bm-rank example rendered" dark="/screenshots/comark/comark-bm-rank-dark.png" light="/screenshots/comark/comark-bm-rank-light.png">



</theme-image>

[Open in playground ↗](https://app.basicmemory.com/playground?example=bm-rank)

#### Rank attributes

**Body:** An ordered list of `name — value`.

<table>
<thead>
  <tr>
    <th>
      Attribute
    </th>
    
    <th>
      Accepts
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        title
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      Label drawn in the frame header.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        query
      </code>
    </td>
    
    <td>
      Pipeline: a source (<code>
        notes
      </code>
      
      , <code>
        search 'phrase'
      </code>
      
      , <code>
        activity 7d|30d
      </code>
      
      ), then <code>
        where
      </code>
      
      , <code>
        group
      </code>
      
      , <code>
        count
      </code>
      
      , <code>
        sum
      </code>
      
      , <code>
        fields
      </code>
      
      , <code>
        daily
      </code>
      
      , <code>
        sort
      </code>
      
      , <code>
        limit
      </code>
    </td>
    
    <td>
      
    </td>
    
    <td>
      Live pipeline that supplies the rows when the note is viewed, such as <code>
        notes | where type == decision | group owner
      </code>
      
      . The body keeps the last frozen snapshot.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        operation
      </code>
    </td>
    
    <td>
      Registered operation name
    </td>
    
    <td>
      
    </td>
    
    <td>
      <em>
        Legacy.
      </em>
      
       Names a v1 live operation such as <code>
        bm.search.metadata
      </code>
      
      . Write new live views with <code>
        query
      </code>
      
       instead.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        version
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      
    </td>
    
    <td>
      <em>
        Legacy.
      </em>
      
       Contract version of the v1 operation. Only <code>
        1
      </code>
      
       exists.
    </td>
  </tr>
</tbody>
</table>

---

## Charts

### Bars

`bm-bars`: A small histogram from label and value rows.

```markdown
::bm-bars{title="Throughput" caption="Before and after the queue rewrite"}
- Before: 42/s — cold cache
- **After: 96/s**
::
```

<theme-image alt="The bm-bars example rendered" dark="/screenshots/comark/comark-bm-bars-dark.png" light="/screenshots/comark/comark-bm-bars-light.png">



</theme-image>

[Open in playground ↗](https://app.basicmemory.com/playground?example=bm-bars)

#### Bars attributes

**Body:** `- label: value` rows. A bold row is the accent; `— note` adds a side note.

<table>
<thead>
  <tr>
    <th>
      Attribute
    </th>
    
    <th>
      Accepts
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        title
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      Label drawn in the frame header.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        data
      </code>
    </td>
    
    <td>
      <code>
        label:value[:display]
      </code>
      
       records joined by <code>
        ;
      </code>
      
      , or a YAML <code>
        items
      </code>
      
       list of <code>
        {label, value, display}
      </code>
    </td>
    
    <td>
      
    </td>
    
    <td>
      Legacy inline rows. Write rows in the body instead. <strong>
        Required unless the body has the data.
      </strong>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        caption
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      Short line under the figure that says what it shows.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        query
      </code>
    </td>
    
    <td>
      Pipeline: a source (<code>
        notes
      </code>
      
      , <code>
        search 'phrase'
      </code>
      
      , <code>
        activity 7d|30d
      </code>
      
      ), then <code>
        where
      </code>
      
      , <code>
        group
      </code>
      
      , <code>
        count
      </code>
      
      , <code>
        sum
      </code>
      
      , <code>
        fields
      </code>
      
      , <code>
        daily
      </code>
      
      , <code>
        sort
      </code>
      
      , <code>
        limit
      </code>
    </td>
    
    <td>
      
    </td>
    
    <td>
      Live pipeline that supplies the rows when the note is viewed, such as <code>
        notes | where type == decision | group owner
      </code>
      
      . The body keeps the last frozen snapshot.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        ticks
      </code>
    </td>
    
    <td>
      Whole number from 3 to 60
    </td>
    
    <td>
      
    </td>
    
    <td>
      <em>
        Legacy.
      </em>
      
       Accepted so older notes still validate. It does not change the chart.
    </td>
  </tr>
</tbody>
</table>

### Funnel

`bm-funnel`: Drop-off steps; bold marks the current stage.

```markdown
::bm-funnel{title="Install"}
- docs: 12,400
- **copy: 4,100**
- ship: 860
::
```

<theme-image alt="The bm-funnel example rendered" dark="/screenshots/comark/comark-bm-funnel-dark.png" light="/screenshots/comark/comark-bm-funnel-light.png">



</theme-image>

[Open in playground ↗](https://app.basicmemory.com/playground?example=bm-funnel)

#### Funnel attributes

**Body:** `- label: value` rows. A bold row is the accent; `— note` adds a side note. A bold row marks the current stage.

<table>
<thead>
  <tr>
    <th>
      Attribute
    </th>
    
    <th>
      Accepts
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        title
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      Label drawn in the frame header.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        data
      </code>
    </td>
    
    <td>
      <code>
        label:value[:display]
      </code>
      
       records joined by <code>
        ;
      </code>
      
      , or a YAML <code>
        items
      </code>
      
       list of <code>
        {label, value, display}
      </code>
    </td>
    
    <td>
      
    </td>
    
    <td>
      Legacy inline rows. Write rows in the body instead. <strong>
        Required unless the body has the data.
      </strong>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        caption
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      Short line under the figure that says what it shows.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        query
      </code>
    </td>
    
    <td>
      Pipeline: a source (<code>
        notes
      </code>
      
      , <code>
        search 'phrase'
      </code>
      
      , <code>
        activity 7d|30d
      </code>
      
      ), then <code>
        where
      </code>
      
      , <code>
        group
      </code>
      
      , <code>
        count
      </code>
      
      , <code>
        sum
      </code>
      
      , <code>
        fields
      </code>
      
      , <code>
        daily
      </code>
      
      , <code>
        sort
      </code>
      
      , <code>
        limit
      </code>
    </td>
    
    <td>
      
    </td>
    
    <td>
      Live pipeline that supplies the rows when the note is viewed, such as <code>
        notes | where type == decision | group owner
      </code>
      
      . The body keeps the last frozen snapshot.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        ticks
      </code>
    </td>
    
    <td>
      Whole number from 3 to 60
    </td>
    
    <td>
      
    </td>
    
    <td>
      <em>
        Legacy.
      </em>
      
       Accepted so older notes still validate. It does not change the chart.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        stage
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      <em>
        Legacy.
      </em>
      
       Label of the current stage. A bold body row does the same.
    </td>
  </tr>
</tbody>
</table>

### Stack

`bm-stack`: Parts of a whole.

```markdown
::bm-stack{title="Bundle"}
- js: 54kb
- css: 28kb
- assets: 18kb
::
```

<theme-image alt="The bm-stack example rendered" dark="/screenshots/comark/comark-bm-stack-dark.png" light="/screenshots/comark/comark-bm-stack-light.png">



</theme-image>

[Open in playground ↗](https://app.basicmemory.com/playground?example=bm-stack)

#### Stack attributes

**Body:** `- label: value` rows. A bold row is the accent; `— note` adds a side note.

<table>
<thead>
  <tr>
    <th>
      Attribute
    </th>
    
    <th>
      Accepts
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        title
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      Label drawn in the frame header.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        data
      </code>
    </td>
    
    <td>
      <code>
        label:value[:display]
      </code>
      
       records joined by <code>
        ;
      </code>
      
      , or a YAML <code>
        items
      </code>
      
       list of <code>
        {label, value, display}
      </code>
    </td>
    
    <td>
      
    </td>
    
    <td>
      Legacy inline rows. Write rows in the body instead. <strong>
        Required unless the body has the data.
      </strong>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        caption
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      Short line under the figure that says what it shows.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        query
      </code>
    </td>
    
    <td>
      Pipeline: a source (<code>
        notes
      </code>
      
      , <code>
        search 'phrase'
      </code>
      
      , <code>
        activity 7d|30d
      </code>
      
      ), then <code>
        where
      </code>
      
      , <code>
        group
      </code>
      
      , <code>
        count
      </code>
      
      , <code>
        sum
      </code>
      
      , <code>
        fields
      </code>
      
      , <code>
        daily
      </code>
      
      , <code>
        sort
      </code>
      
      , <code>
        limit
      </code>
    </td>
    
    <td>
      
    </td>
    
    <td>
      Live pipeline that supplies the rows when the note is viewed, such as <code>
        notes | where type == decision | group owner
      </code>
      
      . The body keeps the last frozen snapshot.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        ticks
      </code>
    </td>
    
    <td>
      Whole number from 3 to 60
    </td>
    
    <td>
      
    </td>
    
    <td>
      <em>
        Legacy.
      </em>
      
       Accepted so older notes still validate. It does not change the chart.
    </td>
  </tr>
</tbody>
</table>

### Waffle

`bm-waffle`: One share drawn as about one hundred cells.

```markdown
::bm-waffle{title="Tests"}
73% — tests green
::
```

<theme-image alt="The bm-waffle example rendered" dark="/screenshots/comark/comark-bm-waffle-dark.png" light="/screenshots/comark/comark-bm-waffle-light.png">



</theme-image>

[Open in playground ↗](https://app.basicmemory.com/playground?example=bm-waffle)

#### Waffle attributes

**Body:** A paragraph such as `73% — tests green`.

<table>
<thead>
  <tr>
    <th>
      Attribute
    </th>
    
    <th>
      Accepts
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        title
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      Label drawn in the frame header.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        value
      </code>
    </td>
    
    <td>
      Number from 0 to 1
    </td>
    
    <td>
      
    </td>
    
    <td>
      Legacy inline share. Write it in the body instead. <strong>
        Required unless the body has the data.
      </strong>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        columns
      </code>
    </td>
    
    <td>
      Whole number from 3 to 20
    </td>
    
    <td>
      10
    </td>
    
    <td>
      Cells per row. The waffle is always ten rows tall.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        caption
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      Short line under the figure that says what it shows.
    </td>
  </tr>
</tbody>
</table>

### Plot

`bm-plot`: A series that needs a scale.

```markdown
::bm-plot{title="P95 latency" caption="Milliseconds, last seven days"}
- Mon: 42
- Tue: 55
- Wed: 68
- Thu: 51
- Fri: 76
- Sat: 81
- **Sun: 104**
::
```

<theme-image alt="The bm-plot example rendered" dark="/screenshots/comark/comark-bm-plot-dark.png" light="/screenshots/comark/comark-bm-plot-light.png">



</theme-image>

[Open in playground ↗](https://app.basicmemory.com/playground?example=bm-plot)

#### Plot attributes

**Body:** `- label: value` rows, or a paragraph of numbers.

<table>
<thead>
  <tr>
    <th>
      Attribute
    </th>
    
    <th>
      Accepts
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        title
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      Label drawn in the frame header.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        data
      </code>
    </td>
    
    <td>
      Numbers separated by commas or spaces
    </td>
    
    <td>
      
    </td>
    
    <td>
      Legacy inline values. Write them in the body instead. <strong>
        Required unless the body has the data.
      </strong>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        caption
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      Short line under the figure that says what it shows.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        labels
      </code>
    </td>
    
    <td>
      Comma-separated labels
    </td>
    
    <td>
      
    </td>
    
    <td>
      Axis labels. The first and last are drawn under the plot.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        rows
      </code>
    </td>
    
    <td>
      Whole number from 3 to 12
    </td>
    
    <td>
      6
    </td>
    
    <td>
      Plot height in character rows.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        query
      </code>
    </td>
    
    <td>
      Pipeline: a source (<code>
        notes
      </code>
      
      , <code>
        search 'phrase'
      </code>
      
      , <code>
        activity 7d|30d
      </code>
      
      ), then <code>
        where
      </code>
      
      , <code>
        group
      </code>
      
      , <code>
        count
      </code>
      
      , <code>
        sum
      </code>
      
      , <code>
        fields
      </code>
      
      , <code>
        daily
      </code>
      
      , <code>
        sort
      </code>
      
      , <code>
        limit
      </code>
    </td>
    
    <td>
      
    </td>
    
    <td>
      Live pipeline that supplies the rows when the note is viewed, such as <code>
        notes | where type == decision | group owner
      </code>
      
      . The body keeps the last frozen snapshot.
    </td>
  </tr>
</tbody>
</table>

### Uptime

`bm-uptime`: Daily status cells with runs.

```markdown
::bm-uptime{title="API" columns="30"}
ok×40 degraded ok×20 down×2
::
```

<theme-image alt="The bm-uptime example rendered" dark="/screenshots/comark/comark-bm-uptime-dark.png" light="/screenshots/comark/comark-bm-uptime-light.png">



</theme-image>

[Open in playground ↗](https://app.basicmemory.com/playground?example=bm-uptime)

#### Uptime attributes

**Body:** A paragraph of `ok`, `degraded` and `down`, with runs such as `ok×40`.

<table>
<thead>
  <tr>
    <th>
      Attribute
    </th>
    
    <th>
      Accepts
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        title
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      Label drawn in the frame header.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        data
      </code>
    </td>
    
    <td>
      <code>
        ok
      </code>
      
      , <code>
        degraded
      </code>
      
       or <code>
        down
      </code>
      
      , separated by commas or spaces (up to 366)
    </td>
    
    <td>
      
    </td>
    
    <td>
      Legacy inline statuses. Write them in the body instead. <strong>
        Required unless the body has the data.
      </strong>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        caption
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      Short line under the figure that says what it shows.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        columns
      </code>
    </td>
    
    <td>
      Whole number from 3 to 60
    </td>
    
    <td>
      One cell per status, up to 60
    </td>
    
    <td>
      Cells per row.
    </td>
  </tr>
</tbody>
</table>

### Slope

`bm-slope`: Before and after values.

```markdown
::bm-slope{title="Coverage"}
- auth: 41 → 88
- billing: 72 → 74
- *docs: 11 → 40*
::
```

<theme-image alt="The bm-slope example rendered" dark="/screenshots/comark/comark-bm-slope-dark.png" light="/screenshots/comark/comark-bm-slope-light.png">



</theme-image>

[Open in playground ↗](https://app.basicmemory.com/playground?example=bm-slope)

#### Slope attributes

**Body:** `- label: before → after` rows.

<table>
<thead>
  <tr>
    <th>
      Attribute
    </th>
    
    <th>
      Accepts
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        title
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      Label drawn in the frame header.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        data
      </code>
    </td>
    
    <td>
      <code>
        label:before:after
      </code>
      
       records joined by <code>
        ;
      </code>
    </td>
    
    <td>
      
    </td>
    
    <td>
      Legacy inline rows. Write them in the body instead. <strong>
        Required unless the body has the data.
      </strong>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        caption
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      Short line under the figure that says what it shows.
    </td>
  </tr>
</tbody>
</table>

### Bullet

`bm-bullet`: Actual against target.

```markdown
::bm-bullet{title="Budgets"}
- API: 72% / 80
- **Web: 91% / 90**
- Search: 40 / 50 / 100
::
```

<theme-image alt="The bm-bullet example rendered" dark="/screenshots/comark/comark-bm-bullet-dark.png" light="/screenshots/comark/comark-bm-bullet-light.png">



</theme-image>

[Open in playground ↗](https://app.basicmemory.com/playground?example=bm-bullet)

#### Bullet attributes

**Body:** `- label: value / target` rows, or `value / target / max`.

<table>
<thead>
  <tr>
    <th>
      Attribute
    </th>
    
    <th>
      Accepts
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        title
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      Label drawn in the frame header.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        data
      </code>
    </td>
    
    <td>
      <code>
        label:value:target:max[:display]
      </code>
      
       records joined by <code>
        ;
      </code>
      
      , or a YAML <code>
        items
      </code>
      
       list
    </td>
    
    <td>
      
    </td>
    
    <td>
      Legacy inline rows. Write them in the body instead. <strong>
        Required unless the body has the data.
      </strong>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        caption
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      Short line under the figure that says what it shows.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        ticks
      </code>
    </td>
    
    <td>
      Whole number from 3 to 60
    </td>
    
    <td>
      
    </td>
    
    <td>
      <em>
        Legacy.
      </em>
      
       Accepted so older notes still validate. It does not change the chart.
    </td>
  </tr>
</tbody>
</table>

### Waterfall

`bm-waterfall`: A running total; the bold or last row is the total.

```markdown
::bm-waterfall{title="Margin"}
- Start: 100
- Revenue: 28
- Costs: -17
- Refunds: -6
- **Net: 105**
::
```

<theme-image alt="The bm-waterfall example rendered" dark="/screenshots/comark/comark-bm-waterfall-dark.png" light="/screenshots/comark/comark-bm-waterfall-light.png">



</theme-image>

[Open in playground ↗](https://app.basicmemory.com/playground?example=bm-waterfall)

#### Waterfall attributes

**Body:** `- label: delta` rows. The first row opens; a bold row or the last row is a total.

<table>
<thead>
  <tr>
    <th>
      Attribute
    </th>
    
    <th>
      Accepts
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        title
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      Label drawn in the frame header.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        data
      </code>
    </td>
    
    <td>
      <code>
        label:value[:start|in|out|end]
      </code>
      
       records joined by <code>
        ;
      </code>
    </td>
    
    <td>
      
    </td>
    
    <td>
      Legacy inline rows. Write them in the body instead. <strong>
        Required unless the body has the data.
      </strong>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        caption
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      Short line under the figure that says what it shows.
    </td>
  </tr>
</tbody>
</table>

### Gantt

`bm-gantt`: Overlapping work: start, end, and percent complete.

```markdown
::bm-gantt{title="Launch"}
- RFC: 0% 40% 100%
- **Build: 25% 80% 60%**
- Review: 70% 100% 0%
::
```

<theme-image alt="The bm-gantt example rendered" dark="/screenshots/comark/comark-bm-gantt-dark.png" light="/screenshots/comark/comark-bm-gantt-light.png">



</theme-image>

[Open in playground ↗](https://app.basicmemory.com/playground?example=bm-gantt)

#### Gantt attributes

**Body:** `- label: start end complete` rows, as fractions or percents.

<table>
<thead>
  <tr>
    <th>
      Attribute
    </th>
    
    <th>
      Accepts
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        title
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      Label drawn in the frame header.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        data
      </code>
    </td>
    
    <td>
      <code>
        label:start:end:complete
      </code>
      
       records joined by <code>
        ;
      </code>
      
      , each from 0 to 1
    </td>
    
    <td>
      
    </td>
    
    <td>
      Legacy inline rows. Write them in the body instead. <strong>
        Required unless the body has the data.
      </strong>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        caption
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      Short line under the figure that says what it shows.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        columns
      </code>
    </td>
    
    <td>
      Whole number from 8 to 60
    </td>
    
    <td>
      24
    </td>
    
    <td>
      Width of the timeline in cells.
    </td>
  </tr>
</tbody>
</table>

### Heatmap

`bm-heatmap`: A labeled intensity grid from a Markdown table.

```markdown
::bm-heatmap{title="Deploys" caption="Weekday intensity"}
| | M | T | W | T | F |
| --- | --- | --- | --- | --- | --- |
| API | 1 | 2 | 4 | 3 | 2 |
| Web | 0 | 1 | 3 | 4 | 2 |
::
```

<theme-image alt="The bm-heatmap example rendered" dark="/screenshots/comark/comark-bm-heatmap-dark.png" light="/screenshots/comark/comark-bm-heatmap-light.png">



</theme-image>

[Open in playground ↗](https://app.basicmemory.com/playground?example=bm-heatmap)

#### Heatmap attributes

**Body:** A Markdown table: the header labels the columns, the first column labels the rows.

<table>
<thead>
  <tr>
    <th>
      Attribute
    </th>
    
    <th>
      Accepts
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        title
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      Label drawn in the frame header.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        columns
      </code>
    </td>
    
    <td>
      Comma-separated labels, or a YAML string list
    </td>
    
    <td>
      
    </td>
    
    <td>
      Column labels. The body table header supplies them instead. <strong>
        Required unless the body has the data.
      </strong>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        rows
      </code>
    </td>
    
    <td>
      <code>
        Label:1,2,3
      </code>
      
       records joined by <code>
        ;
      </code>
    </td>
    
    <td>
      
    </td>
    
    <td>
      Legacy inline rows. Write a Markdown table in the body instead. <strong>
        Required unless the body has the data.
      </strong>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        caption
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      Short line under the figure that says what it shows.
    </td>
  </tr>
</tbody>
</table>

### Matrix

`bm-matrix`: Exact values on two axes.

```markdown
::bm-matrix{title="Latency" caption="Milliseconds by operation"}
| | p50 | p95 | p99 |
| --- | --- | --- | --- |
| Read | 12 | 42 | 88 |
| **Write** | 18 | 57 | 110 |
::
```

<theme-image alt="The bm-matrix example rendered" dark="/screenshots/comark/comark-bm-matrix-dark.png" light="/screenshots/comark/comark-bm-matrix-light.png">



</theme-image>

[Open in playground ↗](https://app.basicmemory.com/playground?example=bm-matrix)

#### Matrix attributes

**Body:** A Markdown table: the header labels the columns, the first column labels the rows.

<table>
<thead>
  <tr>
    <th>
      Attribute
    </th>
    
    <th>
      Accepts
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        title
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      Label drawn in the frame header.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        columns
      </code>
    </td>
    
    <td>
      Comma-separated labels, or a YAML string list
    </td>
    
    <td>
      
    </td>
    
    <td>
      Column labels. The body table header supplies them instead. <strong>
        Required unless the body has the data.
      </strong>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        rows
      </code>
    </td>
    
    <td>
      <code>
        Label:1,2,3
      </code>
      
       records joined by <code>
        ;
      </code>
      
      , or a YAML list of <code>
        {label, values}
      </code>
    </td>
    
    <td>
      
    </td>
    
    <td>
      Legacy inline rows. Write a Markdown table in the body instead. <strong>
        Required unless the body has the data.
      </strong>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        caption
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      Short line under the figure that says what it shows.
    </td>
  </tr>
</tbody>
</table>

### Cells

`bm-cells`: A small filled or empty grid; x is filled.

```markdown
::bm-cells{title="Coverage map"}
| | A | B | C | D |
| --- | --- | --- | --- | --- |
| Core | x | x |  | x |
| Cloud | x |  | x | x |
::
```

<theme-image alt="The bm-cells example rendered" dark="/screenshots/comark/comark-bm-cells-dark.png" light="/screenshots/comark/comark-bm-cells-light.png">



</theme-image>

[Open in playground ↗](https://app.basicmemory.com/playground?example=bm-cells)

#### Cells attributes

**Body:** A Markdown table; `x` marks a filled cell.

<table>
<thead>
  <tr>
    <th>
      Attribute
    </th>
    
    <th>
      Accepts
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        title
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      Label drawn in the frame header.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        columns
      </code>
    </td>
    
    <td>
      Comma-separated labels, or a YAML string list
    </td>
    
    <td>
      
    </td>
    
    <td>
      Column labels. The body table header supplies them instead. <strong>
        Required unless the body has the data.
      </strong>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        rows
      </code>
    </td>
    
    <td>
      <code>
        Label:1,2,3
      </code>
      
       records joined by <code>
        ;
      </code>
    </td>
    
    <td>
      
    </td>
    
    <td>
      Legacy inline rows. Write a Markdown table in the body instead. <strong>
        Required unless the body has the data.
      </strong>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        caption
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      Short line under the figure that says what it shows.
    </td>
  </tr>
</tbody>
</table>

### Flow

`bm-flow`: Short process paths, one per list item.

```markdown
::bm-flow{title="Publish path"}
- note → **wiki** → reader
- note → graph → relations
- note → export → artifact
::
```

<theme-image alt="The bm-flow example rendered" dark="/screenshots/comark/comark-bm-flow-dark.png" light="/screenshots/comark/comark-bm-flow-light.png">



</theme-image>

[Open in playground ↗](https://app.basicmemory.com/playground?example=bm-flow)

#### Flow attributes

**Body:** One path per list item or paragraph, such as `request → handler`.

<table>
<thead>
  <tr>
    <th>
      Attribute
    </th>
    
    <th>
      Accepts
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        title
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      Label drawn in the frame header.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        rows
      </code>
    </td>
    
    <td>
      <code>
        a>b>c
      </code>
      
       paths joined by <code>
        ;
      </code>
    </td>
    
    <td>
      
    </td>
    
    <td>
      Legacy inline paths. Write them in the body instead. <strong>
        Required unless the body has the data.
      </strong>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        caption
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      Short line under the figure that says what it shows.
    </td>
  </tr>
</tbody>
</table>

### Activity

`bm-activity`: Daily counts over consecutive days, with runs.

```markdown
::bm-activity{title="Commits"}
- 2026-08-03: 0 1 4 2 0×2 3 5 1 7 4 9 3 2 6 8 1 0×2 4 6 3 5 2 7 9 4 1 3
::
```

<theme-image alt="The bm-activity example rendered" dark="/screenshots/comark/comark-bm-activity-dark.png" light="/screenshots/comark/comark-bm-activity-light.png">



</theme-image>

[Open in playground ↗](https://app.basicmemory.com/playground?example=bm-activity)

#### Activity attributes

**Body:** `- YYYY-MM-DD: counts…` for consecutive days, with runs such as `0×2`.

<table>
<thead>
  <tr>
    <th>
      Attribute
    </th>
    
    <th>
      Accepts
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        title
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      Label drawn in the frame header.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        days
      </code>
    </td>
    
    <td>
      <code>
        YYYY-MM-DD:count
      </code>
      
       records joined by <code>
        ;
      </code>
      
      , spanning at most a year
    </td>
    
    <td>
      
    </td>
    
    <td>
      Legacy inline days. Write them in the body instead. <strong>
        Required unless the body has the data.
      </strong>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        weekStartsOn
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
      
      , <code>
        1
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      First day of each week column: <code>
        0
      </code>
      
       is Sunday, <code>
        1
      </code>
      
       is Monday.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        max
      </code>
    </td>
    
    <td>
      Number above 0
    </td>
    
    <td>
      The largest count
    </td>
    
    <td>
      Count that draws the darkest cell.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        glyphs
      </code>
    </td>
    
    <td>
      <code>
        bar
      </code>
      
      , <code>
        shade
      </code>
      
      , <code>
        ascii
      </code>
      
      , <code>
        hash
      </code>
    </td>
    
    <td>
      <code>
        bar
      </code>
    </td>
    
    <td>
      Characters used to draw the trend.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        palette
      </code>
    </td>
    
    <td>
      <code>
        mono
      </code>
      
      , <code>
        duo
      </code>
      
      , <code>
        multi
      </code>
    </td>
    
    <td>
      
    </td>
    
    <td>
      Color treatment: one ink, two inks, or several.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        caption
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      Short line under the figure that says what it shows.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        query
      </code>
    </td>
    
    <td>
      Pipeline: a source (<code>
        notes
      </code>
      
      , <code>
        search 'phrase'
      </code>
      
      , <code>
        activity 7d|30d
      </code>
      
      ), then <code>
        where
      </code>
      
      , <code>
        group
      </code>
      
      , <code>
        count
      </code>
      
      , <code>
        sum
      </code>
      
      , <code>
        fields
      </code>
      
      , <code>
        daily
      </code>
      
      , <code>
        sort
      </code>
      
      , <code>
        limit
      </code>
    </td>
    
    <td>
      
    </td>
    
    <td>
      Live pipeline that supplies the rows when the note is viewed, such as <code>
        notes | where type == decision | group owner
      </code>
      
      . The body keeps the last frozen snapshot.
    </td>
  </tr>
</tbody>
</table>

### Calendar

`bm-calendar`: A month with marked days; bold is today.

```markdown
::bm-calendar{title="August 2026" year="2026" month="8" weekStartsOn="1"}
- 12: launch
- 18: review
- **27: today**
::
```

<theme-image alt="The bm-calendar example rendered" dark="/screenshots/comark/comark-bm-calendar-dark.png" light="/screenshots/comark/comark-bm-calendar-light.png">



</theme-image>

[Open in playground ↗](https://app.basicmemory.com/playground?example=bm-calendar)

#### Calendar attributes

**Body:** `- day: label` rows. The bold day is today.

<table>
<thead>
  <tr>
    <th>
      Attribute
    </th>
    
    <th>
      Accepts
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        title
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      Label drawn in the frame header.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        year
      </code>
    </td>
    
    <td>
      Four-digit year, 1970 or later
    </td>
    
    <td>
      
    </td>
    
    <td>
      Year of the month shown. <strong>
        Required.
      </strong>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        month
      </code>
    </td>
    
    <td>
      Number from 1 to 12
    </td>
    
    <td>
      
    </td>
    
    <td>
      Month shown. <strong>
        Required.
      </strong>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        weekStartsOn
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
      
      , <code>
        1
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      First day of each week row: <code>
        0
      </code>
      
       is Sunday, <code>
        1
      </code>
      
       is Monday.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        marks
      </code>
    </td>
    
    <td>
      Day numbers from 1 to 31, separated by commas or spaces
    </td>
    
    <td>
      
    </td>
    
    <td>
      Legacy inline marked days. Write them in the body instead.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        today
      </code>
    </td>
    
    <td>
      Number from 1 to 31
    </td>
    
    <td>
      
    </td>
    
    <td>
      Day number to draw as today.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        palette
      </code>
    </td>
    
    <td>
      <code>
        mono
      </code>
      
      , <code>
        duo
      </code>
      
      , <code>
        multi
      </code>
    </td>
    
    <td>
      
    </td>
    
    <td>
      Color treatment: one ink, two inks, or several.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        caption
      </code>
    </td>
    
    <td>
      Text
    </td>
    
    <td>
      
    </td>
    
    <td>
      Short line under the figure that says what it shows.
    </td>
  </tr>
</tbody>
</table>

---

## Live views

### Live pipelines

`live-view`: Query pipelines run against a small sample project in your browser.

Each view below names a component and pipes rows into it, read left to right:
a source, then `where`, `group`, `count` or `sum`, `fields`, `sort`, and `limit`.
Here they run against a small sample project in your browser; Cloud runs them
against the project's indexed metadata.

```markdown
::bm-bars{title="Open decisions by owner" query="notes | where type == decision and status != done | group owner | sort count desc"}
::
```

<theme-image alt="Live view 1 rendered from a sample project" dark="/screenshots/comark/comark-live-1-dark.png" light="/screenshots/comark/comark-live-1-light.png">



</theme-image>

The bars above count every decision that is not done, including the one with no
status at all. Below, the same rows feed a ranked list and a points total.

```markdown
::bm-rank{title="Points by owner" query="notes | group owner | sum points | sort sum desc | limit 5"}
::
```

<theme-image alt="Live view 2 rendered from a sample project" dark="/screenshots/comark/comark-live-2-dark.png" light="/screenshots/comark/comark-live-2-light.png">



</theme-image>

```markdown
::bm-stat{label="Active objectives" query="notes | where type == objective and status == open | count"}
::
```

<theme-image alt="Live view 3 rendered from a sample project" dark="/screenshots/comark/comark-live-3-dark.png" light="/screenshots/comark/comark-live-3-light.png">



</theme-image>

```markdown
::bm-table{title="Infra work due soon" query="notes | where tags contains infra and due < 2026-10-15 | fields title, owner, due | sort due"}
::
```

<theme-image alt="Live view 4 rendered from a sample project" dark="/screenshots/comark/comark-live-4-dark.png" light="/screenshots/comark/comark-live-4-light.png">



</theme-image>

Activity reads the product feed. `daily` counts every event per day, so a busy
day is never cut off at a row limit.

```markdown
::bm-activity{title="Edits per day" query="activity 30d | daily"}
::
```

<theme-image alt="Live view 5 rendered from a sample project" dark="/screenshots/comark/comark-live-5-dark.png" light="/screenshots/comark/comark-live-5-light.png">



</theme-image>

```markdown
::bm-timeline{title="Recent edits" query="activity 7d"}
::
```

<theme-image alt="Live view 6 rendered from a sample project" dark="/screenshots/comark/comark-live-6-dark.png" light="/screenshots/comark/comark-live-6-light.png">



</theme-image>

Search ranks notes by a phrase. Quote the phrase with single quotes, because the
`query` attribute is itself double-quoted. Filters after a search compare with `==`.

```markdown
::bm-rank{title="Search: postgres" query="search 'postgres' | limit 5"}
::
```

<theme-image alt="Live view 7 rendered from a sample project" dark="/screenshots/comark/comark-live-7-dark.png" light="/screenshots/comark/comark-live-7-light.png">



</theme-image>

```markdown
::bm-table{title="Decisions about the queue" query="search 'queue rewrite' hybrid | where type == decision | limit 5"}
::
```

<theme-image alt="Live view 8 rendered from a sample project" dark="/screenshots/comark/comark-live-8-dark.png" light="/screenshots/comark/comark-live-8-light.png">



</theme-image>

A live chart keeps its last frozen snapshot as its body. Readers see live rows;
when live data cannot load, the snapshot shows instead. In the editor, **Freeze
snapshot** rewrites this body from the current rows.

```markdown
::bm-funnel{title="Decision status" query="notes | where type == decision | group status | sort count desc"}
- open: 2
- done: 1
::
```

<theme-image alt="Live view 9 rendered from a sample project" dark="/screenshots/comark/comark-live-9-dark.png" light="/screenshots/comark/comark-live-9-light.png">



</theme-image>

A query the component cannot draw fails inside its own frame in preview, with a
coded problem and a fix. Try changing a query above to `notes | fields title`.

[Open in playground ↗](https://app.basicmemory.com/playground?example=live-view)


## Sitemap

See the full [sitemap](https://docs.basicmemory.com/sitemap.md) for all pages.