JSON Form Builder

Appearance

Getting Started ​

JSON Form Builder is a Vue 3 component library that provides a drag-and-drop visual editor for building JSON Forms. It outputs standard JSON Schema and UI Schema that can be rendered by any JSON Forms renderer.

Prerequisites ​

  • Node.js 18 or later
  • pnpm 9 or later (recommended) -- npm and yarn also work
  • Vue 3.5+
  • Pinia for state management

Installation ​

Install the three packages that make up the builder:

bash
pnpm add @banclo/jsonforms-core @banclo/jsonforms-ui @banclo/jsonforms-preview

@banclo/jsonforms-core contains the state management, tree operations, and schema generation logic. @banclo/jsonforms-ui provides the visual builder components (palette, canvas, property panel, toolbar). @banclo/jsonforms-preview provides live form preview using JSON Forms renderer sets.

Setting Up Pinia ​

The builder stores (useBuilderStore, useHistoryStore, useClipboardStore) are Pinia stores. Register Pinia with your Vue app before using any builder components:

ts
// main.ts
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const app = createApp(App)
const pinia = createPinia()

app.use(pinia)
app.mount('#app')

Adding Tailwind CSS ​

The @banclo/jsonforms-ui package uses Tailwind CSS with the shadcn-vue design system. Make sure Tailwind is configured in your project:

bash
pnpm add -D tailwindcss @tailwindcss/vite

In your tailwind.config.ts, include the builder package in the content paths:

ts
// tailwind.config.ts
import type { Config } from 'tailwindcss'

export default {
  content: [
    './src/**/*.{vue,ts}',
    './node_modules/@banclo/jsonforms-ui/**/*.{vue,ts}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
} satisfies Config

Import Tailwind in your main CSS file:

css
/* src/assets/main.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Minimal Working Example ​

Here is the simplest possible setup for the form builder:

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

const store = useBuilderStore()

// React to schema changes
watch(
  () => store.jsonSchema,
  (schema) => {
    console.log('JSON Schema updated:', schema)
  },
  { deep: true },
)

watch(
  () => store.uiSchema,
  (schema) => {
    console.log('UI Schema updated:', schema)
  },
  { deep: true },
)
</script>

<template>
  <div style="height: 100vh">
    <FormBuilder />
  </div>
</template>

Try it out -- drag components from the palette on the left onto the canvas:

The FormBuilder component renders a three-column layout:

  1. Component Palette (left) -- draggable components organized by category
  2. Builder Canvas (center) -- the visual form layout with a toolbar
  3. Property Panel (right) -- edit properties of the selected element

Retrieving the Output ​

The builder stores generate JSON Schema and UI Schema reactively. You can access them at any time:

ts
import { useBuilderStore } from '@banclo/jsonforms-core'

const store = useBuilderStore()

// These are computed refs that update whenever the form tree changes
const jsonSchema = store.jsonSchema   // { type: 'object', properties: { ... } }
const uiSchema = store.uiSchema       // { type: 'VerticalLayout', elements: [...] }

// Or use the convenience method
const { jsonSchema, uiSchema } = store.exportSchema()

Next Steps ​