Trois briques

JSON Schema

Champs, types et champs obligatoires. Des briques optionnelles comme l’upload, la carte ou les valeurs calculées s’ajoutent si besoin.

Schéma UI

Disposition, stepper, groupes et libellés — séparés du modèle de données, ajustables par glisser-déposer.

Données du formulaire

L’objet JSON rempli, lié à votre application ou API.

Déjà inclus

Éditeur visuel

Ajustez schéma et disposition dans le navigateur — palette, glisser-déposer et suggestions de champs libres.

Champs calculés

Remplissez sommes ou statuts automatiquement. Rendez les champs en lecture seule ou masqués si besoin.

Fichiers et cartes

Téléversement avec aperçu ou dessin sur une carte — à essayer dans les scénarios.

Formats et listes

E-mail, téléphone, date, listes — plus notation, barre de progression et libellés multilingues.

Démarrer en quatre étapes

Installer les paquets

Dans ce monorepo, lancez pnpm install à la racine. Dans votre projet, ajoutez les paquets @jsonschema-editor/* nécessaires.

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

2
Enregistrer les extensions
Un appel suffit : formats, listes, champs calculés, téléversement, carte, notation et barre de progression.
```
import { registerDefaultVueExtensions } from "@jsonschema-editor/vue-extensions";

registerDefaultVueExtensions();
```

Charger le schéma et l’UI

documentFromJSONWithExtensions() conserve les attributs d’extension. Chargez un schéma UI ou générez-le depuis le schéma.

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
Afficher le formulaire
JsonSchemaForm lie les données avec v-model. JsonSchemaFormEditor modifie schéma et disposition dans le même modèle.
```
<JsonSchemaForm
  v-model="formData"
  :schema="schema"
  :ui-schema="uiSchema"
  locale="fr"
/>
```

Paquets en un coup d’œil

@jsonschema-editor/json-schemaModèle de schéma, validation, chemins

@jsonschema-editor/json-schema-extensionsFormats, listes, x-computed, x-file, x-geometry, …

@jsonschema-editor/ui-schemaTypes de schéma UI et bridge

@jsonschema-editor/vueFormulaire et éditeur visuel

@jsonschema-editor/vue-extensionsWidgets pour les extensions

Scénarios populaires

Essayer tout de suite

Les scénarios proposent des formulaires prêts à l’emploi — de la prévention et des sinistres à la logistique, aux projets de construction et au configurateur. Testez, éditez schéma et disposition, suivez le JSON en direct.