https://github.com/jonymusky/json-schema-playground

Prototype of a visual Form Builder that allows users to create and customize forms interactively, with support for generating JSON Schema and UI Schema outputs. Perfect for prototyping and integrating dynamic forms into applications.
https://github.com/jonymusky/json-schema-playground

json-schema-form json-schema-forms json-schema-generator nextjs react

Last synced: 28 days ago
JSON representation

Prototype of a visual Form Builder that allows users to create and customize forms interactively, with support for generating JSON Schema and UI Schema outputs. Perfect for prototyping and integrating dynamic forms into applications.

• Host: GitHub
• URL: https://github.com/jonymusky/json-schema-playground
• Owner: jonymusky
• Created: 2024-12-05T12:04:51.000Z (about 2 months ago)
• Default Branch: main
• Last Pushed: 2024-12-05T14:00:56.000Z (about 2 months ago)
• Last Synced: 2024-12-16T16:55:20.153Z (about 1 month ago)
• Topics: json-schema-form, json-schema-forms, json-schema-generator, nextjs, react
• Language: TypeScript
• Homepage: https://json-schema-playground.jonymusky.com/
• Size: 93.8 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# JSON Schema Playground

Welcome to the **JSON Schema Playground**, a powerful and intuitive tool for building, editing, and validating JSON Schema forms. This playground allows developers, designers, and non-technical users to visually create forms with advanced features and export both the JSON Schema and UI Schema for integration into their projects.

## 🌐 Live Demo

Explore the JSON Schema Playground hosted on GitHub Pages:  

👉 [json-schema-playground.jonymusky.com](https://json-schema-playground.jonymusky.com)

## 🚀 Features

- **Drag-and-Drop Interface**: Easily add form elements like text fields, checkboxes, dropdowns, and more.

- **Visual Editing**: Modify properties such as labels, placeholders, validations, and descriptions.

- **Dynamic Options**: Configure options for dropdowns, radio buttons, and checkboxes.

- **Validation Rules**: Add constraints like required fields, minimum/maximum values, length restrictions, and conditional validations.

- **Live Preview**: View your form as you build it, with immediate feedback.

- **Export Options**:

  - **JSON Schema**: Structural schema defining your form.

  - **UI Schema**: Custom UI configurations for rendering.