Tre elementi

JSON Schema

Campi, tipi e obbligatori. Elementi opzionali come upload, mappa o valori calcolati si aggiungono quando servono.

Schema UI

Layout, stepper, gruppi ed etichette — separati dal modello dati, modificabili con drag & drop.

Dati del modulo

L’oggetto JSON compilato, collegato alla vostra applicazione o API.

Già incluso

Editor visuale

Modifica schema e layout nel browser — palette, drag & drop e suggerimenti per campi liberi.

Campi calcolati

Compila somme o stati automaticamente. Imposta campi in sola lettura o nascosti se serve.

File e mappe

Upload con anteprima o disegno sulla mappa — da provare negli scenari.

Formati e selezioni

E-mail, telefono, data, elenchi — più valutazione, barra di avanzamento ed etichette multilingue.

Iniziare in quattro passi

Installare i pacchetti

In questo monorepo esegui pnpm install alla root. Nel tuo progetto aggiungi i pacchetti @jsonschema-editor/* necessari.

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

2
Registrare le estensioni
Basta una chiamata: formati, elenchi, campi calcolati, upload, mappa, valutazione e barra di avanzamento.
```
import { registerDefaultVueExtensions } from "@jsonschema-editor/vue-extensions";

registerDefaultVueExtensions();
```

Caricare schema e UI

documentFromJSONWithExtensions() conserva gli attributi di estensione. Carica uno schema UI o generane uno dallo schema.

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
Renderizzare il modulo
JsonSchemaForm lega i dati con v-model. JsonSchemaFormEditor modifica schema e layout nello stesso modello.
```
<JsonSchemaForm
  v-model="formData"
  :schema="schema"
  :ui-schema="uiSchema"
  locale="it"
/>
```

Pacchetti in sintesi

@jsonschema-editor/json-schemaModello schema, validazione, percorsi

@jsonschema-editor/json-schema-extensionsFormati, elenchi, x-computed, x-file, x-geometry, …

@jsonschema-editor/ui-schemaTipi schema UI e bridge

@jsonschema-editor/vueModulo ed editor visuale

@jsonschema-editor/vue-extensionsWidget per le estensioni

Scenari popolari

Provare subito

Negli scenari trovi moduli pronti — dalla prevenzione e dai sinistri alla logistica, ai progetti edili e al configuratore. Prova il modulo, modifica schema e layout, segui il JSON in tempo reale.