Three building blocks

JSON Schema

Fields, types, and required properties. Optional pieces like uploads, maps, or computed values are available when you need them.

UI schema

Layout, steppers, groups, and labels — separate from the data model, editable with drag & drop.

Form data

The filled JSON object, bound to your application or API.

Already included

Visual editor

Edit schema and layout in the browser — palette, drag & drop, and suggestions for unused fields.

Computed fields

Fill sums or status automatically. Make fields read-only or hidden when needed.

Files & maps

Uploads with preview, or drawing on a map — try them in the scenarios.

Formats & selects

Email, phone, date, lists — plus rating, progress bar, and multilingual labels.

Start in four steps

Install packages

In this monorepo, run pnpm install at the repository root. In your own app, add the @jsonschema-editor/* packages you need.

pnpm add @jsonschema-editor/vue @jsonschema-editor/vue-extensions \
  @jsonschema-editor/json-schema @jsonschema-editor/json-schema-extensions \
  @jsonschema-editor/ui-schema

2
Register extensions
One call enables formats, value lists, computed fields, file upload, maps, rating, and progress bar.
```
import { registerDefaultVueExtensions } from "@jsonschema-editor/vue-extensions";

registerDefaultVueExtensions();
```

Load schema and UI

documentFromJSONWithExtensions() keeps extension attributes. Load a UI schema or generate one from the schema.

import { documentFromJSONWithExtensions } from "@jsonschema-editor/json-schema-extensions";
import { UiSchema } from "@jsonschema-editor/ui-schema/bridge";

const schema = documentFromJSONWithExtensions(schemaJson);
const uiSchema = UiSchema.fromJSON(uiSchemaJson);

4
Render the form
JsonSchemaForm binds data with v-model. JsonSchemaFormEditor edits schema and layout in the same model.
```
<JsonSchemaForm
  v-model="formData"
  :schema="schema"
  :ui-schema="uiSchema"
  locale="en"
/>
```

Packages at a glance

@jsonschema-editor/json-schemaSchema model, validation, paths

@jsonschema-editor/json-schema-extensionsFormats, lists, x-computed, x-file, x-geometry, …

@jsonschema-editor/ui-schemaUI schema types and bridge

@jsonschema-editor/vueForm and visual editor

@jsonschema-editor/vue-extensionsWidgets for the extensions

Popular scenarios

Try it now

The scenarios ship ready-made forms — from screening and insurance claims to freight, building projects, and vehicle configuration. Test the form, edit schema and layout, watch JSON update live.