@banclo/jsonforms-ui

Vue 3 drag-and-drop form builder UI components built with shadcn-vue and Tailwind CSS.

Installation

npm install @banclo/jsonforms-ui @banclo/jsonforms-core
# or
pnpm add @banclo/jsonforms-ui @banclo/jsonforms-core

What's Included

Main Components

• FormBuilder — Complete form builder with palette, canvas, and property panel
• FormBuilderProvider — Wraps FormBuilder with Pinia and registry setup, emits v-model with generated schemas

Palette

• ComponentPalette — Sidebar listing available components grouped by category
• PaletteGroup / PaletteItem — Individual palette sections and draggable items

Canvas

• BuilderCanvas — Drop target where the form tree is rendered
• CanvasNode — Renders a single node with selection, drag handles, and drop zones
• CanvasToolbar — Per-node actions (delete, duplicate, move)

Properties

• PropertyPanel — Right sidebar for editing selected node properties
• SchemaPropertyEditor / UISchemaPropertyEditor — JSON Schema and UI Schema property editors
• ValidationEditor / RuleEditor — Validation constraints and conditional visibility rules

Composables

• useDragDrop — Drag-and-drop logic for palette-to-canvas and canvas reordering
• useKeyboardShortcuts — Keyboard shortcuts (delete, undo/redo, copy/paste)
• useDarkMode — Dark mode toggle with system preference detection

Basic Usage

<script setup>
import { FormBuilderProvider } from '@banclo/jsonforms-ui'
import '@banclo/jsonforms-ui/styles'
import { ref } from 'vue'

const schemas = ref({ jsonSchema: {}, uiSchema: {} })
</script>

<template>
  <FormBuilderProvider v-model="schemas" />
</template>

Styles

Import the global stylesheet for Tailwind and shadcn-vue styles:

import '@banclo/jsonforms-ui/styles'

License

MIT