Trzy elementy

JSON Schema

Pola, typy i wymagania. Opcjonalne elementy jak upload, mapa lub wartości obliczane — gdy ich potrzebujesz.

Schemat UI

Układ, stepper, grupy i etykiety — osobno od modelu danych, z drag & drop w edytorze.

Dane formularza

Wypełniony obiekt JSON, powiązany z aplikacją lub API.

Już w zestawie

Edytor wizualny

Dostosuj schemat i układ w przeglądarce — paleta, drag & drop i propozycje wolnych pól.

Pola obliczane

Automatycznie uzupełniaj sumy lub status. Pola tylko do odczytu lub ukryte — gdy trzeba.

Pliki i mapy

Upload z podglądem lub rysowanie na mapie — do wypróbowania w scenariuszach.

Formaty i listy

E-mail, telefon, data, listy — plus ocena, pasek postępu i wielojęzyczne etykiety.

Start w czterech krokach

Zainstaluj pakiety

W tym monorepo wystarczy pnpm install w katalogu głównym. We własnym projekcie dodaj potrzebne pakiety @jsonschema-editor/*.

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

2
Zarejestruj rozszerzenia
Jedno wywołanie włącza formaty, listy, pola obliczane, upload, mapę, ocenę i pasek postępu.
```
import { registerDefaultVueExtensions } from "@jsonschema-editor/vue-extensions";

registerDefaultVueExtensions();
```

Wczytaj schemat i UI

documentFromJSONWithExtensions() zachowuje atrybuty rozszerzeń. Wczytaj schemat UI lub wygeneruj go ze schematu.

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
Wyrenderuj formularz
JsonSchemaForm wiąże dane przez v-model. JsonSchemaFormEditor edytuje schemat i układ w tym samym modelu.
```
<JsonSchemaForm
  v-model="formData"
  :schema="schema"
  :ui-schema="uiSchema"
  locale="pl"
/>
```

Pakiety w skrócie

@jsonschema-editor/json-schemaModel schematu, walidacja, ścieżki

@jsonschema-editor/json-schema-extensionsFormaty, listy, x-computed, x-file, x-geometry, …

@jsonschema-editor/ui-schemaTypy schematu UI i bridge

@jsonschema-editor/vueFormularz i edytor wizualny

@jsonschema-editor/vue-extensionsWidgety dla rozszerzeń

Popularne scenariusze

Wypróbuj od razu

W scenariuszach są gotowe formularze — od badań i szkód, przez spedycję i projekty budowlane, po konfigurator pojazdu. Testuj formularz, edytuj schemat i układ, śledź JSON na żywo.