Drei Bausteine

JSON Schema

Felder, Typen und Pflichtangaben. Optionale Bausteine wie Upload, Karte oder berechnete Werte kommen dazu — wenn Sie sie brauchen.

UI-Schema

Layout, Stepper, Gruppen und Labels — getrennt vom Datenmodell und im Editor per Drag & Drop anpassbar.

Formulardaten

Das ausgefüllte JSON-Objekt, gebunden an Ihre Anwendung oder API.

Bereits eingebaut

Visueller Editor

Schema und Layout im Browser anpassen — Palette, Drag & Drop und Vorschläge für freie Felder.

Berechnete Felder

Summen oder Status automatisch füllen. Felder bei Bedarf nur lesbar oder ausblenden.

Dateien & Karten

Upload mit Vorschau oder Zeichnen auf einer Karte — in den Szenarien zum Ausprobieren.

Formate & Auswahl

E-Mail, Telefon, Datum, Listen — plus Bewertung, Fortschrittsanzeige und mehrsprachige Labels.

In vier Schritten starten

Pakete installieren

Im Monorepo genügt pnpm install am Repository-Root. In eigenen Projekten die benötigten @jsonschema-editor/* Pakete hinzufügen.

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

2
Erweiterungen registrieren
Ein Aufruf reicht: Formate, Wertelisten, berechnete Felder, Datei-Upload, Karte, Bewertung und Fortschrittsbalken.
```
import { registerDefaultVueExtensions } from "@jsonschema-editor/vue-extensions";

registerDefaultVueExtensions();
```

Schema und UI laden

Mit documentFromJSONWithExtensions() bleiben die Erweiterungs-Attribute erhalten. Das UI-Schema laden oder aus dem Schema erzeugen.

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
Formular rendern
JsonSchemaForm bindet Daten per v-model. JsonSchemaFormEditor bearbeitet Schema und Layout im gleichen Modell.
```
<JsonSchemaForm
  v-model="formData"
  :schema="schema"
  :ui-schema="uiSchema"
  locale="de"
/>
```

Pakete im Überblick

@jsonschema-editor/json-schemaSchema-Modell, Validierung, Pfade

@jsonschema-editor/json-schema-extensionsFormate, Listen, x-computed, x-file, x-geometry, …

@jsonschema-editor/ui-schemaUI-Schema-Typen und Bridge

@jsonschema-editor/vueFormular und visueller Editor

@jsonschema-editor/vue-extensionsWidgets für die Erweiterungen

Beliebte Szenarien

Direkt ausprobieren

In den Szenarien finden Sie fertige Formulare — von Vorsorge und Schadenmeldung über Spedition und Bauprojekt bis Fahrzeugkonfigurator. Formular testen, Schema und Layout bearbeiten, JSON live mitverfolgen.