@peers-app/peers-ui

React components and hooks for building Peers package UIs.

What is Peers?

Peers is a local-first personal computing platform. Your data lives on your devices, syncs peer-to-peer, and is end-to-end encrypted — no servers in the middle. You own your data and your identity. Build apps with the SDK or use AI coding tools to create them; either way, the platform handles sync, encryption, and persistence automatically.

What this package provides

React Hooks

Hooks that bridge @peers-app/peers-sdk observables to React 18 with concurrent rendering support.

| Hook | Purpose | |------|---------| | useObservable | Subscribe to an observable or computed; returns [value, setter] | | useObservableState | Create a component-local observable that persists across renders | | usePromise | Resolve a promise in a component with an optional initial value | | useSubscription | Run a side-effect whenever an observable changes | | useOnScreen | IntersectionObserver hook for visibility detection |

Rich Text

• MarkdownEditor — Lexical-based rich text editor with @mention support, toolbar, and markdown serialization
• MarkdownWithMentions — Render markdown with resolved @user and $tool mentions

Layout

• RootLayoutHost — The single component a client mounts. Owns bootstrapping (user gate, context init, route loading), the always-available command palette, and the welcome modal, then renders the selected root layout body. TabsLayoutApp is a backwards-compatible alias for it.
• Root layout system — Swappable top-level layouts. getRootLayouts() / getRootLayout(id) expose the static registry, selectedRootLayoutId (per-device pvar) holds the choice, setRootLayout(id) changes it, and <LayoutPicker /> is the Settings UI. The default tabs layout is TabsLayoutInternal.
• TabsLayoutInternal — The tabs UI body (tab strip + active tab content); the default root layout. Pass fillContainer to size it to its parent instead of the viewport (used when embedding it in another layout).
• Tabs + Console layout (tabs-with-console) — Splits the tab UI and the Operator Console into two real, resizable panels (dockable bottom/left/right) rather than an overlay. Selectable via <LayoutPicker />.
• Full-screen layout (fullscreen) — Shows one screen at a time with no tab strip; navigation is via the always-mounted command palette (Cmd/Ctrl+K) plus a Home button. While active it enables setSingleTabMode(true) so opening an app replaces the current screen instead of accumulating tabs (non-destructive — tabs from other layouts are left untouched).
• OperatorConsolePanel — The presentational console chrome (header toolbar + body) that fills its container; the host layout owns sizing, the resize divider, the collapsed strip, and placement. Toggle the console with Ctrl+` while on the Tabs + Console layout.
• SortableList — Drag-and-drop list powered by SortableJS
• InverseLazyList — Bottom-anchored lazy-loading list for chat-style UIs
• Tabs / ScreenTabBody — Tab strip and content container

Communication

• VoiceIndicator — Visual indicator for active voice sessions
• VoicePlayback — Headless component that plays browser-side voice TTS output

Tab Management

| Export | Purpose | |--------|---------| | goToTabPath | Navigate to a path within the Peers tab system | | activeTabId | Observable of the currently active tab ID | | activeTabs | Observable of all open tabs | | closeCurrentTab | Close the active tab | | updateActiveTabTitle | Set the title of the active tab | | TabState | Tab state management class | | mainContentPath | Hash-synced route observable |

Peer Dependencies

{
  "@peers-app/peers-sdk": "^0.18.8",
  "bootstrap": "^5.3.3",
  "react": "^18.0.0",
  "react-dom": "^18.0.0"
}

Quick Start

npm install @peers-app/peers-ui

The fastest way to build a Peers package with a UI is to start from the template:

peers-package-template — scaffold, build, and install a custom package into the Peers runtime.

Package UI bundles receive PeersUI as a webpack external, so you can import hooks and components without bundling them into your package.

Links

• peers.app — try Peers in your browser or download the desktop app
• Documentation — architecture, package development, and API reference
• GitHub — source repositories and package template

License

MIT