Components
The ViewNode vocabulary every CRE8 surface renders. Each primitive declares one contract; the server, the browser, the terminal and native shells project it.
- Primitives
- 81
- Shared writer
- 60 of 81
- Categories
- 8
- Style recipes
- 4
Layout
14 components · Pages, sections and containers that give a view its structure.
AppShell
Top-level layout composer with optional Nav, Sidebar, Drawer, Footer slots and a main content area. Slots stored as named children (slot=nav|sidebar|drawer|footer).
AttentionScope
Inert SSR wrapper that marks a view region for opt-in attention aggregation.
Card
Section-like surface with optional title, badge, and body slots.
Container
Constrained grouping primitive with no intrinsic meaning.
DetailHostFrame
Detail-pane shell with header (title/subtitle/back), scrollable body, and optional footer.
Divider
Visual separator between sections. Variants: line, dots, space.
List
Ordered or unordered collection display.
ListItem
List child with optional icon, title, subtitle, and body.
LiveSlot
Progressive SSR slot with meaningful fallback children and optional live patch transport.
Page
Top-level document landmark for a runtime-rendered view.
RoomScope
Inert SSR wrapper that places a view region inside an ephemeral live room.
Row
Inline layout primitive for small groups of related children.
Section
Semantic <section> grouping primitive. Accepts a `variant` prop that emits a BEM modifier class (e.g. primitive-section--hero) so recipes can compose section-level layouts without dedicated renderers.
SplitPreview
Two-pane preview grid (left visual / right info) with a static placeholder class for loading states.
Content
8 components · Text, cards and media that carry the record itself.
Badge
Short status or taxonomy label.
Icon
Named symbolic glyph that inherits text color and can be decorative or labelled.
ImgSlot
Image placeholder with optional tag and dimensions overlay.
InfoCard
Small bordered card with optional uppercase eyebrow, strong title, and body content.
MediaPlayer
Server-rendered <audio>/<video> mount with placeholder, aspect, and HLS/MJPEG enhancement via window.CRE8_MEDIA.
SectionEyebrow
Monospaced section identifier with id/label and accent dash.
Stat
Label/value/detail presentation for metrics.
Text
Text span that can carry semantic tone without a visual dependency.
Input
11 components · Controls that collect a value or submit an action.
Action
Button-like action that can navigate to views or invoke runtime connections.
Button
Accessible action primitive.
Checkbox
Accessible binary choice control.
DynamicForm
Schema-driven form renderer for runtime connection payloads.
EnablePush
User-gesture-tied button that registers the service worker, prompts for notification permission, subscribes via PushManager, and persists the subscription on the runtime.
Field
Canonical input element inside a Form (or standalone). Owns its own block class so it can be styled outside a Form.
Form
Submission boundary that can call CRE8 runtime connections.
Input
Accessible text entry with validation and description wiring.
Select
Single-selection listbox with optional search.
Switch
Accessible binary toggle control.
TextField
Named text-entry alias with secure and multiline runtime modes.
Data
4 components · Tables, lists and key-value sets for structured records.
CatalogTile
Generic catalog row tile with title, subtitle, badge strip, chip strip, and optional activation handler.
KeyValue
Key-value display layout for compact records.
SummaryList
Definition list with a fixed-width label column for label/value metadata rows.
Table
Tabular data display with optional sorting, paging, and detail rows.
Visualization
19 components · Charts, graphs and scenes drawn from series and topology.
Camera
Semantic view-intent hint for a Scene (mode + focus target); position and animation are renderer-owned.
Candle
OHLCV candle chart with a volume band; bars carry open/high/low/close/volume per period.
Canvas
Renderer slot for 2D, WebGL, or WebGPU output.
Chart
Multi-series line or area chart with grid lines and legend.
ClientIsland
SSR fallback shell for browser-only components loaded from a client bundle.
Graph
Graph renderer for nodes and edges.
Heightfield
Scrolling grid surface with per-axis semantics (x=scroll, z=buckets, y=value) and a retained column window.
HyperEdge3D
One n-ary relation over an authoritative member SET of Node3D ids; optional ordered parts preserve offer/want or hop semantics without pairwise expansion.
MapView
Interactive Mercator tile map with support for routes and custom overlays.
Marker3D
Point event addressed to a surface cell (column + bucket); the renderer maps its kind to an effect.
Node3D
One topology vertex in a Scene (id + kind hue + weight magnitude); positions are renderer-owned, never grammar-carried.
NodeGraph
Compatibility wrapper for simple source-target node graphs — each edge is a 2-member hyperedge through the same SSR primitive.
NodeHypergraph
Interactive node-and-relation canvas for graph, hypergraph, route, and trace views.
PriceChart
Price chart with indicator overlays, stacked sub-panes, compare series, drawings, candle/ohlc/line/area styles and a linear or log price axis; bars carry t/o/h/l/c/v per period, overlays and panes carry already-computed series aligned to the bars.
Scene
Root of a 3D data-surface subtree: camera hint, heightfield surfaces, point-event markers.
Series3D
Windowed columns-by-buckets data channel; live updates append new columns with a monotonic index over the view patch lane.
Sparkline
Miniature line chart showing a simple trend or history.
VirtualSceneWorkbench
Scene viewport, hierarchy, and inspector for durable Virtual scene documents.
VirtualWorldCanvas
WebGPU world renderer for virtual entities. Auto-detects WASM or HTTP data source.
Feedback
7 components · Status, progress and messages about what the runtime is doing.
Banner
Persistent inline notification bar.
EmptyState
What a list, table or page shows when it has nothing yet: a short title, an optional explanation, and optional next actions as children.
ErrorMessage
Accessible error summary.
Pill
Outlined, tinted status chip. Intent picks a theme tone; color gives a categorical hue. Badge is the filled chip for the same job on primitive surfaces.
Progress
Progress indicator with accessible range semantics.
Skeleton
Loading-state placeholder that mimics the shape of content.
Toast
Transient notification with optional auto-dismiss and close affordance.
Overlay
3 components · Dialogs, sheets and notices layered above the page.
BottomSheet
Focus-managed bottom sheet for compact-screen creation and action flows.
Drawer
Slide-in modal panel with placement (left|right), backdrop, and dismiss affordance. Open state is declarative until the WASM hydrator gains a drawer arm.
Modal
Focus-managed dialog with backdrop and dismiss affordances.