Три складові

JSON Schema

Поля, типи та обов’язковість. За потреби — завантаження файлів, карта або обчислювані значення.

Схема UI

Макет, stepper, групи та мітки — окремо від моделі даних, з drag & drop у редакторі.

Дані форми

Заповнений JSON-об’єкт, пов’язаний із вашим додатком або API.

Уже вбудовано

Візуальний редактор

Налаштуйте схему та макет у браузері — палітра, drag & drop і підказки вільних полів.

Обчислювані поля

Автоматично заповнюйте суми чи статус. За потреби — лише читання або приховати.

Файли та карти

Завантаження з переглядом або малювання на карті — спробуйте в сценаріях.

Формати та списки

E-mail, телефон, дата, списки — плюс рейтинг, індикатор прогресу та багатомовні мітки.

Старт за чотири кроки

1
Встановити пакети
У цьому монорепозиторії достатньо pnpm install у корені. У власному проєкті додайте потрібні пакети @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
Зареєструвати розширення
Одного виклику достатньо: формати, списки, обчислювані поля, завантаження, карта, рейтинг і індикатор прогресу.
```
import { registerDefaultVueExtensions } from "@jsonschema-editor/vue-extensions";

registerDefaultVueExtensions();
```

Завантажити схему та UI

documentFromJSONWithExtensions() зберігає атрибути розширень. Завантажте схему UI або згенеруйте її зі схеми.

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
Відрендерити форму
JsonSchemaForm зв’язує дані через v-model. JsonSchemaFormEditor редагує схему та макет у тій самій моделі.
```
<JsonSchemaForm
  v-model="formData"
  :schema="schema"
  :ui-schema="uiSchema"
  locale="uk"
/>
```

Пакети коротко

@jsonschema-editor/json-schemaМодель схеми, валідація, шляхи

@jsonschema-editor/json-schema-extensionsФормати, списки, x-computed, x-file, x-geometry, …

@jsonschema-editor/ui-schemaТипи схеми UI і bridge

@jsonschema-editor/vueФорма та візуальний редактор

@jsonschema-editor/vue-extensionsВіджети для розширень

Спробувати одразу

У сценаріях є готові форми — від профілактики та страхових заявок до логістики, будівельних проєктів і конфігуратора. Тестуйте форму, редагуйте схему й макет, стежте за JSON наживо.

Перші кроки