Skip to content

web ui

Jump to bottom
aniongithub edited this page May 19, 2026 · 1 revision

title: Web UI type: component

Web UI

A Preact app served by the architecture/http-api over plain HTTP on localhost. The dist bundle (~860 KB minified) is embedded into the Go binary at compile time via //go:embed.

Layout

graph TD
    A[App.tsx] --> S[Sidebar]
    A --> M[Main pane]
    S --> SB[PageBrowser]
    SB --> SR[Search input + sort]
    SB --> PL[PageList]
    SB --> PT[PageTree]
    M --> GV[GraphView]
    M --> PV[Page view]
    PV --> MD[marked + mermaid]
    GV --> FG[force-graph canvas]
Loading

Sidebar

The sidebar holds the page list. Three sort modes, two renderings:

Sort Rendering
Recent Flat list, newest first
A→Z path Outlook-style tree, folders first
A→Z title Flat list, alphabetical

Search filters both the sidebar and the #graph-view live as you type. See concepts/search.

Graph view {#graph-view}

When no page is selected (or you click the "mind-map" header), the main pane shows an interactive force-directed graph of every page and link. See design/wikilinks-as-graph for the design notes.

Edge kind Source Style
Path parent → child path prefix Translucent border-color line
Reference [[wikilink]] source → target Translucent accent-color line + arrow

Both are togglable via an in-graph legend. A "fit all" button rescales to fit the current visible set.

URL state

The hash encodes both the current page and the active search filter:

#/concepts/wikilinks?q=arch

Typing into the search box replaces the URL in place. Pressing Enter or clicking a folder-only graph node pushes a new history entry — Back undoes the filter session.

See also

Clone this wiki locally