VueJsonForm

Automatically generates forms from a JSON schema and an optional UI schema.

• Documentation
• Demo

Packages

This monorepo contains several packages that make up VueJsonForm:

@educorvi/vue-json-form

The main Vue.js component for rendering JSON Schema-based forms.

View Package Documentation →

@educorvi/vue-json-form-webcomponent

A standalone web component wrapper for VueJsonForm. Use it in any HTML page without Vue.js.

View Package Documentation →

@educorvi/vue-json-form-schemas

JSON Schema definitions and TypeScript types for VueJsonForm. Contains the UI schema specification.

View Package Documentation →

@educorvi/vue-json-form-ajv-validator

Ajv-based validator for VueJsonForm that validates the schemas passed as props.

View Package Documentation →

Quick Start

Install the main package:

npm install @educorvi/vue-json-form

Basic usage example:

<script setup lang="ts">
import { VueJsonForm, bootstrapComponents } from '@educorvi/vue-json-form';
import '@educorvi/vue-json-form/dist/vue-json-form.css';

const jsonSchema = {
    type: 'object',
    properties: {
        name: { type: 'string' },
        email: { type: 'string', format: 'email' },
    },
    required: ['name', 'email'],
};

const uiSchema = {
    type: 'VerticalLayout',
    elements: [
        { type: 'Control', scope: '#/properties/name' },
        { type: 'Control', scope: '#/properties/email' },
    ],
};

function handleSubmit(data: Record<string, any>) {
    console.log('Form submitted:', data);
}
</script>

<template>
    <vue-json-form
        :jsonSchema="jsonSchema"
        :uiSchema="uiSchema"
        :onSubmitForm="handleSubmit"
        :renderInterface="bootstrapComponents"
    />
</template>

Note: Bootstrap 5 is required. See the full documentation for detailed setup instructions.

Development

Project setup

yarn install

Type-Check and Build for Production

yarn run build

Generate Documentation

yarn run doc

Requires Python package json-schema-for-humans.

License

MIT