logowebsideproject

Components Overview

All globally registered components — ProtoTool, ProtoCrudModal, ProtoForm, ProtoDebugPanel, ProtoItemPanel variants, field components, and visualization components.

Components Overview

All components are globally auto-imported by the module. No manual import is needed.

Main components

ComponentDescription
ProtoToolFull tool renderer — form + results + viz + CRUD. Use this for most cases.
ProtoFormForm fields only — renders fields or sections from the schema.
ProtoCrudListCRUD list/table for a single collection.
ProtoCrudModalModal editor for a single collection item, with draft persistence.
ProtoStatGridDisplays results.stats as a responsive card grid.
ProtoVizRenders a single visualization by index.
ProtoCardRenders a single schema card definition.
ProtoActionBarToolbar with copy/export/reset action buttons.
ProtoDebugPanelDev-only slideover showing Y.js sync state for all active docs.
ProtoCorruptionModalNon-dismissible modal shown when IndexedDB corruption is detected.

Item panel components

Use these components to extend a collection item's detail view with specialized input and display panels. Each panel accepts a panelDef (the panel configuration), the current item, and an update emit for saving changes back to the CRDT.

ComponentDescription
ProtoItemPanelTextTemplateRenders template-generated text sections with per-section char counters, copy buttons, and a Regenerate action.
ProtoItemPanelTimeSeriesDate + metric snapshot form with a sortable history table showing the last seven entries.
ProtoItemPanelUrlInputSingle URL field with save-on-Enter and a Save button, emitting a patch via onConfirm or a direct field assignment.

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.

ComponentRenders
ProtoFieldText<UInput type="text">
ProtoFieldNumber<UInput type="number">
ProtoFieldTextarea<UTextarea>
ProtoFieldSelect<USelectMenu>
ProtoFieldSegmentedA group of <UButton>s
ProtoFieldToggle<USwitch>
ProtoFieldRange<input type="range"> with min / value / max labels
ProtoFieldRatingStar rating buttons
ProtoFieldColor<input type="color">
ProtoFieldDate<UInput type="date">
ProtoFieldTagsTag input with chip display
ProtoFieldLinkedResponsesPer-question textarea grid

Visualization components (internal)

ComponentRenders
VizProgressBarprogress visualization type
VizBenchmarkBarbenchmark visualization type
VizBarChartbar-chart visualization type
VizLineChartline-chart visualization type
VizAreaChartarea-chart visualization type
VizPieChartpie-chart and donut-chart visualization types
VizFunnelChartfunnel-chart visualization type
VizStatCardsstat-cards visualization type
VizComparisonTablecomparison-table visualization type
VizFeatureMatrixfeature-matrix visualization type
VizTimelinetimeline visualization type
VizCollectionCalendarA collection's items on a month / week calendar (a dashboard card with view: 'calendar')

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.

Need a Landing Page?

Modern landing pages with optional modules (blog, docs, forms, i18n). Let's discuss your project.

Build Your MVP

Full-stack SaaS development. Expert in database design, multi-tenancy, and scalable architecture.

Deployment Help

Dockerize your backend, set up CI/CD pipelines, deploy to Cloudflare or Hetzner. Early-stage setup.

Suggest a SaaS Tool

Missing a calculator or tool? Suggest what you'd like to see on our site.