Components Overview
All globally registered components — ProtoTool, ProtoCrudModal, ProtoForm, ProtoDebugPanel, field components, and visualization components.
Components Overview
All components are globally auto-imported by the module. No manual import is needed.
Main components
| Component | Description |
|---|---|
ProtoTool | Full tool renderer — form + results + viz + CRUD. Use this for most cases. |
ProtoForm | Form fields only — renders fields or sections from the schema. |
ProtoCrudList | CRUD list/table for a single collection. |
ProtoCrudModal | Modal editor for a single collection item, with draft persistence. |
ProtoStatGrid | Displays results.stats as a responsive card grid. |
ProtoViz | Renders a single visualization by index. |
ProtoCard | Renders a single schema card definition. |
ProtoActionBar | Toolbar with copy/export/reset action buttons. |
ProtoDebugPanel | Dev-only slideover showing Y.js sync state for all active docs. |
ProtoCorruptionModal | Non-dismissible modal shown when IndexedDB corruption is detected. |
Field components (internal)
These are used inside ProtoForm and are not normally referenced directly. They are globally registered in case you need to use them in custom UIs.
| Component | Renders |
|---|---|
ProtoFieldText | <UInput type="text"> |
ProtoFieldNumber | <UInput type="number"> |
ProtoFieldTextarea | <UTextarea> |
ProtoFieldSelect | <USelect> |
ProtoFieldSegmented | <UToggleGroup> / button group |
ProtoFieldToggle | <UToggle> |
ProtoFieldRange | <URange> / <input type="range"> |
ProtoFieldRating | Star rating buttons |
ProtoFieldColor | <input type="color"> |
ProtoFieldDate | <UInput type="date"> |
ProtoFieldTags | Tag input with chip display |
ProtoFieldLinkedResponses | Per-question textarea grid |
Visualization components (internal)
| Component | Renders |
|---|---|
VizProgressBar | progress visualization type |
VizBenchmarkBar | benchmark visualization type |
VizBarChart | bar-chart visualization type |
VizComparisonTable | comparison-table visualization type |
VizFeatureMatrix | feature-matrix visualization type |
VizTimeline | timeline visualization type |
Key component pages
useProtoCollection
High-level CRUD composable for Y.Array-backed collection lists — reactive items, add/update/remove/move, search, sort, and item count.
ProtoTool
The top-level tool rendering component. Accepts a schema and an optional doc-key, renders the full tool UI, and handles all Y.js plumbing internally.
