jsonschema-builder-vue

JSON Schema Builder (Vue)

A modern, Vue 3 + PrimeVue visual JSON Schema editor for creating and manipulating JSON Schema definitions with an intuitive interface.

Note: This project is a fork of jsonjoy-builder by Ophir LOJKINE, rewritten from React to Vue 3 + PrimeVue.

Live Demo: https://gcasotti.github.io/jsonschema-builder-vue

Repository: https://github.com/gcasotti/jsonschema-builder-vue

Features

• Visual Schema Editor: Design your JSON Schema through an intuitive interface without writing raw JSON
• Real-time JSON Preview: See your schema in JSON format as you build it visually
• Schema Inference: Generate schemas automatically from existing JSON data
• JSON Validation: Test JSON data against your schema with detailed validation feedback
• Responsive Design: Fully responsive interface that works on desktop and mobile devices

Getting Started

Installing

npm install jsonschema-builder-vue

Also install vue if you haven't done so yet.

Then use like this:

<script setup lang="ts">
import "jsonschema-builder-vue/styles.css";
import { type JSONSchema, SchemaVisualEditor } from "jsonschema-builder-vue";
import { ref } from "vue";

const schema = ref<JSONSchema>({});
</script>

<template>
  <div>
    <SchemaVisualEditor :schema="schema" @change="schema = $event" />
  </div>
</template>

Theming

The library uses PrimeVue's styled theming system. Out of the box, four presets are available:

Setup

Pass a preset when installing PrimeVue:

import PrimeVue from "primevue/config";
import { auraPreset } from "jsonschema-builder-vue";

app.use(PrimeVue, { theme: { preset: auraPreset } });

Runtime theme switching

Use the useTheme composable anywhere inside a component tree with PrimeVue installed:

<script setup lang="ts">
import { useTheme } from "jsonschema-builder-vue";

const { switchPreset, toggleDarkMode, currentPreset, darkMode } = useTheme();

// Switch to Material Design
switchPreset("material");

// Toggle dark mode
toggleDarkMode();
</script>

Custom CSS variables

All design tokens are scoped under .jscb and prefixed with --jscb-*. You can override them to fine-tune the look:

Dark mode is toggled by adding the .jscb-dark class to <html>:

// Use the built-in composable
const { toggleDarkMode, darkMode } = useTheme();
toggleDarkMode();       // toggle
toggleDarkMode(true);   // force dark

PrimeVue's darkModeSelector must match:

app.use(PrimeVue, {
  theme: {
    preset: auraPreset,
    options: { darkModeSelector: ".jscb-dark" },
  },
});

Localization

By default, the editor uses English. To localize, use provideTranslation in a parent component:

<script setup lang="ts">
import "jsonschema-builder-vue/styles.css";
import { type JSONSchema, SchemaVisualEditor, provideTranslation, de } from "jsonschema-builder-vue";
import { ref } from "vue";

const lang = ref(de);
provideTranslation(lang);
const schema = ref<JSONSchema>({});
</script>

<template>
  <SchemaVisualEditor :schema="schema" @change="schema = $event" />
</template>

Currently we have localizations for English, German, French, Italian, Polish, Russian, Ukrainian, Spanish and Chinese. You can define your own translation like this. If you do, consider opening a PR with the translations!

import { type Translation } from "jsonschema-builder-vue";

const es: Translation = {
	// add translations here (see type Translation for the available keys and default values)
};

See also the English localizations file for the default localizations.

Monaco Editor (optional)

The JsonSchemaEditor, JsonSchemaVisualizer, JsonValidator, and SchemaInferencer components include an embedded Monaco Editor for JSON editing. Monaco is an optional peer dependency — you only need it if you use those components.

If you only use SchemaVisualEditor, you do NOT need Monaco.

1. Install

npm install monaco-editor

2. Configure workers

Monaco requires web workers to function. Configure them once in your app's entry point:

Vite:

// main.ts
import EditorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
import JsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";

(self as any).MonacoEnvironment = {
  getWorker(_workerId: string, label: string) {
    if (label === "json") return new JsonWorker();
    return new EditorWorker();
  },
};

Webpack 5:

// main.ts
(self as any).MonacoEnvironment = {
  getWorker(_workerId: string, label: string) {
    if (label === "json") {
      return new Worker(
        new URL("monaco-editor/esm/vs/language/json/json.worker.js", import.meta.url),
      );
    }
    return new Worker(
      new URL("monaco-editor/esm/vs/editor/editor.worker.js", import.meta.url),
    );
  },
};

That's it — the library handles everything else automatically.

Development

git clone https://github.com/gcasotti/jsonschema-builder-vue.git
cd jsonschema-builder-vue
npm install

Start the development server:

npm run dev

The demo application will be available at http://localhost:8080

Building for Production

Build this library for production:

npm run build

The built files will be available in the dist directory.

Project Architecture

Core Components

• JsonSchemaEditor: The main component that provides tabs for switching between visual and JSON views
• SchemaVisualEditor: Handles the visual representation and editing of schemas
• JsonSchemaVisualizer: Provides JSON view with Monaco editor for direct schema editing
• SchemaInferencer: Dialog component for generating schemas from JSON data
• JsonValidator: Dialog component for validating JSON against the current schema

Key Features

Schema Inference

The SchemaInferencer component can automatically generate JSON Schema definitions from existing JSON data. This feature uses a recursion-based inference system to detect:

• Object structures and properties
• Array types and their item schemas
• String formats (dates, emails, URIs)
• Numeric types (integers vs. floats)
• Required fields

JSON Validation

Validate any JSON document against your schema with:

• Real-time feedback
• Detailed error reporting
• Format validation for emails, dates, and other special formats

Technology Stack

• Vue 3: UI framework (Composition API, <script setup>)
• PrimeVue: Component library with built-in theming (Aura, Material, Nora, Lara presets)
• TypeScript: Type-safe development
• Vite: Build tool (library mode) and development server
• Monaco Editor: Code editor for JSON viewing/editing (optional peer dependency, lazy-loaded)
• Ajv: JSON Schema validation
• Zod: Type-safe json parsing in ts
• Lucide Vue Next: Icon library
• Vitest: Unit and component testing

Development Scripts

License

This project is licensed under the MIT License - see the LICENSE file for details.

Author

@gcasotti

Acknowledgements

This project is a Vue 3 port of jsonjoy-builder, originally created by Ophir LOJKINE (@lovasoa). Thanks for the excellent work on the original project!