Form Builder

Installation

pnpm dlx @docyrus/cli add @docyrus/ui-form-builder

pnpm add @dnd-kit/core @dnd-kit/sortable nanoid

npx shadcn@latest add button input label switch select tabs scroll-area collapsible

Usage

import { FormBuilder } from "@docyrus/ui/components/form-builder";

export function FormBuilderPage() {
  return (
    <div className="h-[720px]">
      <FormBuilder />
    </div>
  );
}

The component fills its parent (flex h-full flex-col), so wrap it in a sized container or pass a className with explicit dimensions.

Reading builder state

useBuilderContext is exposed for consumers that want to render their own toolbar, persist drafts, or react to selection. It must be used inside a <BuilderProvider>, which <FormBuilder> already renders internally — to read state from outside the default UI, render <BuilderProvider> yourself and place <FormBuilder> (or its sub-components) underneath.

import {
  BuilderProvider,
  useBuilderContext
} from "@docyrus/ui/components/form-builder";

function FieldCount() {
  const { state } = useBuilderContext();

  return <span>{state.fields.length} fields</span>;
}

Built-in field types

The palette ships with 9 categories covering 30+ field types from the Docyrus form-fields library. Each type maps to a DynamicFormField renderer, so what users build in the canvas is exactly what they get at runtime.

Code export

Switch the toolbar's view mode to Code to render generated TSX for the current form. Four templates are available:

The generated code uses user-project import paths (@/components/docyrus/form-fields, @/components/ui/button) so it drops straight into a project that has installed @docyrus/ui-form-fields and the matching shadcn primitives. Adjust the prefix if your project uses a different alias.

API Reference

<FormBuilder>

useBuilderContext()

Returns the live builder state and dispatchers. Throws if called outside a <BuilderProvider>.

<BuilderProvider>

Wraps children in the builder reducer and 50-step history; rendered automatically by <FormBuilder>. Accepts children plus the same initialState / onChange / persist / persistKey contract as <FormBuilder>.

Components

Type Exports