Три составляющие

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="ru"
/>
```

Пакеты кратко

@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 в реальном времени.

Первые шаги