Build Dynamic Forms with SpringBoot and JSON Schema: A Complete Guide

Developers often face dynamic form requirements in SaaS products or legacy internal systems that need rapid adaptation. Using a JSON Schema together with SpringBoot provides a simple, contract‑first solution for CRUD‑style dynamic forms, questionnaires, and personalized data collection.

What Is JSON Schema and What Can It Do?

JSON Schema is a JSON‑based specification that describes the structure, types, and validation rules of another JSON document. It acts as a contract: the backend validates incoming data against the schema, and the frontend can automatically generate UI components from it.

Why Are Dynamic Forms Hard?

Unknown Structure : Field names, types, and validation rules are only known at runtime.

Data Binding : Adding, removing, or nesting fields can cause UI re‑render issues.

Validation Synchronization : Frontend and backend must share the same validation logic to avoid inconsistencies.

Minimal Closed‑Loop Implementation

The stack used in this example is SpringBoot, JSON Schema, MySQL, and Vue3.

Backend Entity

@Entity
@Data
public class DynForm {
    private String id;
    private String name;
    @Column(columnDefinition = "text")
    private String schema; // stores the whole JSON Schema
}

Backend Controller

@RestController
@RequestMapping("/form")
@RequiredArgsConstructor
public class FormController {
    private final DynFormRepository repo;

    // Get the latest schema
    @GetMapping("/{id}/schema")
    public Map<String,Object> getSchema(@PathVariable String id) throws IOException {
        return new ObjectMapper().readValue(repo.findById(id).getSchema(), Map.class);
    }

    // Receive and validate submitted data
    @PostMapping("/{id}/submit")
    public String submit(@PathVariable String id, @RequestBody Map data) {
        String schema = repo.findById(id).getSchema();
        JsonSchemaFactory factory = JsonSchemaFactory.getInstance(SpecVersion.VersionFlag.V201909);
        JsonSchema jsonSchema = factory.getSchema(schema);
        Set<ValidationMessage> errors = jsonSchema.validate(new ObjectMapper().valueToTree(data));
        if (!errors.isEmpty()) throw new RuntimeException(errors.toString());
        repo.saveData(id, data); // persist the data
        return "ok";
    }
}

The controller relies on the json-schema-validator library (version 1.4.0) and Jackson for JSON processing. Relevant Maven dependencies are shown below.

<dependencies>
    <!-- Spring Boot Starter Web -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>

    <!-- JSON Schema Validation -->
    <dependency>
        <groupId>com.networknt</groupId>
        <artifactId>json-schema-validator</artifactId>
        <version>1.4.0</version>
    </dependency>

    <!-- Jackson for JSON processing -->
    <dependency>
        <groupId>com.fasterxml.jackson.core</groupId>
        <artifactId>jackson-databind</artifactId>
    </dependency>

    <!-- Lombok (optional) -->
    <dependency>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
        <optional>true</optional>
    </dependency>
</dependencies>

Frontend Rendering

Install the JSON Forms Vue bindings:

npm install @jsonforms/vue @jsonforms/vue-vanilla

Component example (Vue3):

<template>
  <json-forms :data="formData" :schema="schema" :uischema="uischema" @change="formData = $event.data"/>
</template>

<script setup>
import { JsonForms } from '@jsonforms/vue';
import { ref, onMounted } from 'vue';
import axios from 'axios';

const schema = ref({});
const uischema = ref({});
const formData = ref({});

onMounted(async () => {
  const res = await axios.get('/form/1/schema');
  schema.value = res.data;
});
</script>

With this setup, adding a field, changing an enum, or adding validation only requires updating the stored JSON Schema; the frontend UI updates automatically.

Advanced Usage

Visual Builder Integration : Connect low‑code form builders (e.g., FormMaking, amis) to generate schemas without code.

Version Management : Add a version field to the schema to keep old and new forms side‑by‑side for gradual rollout.

Multi‑Platform Support : The same schema can drive forms in web, H5, and mini‑programs, reducing backend changes.

Workflow Engine : Combine with a workflow or rule engine to turn the schema‑driven form into a full low‑code solution.

Conclusion

JSON Schema provides a concise, contract‑first way to build dynamic forms that are easy to maintain, validate, and render across multiple frontends. While not a silver bullet, it dramatically reduces the effort required when requirements change, allowing backend developers to update a single JSON document and letting the frontend adapt automatically.