> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kiwifs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Web UI

> Browse, edit, search, and visualize your knowledge base in the embedded KiwiFS web UI.

KiwiFS ships a full **web UI** embedded in the Go binary. Open `http://localhost:3333` after `kiwifs serve` — no separate install.

## Features

<CardGroup cols={2}>
  <Card title="File tree" icon="folder-tree">
    Expand, collapse, drag-drop, and context menu on markdown files.
  </Card>

  <Card title="Editor" icon="pen-to-square">
    Source-preserving BlockNote editor. Keeps on-disk formatting stable.
  </Card>

  <Card title="Search" icon="magnifying-glass">
    **Cmd+K** opens global BM25 search. Semantic results appear when vector search is configured.
  </Card>

  <Card title="Graph view" icon="diagram-project">
    Force-directed wiki-link network.
  </Card>

  <Card title="Bases" icon="table">
    Saved DQL queries with table or board layouts.
  </Card>

  <Card title="Canvas" icon="object-group">
    Interactive Flow diagrams from `.canvas.json` files.
  </Card>

  <Card title="Whiteboard" icon="pen">
    Excalidraw sketches in `.excalidraw.md` files.
  </Card>

  <Card title="Kanban" icon="bars-progress">
    Boards driven by workflow state machines.
  </Card>

  <Card title="Comments" icon="comment">
    Inline annotations on specific lines.
  </Card>

  <Card title="Data sources" icon="database">
    Saved import connections with auto-sync.
  </Card>
</CardGroup>

## Layout

The UI uses a three-pane layout:

| Pane        | Contents                                     |
| ----------- | -------------------------------------------- |
| **Sidebar** | File tree, space switcher (multi-space mode) |
| **Main**    | Page view or editor                          |
| **Panels**  | Backlinks, ToC, comments, page view counts   |

## File tree

The sidebar file tree supports expand/collapse, drag-and-drop reordering, and context menus for rename, duplicate, move, and delete. You can drag files from your operating system into the tree to import them as markdown pages.

## Toolbar views

Beyond the page editor, the header toolbar opens full-screen views:

| Button              | View                                             |
| ------------------- | ------------------------------------------------ |
| **Knowledge graph** | Force-directed wiki-link network                 |
| **Bases**           | Saved DQL queries with table or board layouts    |
| **Canvas**          | Interactive Flow editor for `.canvas.json` files |
| **Whiteboard**      | Excalidraw hub for `.excalidraw.md` files        |
| **Timeline**        | Recent git-backed activity                       |
| **Kanban**          | Workflow boards grouped by state                 |
| **Data sources**    | Saved import connections and sync controls       |

See [Canvas](/concepts/canvas), [Whiteboard](/concepts/whiteboard), and [Import connections](/import/connections).

## Engagement metrics

When analytics tracking is enabled, page view counts appear in the page header. The `kiwifs analytics` CLI command and `GET /api/kiwi/analytics` REST endpoint also report engagement data — top viewed pages and failed searches that indicate content gaps. See [Analytics API](/api/analytics).

## Page view and editor

<Tabs>
  <Tab title="View mode">
    Rendered markdown with wiki links, Mermaid diagrams, charts, kanban blocks, callouts, tabs, columns, and other rich widgets. Syntax-highlighted code blocks use Shiki with line highlights and titles.
  </Tab>

  <Tab title="Edit mode">
    Source-preserving editor (BlockNote-based). Slash commands for templates and widgets. Drag-drop images. Markdown source mode available via toggle.
  </Tab>

  <Tab title="History">
    Git versions, unified diff, and one-click restore from the versioning panel.
  </Tab>
</Tabs>

## Rich blocks and widgets

Pages can embed interactive blocks using fenced code blocks. These render as rich components in the web UI and degrade to plain code in other markdown viewers.

| Block             | What it renders                             |
| ----------------- | ------------------------------------------- |
| `kiwi-chart`      | Bar, line, area, pie, radar, scatter charts |
| `kiwi-query`      | Inline DQL tables and lists                 |
| `kiwi-kanban`     | Inline kanban boards                        |
| `kiwi-playground` | Interactive sliders, toggles, selects       |
| `kiwi-app`        | Sandboxed HTML/CSS/JS                       |
| `kiwi-diff`       | Annotated inline diffs                      |
| `kiwi-progress`   | Progress bars and gauges                    |
| `kiwi-color`      | Color palette swatches                      |
| `mermaid`         | Flowcharts, sequence diagrams               |
| `widget:live`     | React Live code                             |
| `widget:code`     | Python via Pyodide                          |

Container directives `:::tabs` and `:::columns` provide layout control. GitHub-style callouts (`> [!NOTE]`, `> [!WARNING]`, etc.) render as styled admonitions with foldable variants.

See [Widgets and block types](/concepts/widgets) for syntax and examples.

## Wiki navigation

* `[[wiki links]]` render as clickable links; unresolved links are highlighted.
* **Backlinks** panel lists pages linking to the current page.
* **Graph** view visualizes the wiki-link network with link-type filtering.

## Publishing and PDF export

Use **Publish** in the page header (or `POST /api/kiwi/publish`) to set `published: true` in frontmatter. Published pages are readable at `/p/{path}` with a themed reader view.

The page actions menu also supports in-browser PDF export via Typst.

See [Publishing](/concepts/publishing) and [Document export](/export/documents).

## Themes

Built-in themes: kiwi, ocean, forest, sunset, neutral. Users can switch unless locked:

```toml .kiwi/config.toml theme={null}
[ui]
theme_locked = false
```

Published pages at `/p/*` use a separate reader theme configurable via `PUT /api/kiwi/theme`.

## Analytics

When analytics tracking is enabled, the UI shows an analytics dashboard with page views, search analytics, content gaps, and trend charts. Per-page view counts appear in the page header.

See [Analytics API](/api/analytics).

## Keyboard shortcuts

Configurable keyboard shortcuts for navigation, editing, and search. View and customize via `GET /api/kiwi/keybindings` or the settings panel.

## Mobile

The UI is responsive. Reading works well on phones; editing is best on desktop.

## Related documentation

<CardGroup cols={2}>
  <Card title="Quickstart" icon="rocket" href="/quickstart">
    Install and run in 60 seconds.
  </Card>

  <Card title="Widgets" icon="puzzle-piece" href="/concepts/widgets">
    Charts, kanban, playground, and other rich blocks.
  </Card>

  <Card title="Wiki links" icon="link" href="/concepts/wiki-links">
    Syntax and backlink behavior.
  </Card>

  <Card title="Bases" icon="table" href="/concepts/bases-views">
    Saved views and DQL.
  </Card>

  <Card title="Canvas" icon="object-group" href="/concepts/canvas">
    Spatial diagrams.
  </Card>

  <Card title="Whiteboard" icon="pen" href="/concepts/whiteboard">
    Excalidraw sketches.
  </Card>
</CardGroup>