3つの構成要素

JSON Schema

フィールド、型、必須項目。必要ならアップロード、地図、計算フィールドなどの任意機能を追加できます。

UI スキーマ

レイアウト、ステッパー、グループ、ラベル — データモデルとは分離し、エディターでドラッグ＆ドロップ編集。

フォームデータ

入力済みの JSON オブジェクト。アプリや API にバインドします。

すでに含まれています

ビジュアルエディター

ブラウザでスキーマとレイアウトを調整 — パレット、ドラッグ＆ドロップ、未使用フィールドの提案。

計算フィールド

合計やステータスを自動入力。必要なら読み取り専用や非表示にもできます。

ファイルと地図

プレビュー付きアップロードや地図上の描画 — シナリオで試せます。

形式と選択

メール、電話、日付、リスト — さらに評価、プログレスバー、多言語ラベル。

4 ステップで開始

パッケージをインストール

このモノレポではルートで 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="ja"
/>
```

パッケージ一覧

@jsonschema-editor/json-schemaスキーマモデル、検証、パス

@jsonschema-editor/json-schema-extensions形式、リスト、x-computed、x-file、x-geometry、…

@jsonschema-editor/ui-schemaUI スキーマ型と Bridge

@jsonschema-editor/vueフォームとビジュアルエディター

@jsonschema-editor/vue-extensions拡張用ウィジェット

すぐ試す

シナリオには完成済みフォームがあります — 健診や保険請求から物流、建築プロジェクト、車両コンフィギュレーターまで。フォームを試し、スキーマとレイアウトを編集し、JSON をライブで確認。

はじめに