git/low-code-react-app-b
1
0
Fork 0
mirror of https://github.com/johndoe6345789/low-code-react-app-b.git synced 2026-04-24 13:44:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Generated by Spark: Build a visual schema editor to create JSON UI configs through drag-and-drop

Browse Source
This commit is contained in:
johndoe6345789
2026-01-17 11:03:10 +00:00
committed by GitHub
parent ac6afd9961
commit 9b9f0da541
19 changed files with 1438 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
PRD.md
View File

@@ -1,6 +1,6 @@
# JSON-Driven UI Architecture Enhancement
Build a comprehensive JSON-driven UI system that allows building entire user interfaces from declarative JSON schemas, breaking down complex components into atomic pieces, and extracting reusable logic into custom hooks for maximum maintainability and rapid development.
Build a comprehensive JSON-driven UI system that allows building entire user interfaces from declarative JSON schemas, including a visual drag-and-drop schema editor for creating JSON UI configs, breaking down complex components into atomic pieces, and extracting reusable logic into custom hooks for maximum maintainability and rapid development.
**Experience Qualities**:
1. **Modular** - Every component under 150 LOC, highly composable and reusable
@@ -9,10 +9,17 @@ Build a comprehensive JSON-driven UI system that allows building entire user int
**Complexity Level**: Complex Application (advanced functionality with multiple views)
This is an advanced system that interprets JSON schemas, manages state across multiple data sources, executes actions dynamically, and renders complex component hierarchies - requiring sophisticated architecture with component registries, action executors, and data source managers.
This is an advanced system that interprets JSON schemas, manages state across multiple data sources, executes actions dynamically, renders complex component hierarchies, and provides a visual editor for creating schemas through drag-and-drop - requiring sophisticated architecture with component registries, action executors, data source managers, and interactive canvas rendering.
## Essential Features
### Visual Schema Editor
- **Functionality**: Drag-and-drop interface for building JSON UI schemas with real-time preview
- **Purpose**: Enable non-technical users to create complex UIs without writing JSON
- **Trigger**: User opens the schema editor page
- **Progression**: Select component from palette → Drag to canvas → Drop at position → Configure properties → Preview result → Export JSON
- **Success criteria**: Users can create complete page schemas visually, with property editing, component tree view, and JSON export
### JSON Schema Parser
- **Functionality**: Parse and validate JSON UI schemas with full TypeScript type safety
- **Purpose**: Enable building UIs from configuration rather than code