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 } 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"
  />
</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