@banclo/jsonforms-preview

@banclo/jsonforms-preview

Live form preview panel that renders JSON Forms schemas using pluggable adapters.

Installation

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

What's Included

Components

• PreviewPanel — Renders a live form from JSON Schema + UI Schema using an adapter
• PreviewDialog — Modal wrapper around PreviewPanel
• PreviewDataViewer — Displays the form's current data as JSON

Adapters

• vanillaAdapter — Built-in adapter using @jsonforms/vue-vanilla
• Vuetify adapter — Optional, lazy-loaded to keep Vuetify as an optional dependency

Utilities

• mergeRenderers — Combine custom renderers with an adapter's built-in renderers

Basic Usage

<script setup>
import { PreviewPanel, vanillaAdapter } from '@banclo/jsonforms-preview'

const jsonSchema = { type: 'object', properties: { name: { type: 'string' } } }
const uiSchema = { type: 'VerticalLayout', elements: [{ type: 'Control', scope: '#/properties/name' }] }
</script>

<template>
  <PreviewPanel
    :json-schema="jsonSchema"
    :ui-schema="uiSchema"
    :adapter="vanillaAdapter"
  />
</template>

Vuetify Adapter

The Vuetify adapter is lazy-loaded to keep vuetify optional:

const { createVuetifyAdapter } = await import('@banclo/jsonforms-preview/adapters/vuetify-adapter')
const adapter = createVuetifyAdapter()

License

MIT