UI Components API Reference

@banclo/jsonforms-ui provides the visual builder components. The package exports Vue 3 single-file components styled with Tailwind CSS and the shadcn-vue design system.

FormBuilder

The main component that renders the complete three-panel builder interface.

Props

Prop	Type	Default	Description
modelValue	FormBuilderOutput	undefined	Optional v-model binding for the output schemas
previewAdapter	string	'jsonforms-vue-vanilla'	Which preview adapter to use for live preview

Events

Event	Payload	Description
update:modelValue	FormBuilderOutput	Emitted when the generated schemas change

FormBuilderOutput

interface FormBuilderOutput {
  jsonSchema: Record<string, unknown>
  uiSchema: Record<string, unknown>
}

Slots

The FormBuilder component does not expose named slots. Customization is done through CSS (see Theming) and by configuring the stores.

Usage

<script setup lang="ts">
import { ref } from 'vue'
import { FormBuilder, type FormBuilderOutput } from '@banclo/jsonforms-ui'

const output = ref<FormBuilderOutput>()
</script>

<template>
  <div style="height: 100vh">
    <FormBuilder v-model="output" />
  </div>
</template>

Layout

The component renders a CSS Grid with three columns:

[ComponentPalette (280px)] [BuilderToolbar + BuilderCanvas (1fr)] [PropertyPanel (320px)]

The builder must be given a height (e.g., height: 100vh or flex: 1 in a flex container) since it fills its container with h-full.

Responsive Behavior

At viewport widths below 768px, the three-column layout collapses to two columns. The PropertyPanel is hidden from the grid and instead rendered as a slide-over panel that appears from the right edge when a node is selected. This keeps the palette and canvas usable on smaller screens without sacrificing access to property editing.

FormBuilderProvider

A wrapper component that provides the component registry to the builder via Vue's provide/inject. Use this when you need to customize the registry before the builder mounts.

<template>
  <FormBuilderProvider :registry="myRegistry">
    <FormBuilder />
  </FormBuilderProvider>
</template>

ComponentPalette

The left panel showing draggable components organized by category.

Behavior

• Groups components by their manifest category field
• Provides a search input that filters by component name and category
• Each item is a drag source with data-manifest-id set to the manifest ID
• Items are rendered by PaletteGroup and PaletteItem sub-components

CSS Classes

Class	Element
.bg-card	Panel background
.border-r.border-border	Right border
.text-sm.font-semibold	"Components" heading

Sub-components

PaletteGroup

Renders a collapsible group of palette items with a category header.

Props:

Prop	Type	Description
title	string	Category name displayed as the group header
manifests	ComponentManifest[]	Manifests in this category

PaletteItem

Renders a single draggable palette item.

Props:

Prop	Type	Description
manifest	ComponentManifest	The manifest for this palette entry

Data Attributes:

Attribute	Value	Description
data-manifest-id	Manifest ID string	Used by drag handlers to identify what is being dragged

BuilderCanvas

The central area where the form layout is visually constructed.

Behavior

• Uses vue-draggable-plus (VueDraggable) for drag-and-drop
• Renders the root node's children as CanvasNode components
• Shows an empty state with a drop indicator when no elements are present
• Clicking the canvas background deselects the current node

CSS Classes

Class	Element
.builder-canvas	Canvas container
.bg-background	Canvas background
.border-2.border-dashed.border-border	Empty state drop zone

Sub-components

CanvasNode

Renders a single node on the canvas with selection highlighting, hover effects, and nested drag-drop zones for layout nodes.

Props:

Prop	Type	Description
node	SchemaNode	The node to render
depth	number	Nesting depth for indentation

Data Attributes:

Attribute	Value
data-node-type	The node's type (e.g., "HorizontalLayout", "Control")
data-canvas-node	Present on all canvas nodes

CanvasDropZone

Renders a drop target indicator between or inside canvas nodes.

BuilderToolbar

The toolbar above the canvas with common actions.

Actions

• Undo -- calls store.undo()
• Redo -- calls store.redo()
• Delete -- removes the selected node
• Duplicate -- duplicates the selected node
• Export -- exports the current JSON Schema and UI Schema

ImportModal

A dialog component triggered from the toolbar that allows importing existing JSON Schema and UI Schema definitions into the builder. It accepts pasted JSON and validates the input before applying it.

Props:

Prop	Type	Default	Description
open	boolean	false	Controls visibility of the modal

Events:

Event	Payload	Description
update:open	boolean	Emitted when the modal requests to close
import	{ jsonSchema: object, uiSchema: object }	Emitted with the parsed schemas on successful import

PropertyPanel

The right panel for editing the selected node's properties.

Behavior

• Shows a placeholder message when no node is selected
• Displays the node type and a form for editing properties:
  • Label -- text input for the node label
  • Property Name -- text input for the JSON Schema property name (controls only)
  • Schema Type -- dropdown for the JSON Schema type (controls only)
  • Validation -- constraint editors (minLength, maximum, pattern, etc.)
  • Options -- key-value editor for UI Schema options
  • Rules -- rule editor for conditional visibility

Tabs

The property panel organizes editors into tabs:

Tab	Contents
Properties	Label, property name, schema type
Validation	Type-specific constraints (string, number, array, object)
Rules	Rule effect and condition editors
JSON	Raw JSON view of the node

Composables

useKeyboardShortcuts

Registers global keyboard shortcuts for the builder. Called automatically by FormBuilder.

Shortcut	Action
Ctrl+Z / Cmd+Z	Undo
Ctrl+Shift+Z / Cmd+Shift+Z	Redo
Ctrl+Y / Cmd+Y	Redo (alternative)
Delete / Backspace	Delete selected node
Ctrl+D / Cmd+D	Duplicate selected node
Ctrl+C / Cmd+C	Copy selected node
Ctrl+X / Cmd+X	Cut selected node
Ctrl+V / Cmd+V	Paste clipboard content
Escape	Deselect

useDragDrop

Provides drag-and-drop event handlers used by BuilderCanvas and CanvasNode.

const { onDragAdd, onDragUpdate, onMoveNode } = useDragDrop()

Function	Description
onDragAdd(manifestId, parentId, index)	Handle a new item dropped from the palette
onDragUpdate(parentId, oldIndex, newIndex)	Handle reordering within a parent
onMoveNode(nodeId, newParentId, newIndex)	Move an existing node to a different parent and position

Return type:

interface DragDropReturn {
  onDragAdd: (manifestId: string, parentId: string, index: number) => void
  onDragUpdate: (parentId: string, oldIndex: number, newIndex: number) => void
  onMoveNode: (nodeId: string, newParentId: string, newIndex: number) => void
}