https://github.com/alessandroannini/dpds-builder
Explore and edit Data Product Descriptor Specificatoin document by json schema, or any json schema you load.
https://github.com/alessandroannini/dpds-builder
json-schema json-schema-form react typescript vitejs
Last synced: about 1 month ago
JSON representation
Explore and edit Data Product Descriptor Specificatoin document by json schema, or any json schema you load.
- Host: GitHub
- URL: https://github.com/alessandroannini/dpds-builder
- Owner: AlessandroAnnini
- Created: 2024-10-16T17:24:44.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2025-03-07T14:29:55.000Z (3 months ago)
- Last Synced: 2025-04-10T13:15:28.562Z (about 2 months ago)
- Topics: json-schema, json-schema-form, react, typescript, vitejs
- Language: TypeScript
- Homepage: https://dpds-builder.alessandroannini.com/
- Size: 187 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# DPDS Builder
A dynamic editor for Data Product Descriptor Specifications with JSON Schema validation.
## 📋 Overview
DPDS Builder is a specialized tool designed to streamline the creation and editing of Data Product Descriptor Specifications. It provides an interactive interface to manipulate JSON data conforming to predefined schemas, with built-in validation and a user-friendly form interface.
## ✨ Key Features
- 🔄 **Dynamic Form Generation** - Automatically generates interactive forms from JSON schemas
- 📋 **Data Product Schema Support** - Built-in support for Data Product Descriptor Specifications
- 🔍 **Schema Validation** - Real-time validation of form data against the loaded schema
- 📤 **Data Import/Export** - Load existing JSON data and schemas from files
- 🎨 **Modern UI** - Clean, responsive interface built with React and Tailwind CSS
- 📝 **Custom UI Schemas** - Control the appearance and behavior of form fields
## 🚀 Getting Started
### Prerequisites
- Node.js (version 14.18+ or 16+)
- npm, yarn, or pnpm
### Installation
1. Clone this repository:
```bash
git clone https://github.com/yourusername/dpds-builder.git
cd dpds-builder
```
2. Install dependencies:
```bash
npm install
# or
yarn
# or
pnpm install
```
3. Start the development server:
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
```
4. Open your browser and visit `http://localhost:5173`
## 💻 Usage
### Loading a Schema
The application provides two ways to load a schema:
1. **Use Built-in DPDS Schema**: Click the "Data Product Descriptor Specs" button to load the built-in schema.
2. **Load Custom Schema**: Use the schema loader to upload your own JSON Schema file.
### Loading Form Data
Once a schema is loaded, you can:
1. Click on "Load Form Data" to import existing JSON data that conforms to the schema.
2. The imported data will be validated against the schema automatically.
3. Validation results will be displayed as toast notifications.
### Editing Form Data
The dynamic form interface allows you to:
1. Edit data through a user-friendly form that's generated based on the schema.
2. Reset the form to its initial state using the "Reset" button.
3. Validate data as you type (optional).
## 🧩 Core Components
### App Component
The main application container that:
- Manages application state
- Handles schema loading
- Orchestrates the interaction between different components
### DynamicForm Component
A powerful form generator that:
- Converts JSON schemas into interactive forms
- Provides validation against the schema
- Supports custom UI schemas for tailored appearances
- Handles form data changes and submissions
### SchemaLoader Component
Allows users to:
- Upload custom JSON Schema files
- Process and validate the schemas before use
### DataLoader Component
Enables users to:
- Import existing JSON data files
- Validate the data against the current schema
- Display feedback about validation results
## 🛠️ Technologies Used
- **React** - UI framework
- **TypeScript** - Type-safe code
- **Tailwind CSS** - Styling
- **React JSON Schema Form** - Form generation
- **Ajv** - JSON Schema validation
- **Shadcn UI** - UI components