KiwiFS extends standard markdown with fenced code blocks that render as interactive widgets in the web UI. These blocks are portable — they degrade gracefully to plain code blocks in any markdown viewer.
Block types
Charts Bar, line, area, pie, radar, and scatter charts from YAML data.
DQL queries Inline tables and lists driven by DQL queries over frontmatter.
Kanban Inline kanban boards from YAML column definitions.
Playground Interactive widgets with sliders, toggles, selects, and color pickers.
App Sandboxed HTML/CSS/JS running in an iframe.
Diff Annotated inline diffs with add/remove highlighting.
Progress Progress bars and gauge indicators.
Color Color palette swatches for design systems.
Mermaid Flowcharts, sequence diagrams, and other Mermaid diagrams.
Live widget React Live code blocks that render in the browser.
kiwi-chart Renders bar, line, area, pie, radar, or scatter charts from inline YAML data.
```kiwi-chart type: bar title: Sprint velocity data: - label: Sprint 1 value: 21 - label: Sprint 2 value: 34 - label: Sprint 3 value: 28 ```
Supported chart types: bar, line, area, pie, radar, scatter.
Use named series for grouped or stacked visualizations: ```kiwi-chart type: bar title: Team output series: - name: Frontend data: [12, 19, 8] - name: Backend data: [15, 11, 22] labels: [Jan, Feb, Mar] ```
kiwi-query Renders a DQL query result as an inline table or list. The query runs against frontmatter metadata.
```kiwi-query TABLE title, status, priority FROM "tasks" WHERE status != "done" SORT priority DESC ```
The result updates whenever the page is viewed. See DQL for the full query language.
kiwi-kanban Renders an inline kanban board from YAML column and card definitions.
```kiwi-kanban columns: - name: Todo cards: - title: Design API tags: [backend] - name: In Progress cards: - title: Build UI tags: [frontend] - name: Done cards: - title: Write tests ```
For workflow-driven kanban boards that read from file frontmatter, use the Kanban toolbar view instead.
kiwi-playground Interactive widgets with controls that update in real time. Useful for documenting configurable parameters.
```kiwi-playground widgets: - type: slider label: Opacity min: 0 max: 100 value: 75 - type: toggle label: Dark mode value: true - type: select label: Theme options: [kiwi, ocean, forest, sunset] value: kiwi - type: color label: Accent value: "#6cbe45" - type: number label: Font size min: 12 max: 24 value: 16 - type: text label: Title value: "My page" ```
kiwi-app Runs sandboxed HTML, CSS, and JavaScript in an iframe.
```kiwi-app <style> .counter { font-size: 2em; text-align: center; padding: 2em; } button { font-size: 1.2em; padding: 0.5em 1em; } </style> <div class="counter"> <p id="count">0</p> <button onclick="document.getElementById('count').textContent = ++window.n">+1</button> </div> <script>window.n = 0;</script> ```
The iframe is sandboxed. It cannot access the parent page, make network requests, or use cookies.
kiwi-diff Renders annotated inline diffs with syntax highlighting.
```kiwi-diff - const timeout = 5000; + const timeout = 30000; const retries = 3; - const backoff = "linear"; + const backoff = "exponential"; ```
kiwi-progress Renders progress bars or gauge indicators.
```kiwi-progress type: bar label: Migration progress value: 73 max: 100 ```
Supported types: bar, gauge.
kiwi-color Renders color palette swatches.
```kiwi-color colors: - name: Primary value: "#6cbe45" - name: Secondary value: "#4a8a2a" - name: Accent value: "#7dd356" ```
Mermaid diagrams Standard Mermaid fenced blocks render as diagrams.
```mermaid graph LR A[Agent] -->|MCP| B[KiwiFS] B --> C[Search] B --> D[Storage] B --> E[Git] ```
React Live code blocks that compile and render in the browser.
```widget:live function Counter() { const [count, setCount] = React.useState(0); return <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>; } ```
Python code blocks that run via Pyodide in the browser.
```widget:code import math print(f"Pi is approximately {math.pi:.4f}") ```
Container directives Tabs Wrap content in tab groups using :::tabs and ::tab[label]:
:::tabs ::tab[ REST ] Use `PUT /api/kiwi/file` to create or update a page. ::tab[ MCP ] Call `kiwi_write` with `path` and `content` arguments. ::tab[ CLI ] Write the file directly: `echo "# Title" > page.md` :::
Columns Split content into columns with :::columns and :::col:
:::columns :::col Left column content here. ::: :::col Right column content here. ::: :::
Callouts KiwiFS supports GitHub-style callouts and foldable variants:
> [ !NOTE ] > Standard informational callout. > [ !TIP ] > Helpful suggestion. > [ !WARNING ] > Potential issue to watch for. > [ !CAUTION ] > Dangerous action that could cause data loss. > [ !IMPORTANT ] > Critical information.
Add - or + to make callouts foldable:
> [ !NOTE ]- Collapsed by default > This content is hidden until expanded. > [ !TIP ]+ Expanded by default > This content is visible but can be collapsed.
DQL Query language powering kiwi-query blocks.
Workflows State machines behind Kanban boards.
Web UI Full-screen views and editing features.
Canvas Spatial diagrams in .canvas.json files.
