--- title: "Live Notes" description: "Put KPIs, charts, timelines, comparisons, and task boards inside a note with Comark components, including live views that query your project each time you open them." canonical_url: "https://docs.basicmemory.com/cloud/live-notes" --- # Live Notes > Put KPIs, charts, timelines, comparisons, and task boards inside a note with Comark components, including live views that query your project each time you open them. **Live notes** show the work inside the note. Put a KPI, a Gantt chart, a comparison, or a task board in any note: the data sits in the note as ordinary Markdown lists and tables, and Basic Memory draws the figure. A **live view** goes further and runs a query over your project each time you open it, so a chart of open tasks is always the current one. Basic Memory supports [Comark](https://comark.dev/), an open Markdown syntax for components. Basic Memory Cloud renders the components in Notes, the [Wiki](https://docs.basicmemory.com/cloud/wiki), and [shared notes](https://docs.basicmemory.com/cloud/shared-notes). Everywhere else, in a local editor, on GitHub, or in a raw `bm_read`, the note still reads as plain Markdown. ## Write a component A component is a `::bm-` directive with attributes in braces, a Markdown body, and a closing `::`. This is part of a real note's source: ```markdown ::bm-kpi{title="Customers migrated" value="26" label="of 40 in cohort one" hint="65%" data="0,3,7,12,16,21,26"} :: ::bm-funnel{title="Beta switch funnel"} - Saw the new plans: 112 - Opened the usage chart: 84 - **Set a spending limit: 57** - Switched plans: 31 :: ``` And this is what Basic Memory draws from it: Bold a row (`**Set a spending limit: 57**`) to highlight it. Your AI writes components the same way you do, and reads them back as text, numbers included. ## The components Basic Memory registers **39 components**. Nothing outside this list is a component. [Comark Components](https://docs.basicmemory.com/cloud/comark-components) shows every one with its source and how it renders, and links each to the playground to try it.
Kind Components
Content and layout bm-frame , bm-ascii , bm-image , bm-svg , bm-stat , bm-kpi , bm-table , bm-timeline , bm-tree , bm-spec , bm-compare , bm-diff , bm-sheet , bm-check , bm-invoice , bm-kanban , bm-card , bm-card-group , bm-field , bm-field-group , bm-meter , bm-spark , bm-rank
Charts bm-bars , bm-funnel , bm-stack , bm-waffle , bm-plot , bm-uptime , bm-slope , bm-bullet , bm-waterfall , bm-gantt , bm-heatmap , bm-matrix , bm-cells , bm-flow , bm-activity , bm-calendar
A few more, from the same launch project: The `comark(7)` manual page (`bm man comark`, or `memory://man/comark(7)` over MCP) is the quick reference. The `memory-comark` [agent skill](https://docs.basicmemory.com/integrations/skills) teaches your AI every component, its attributes, and its data format. ## Live views Give a component a `query` and it becomes a read-only view over the project that contains it. The query is a pipeline, read left to right: ```markdown ::bm-bars{title="Tasks by status" query="notes | where type == task | group status"} :: ::bm-table{title="Open tasks" query="notes | where type == task and status != done | fields title, owner, due | sort due"} :: ::bm-activity{title="Edits per day" query="activity 30d | daily"} :: ```
Part What it does
Sources notes (your notes' frontmatter), search 'phrase' or search 'phrase' hybrid (ranked results), activity 7d or activity 30d
where Filters on a field: == , != , < , <= , > , >= , contains , joined with and
group field One row per value, with its count
count , sum field One number over the filtered notes, or per group
fields a, b Note rows with these columns
daily One count per day, for activity
sort field [desc] , limit n Order the rows; keep 1 to 50
Inside the double-quoted `query` attribute, quote phrases with single quotes: `query="search 'checksum conflict'"`. Live views refresh when the project's notes change, at most once every 30 seconds per view. A live chart's Markdown body holds its last **snapshot**: readers see live rows, and if the query can't run, the snapshot shows with the reason. In the editor, **Freeze snapshot** rewrites the body from the current rows. A component that can't render, or a live view whose query fails, shows the problem inside that component. The rest of the note still renders, and a component never blocks a save. --- ## Next Steps Every component, with its source and how it renders. The frontmatter fields live views filter on. ## Sitemap See the full [sitemap](https://docs.basicmemory.com/sitemap.md) for all pages.