https://github.com/aryasaatvik/react-jsonr
A plugin-based JSON to React component renderer
https://github.com/aryasaatvik/react-jsonr
json react typescript ui
Last synced: 4 months ago
JSON representation
A plugin-based JSON to React component renderer
- Host: GitHub
- URL: https://github.com/aryasaatvik/react-jsonr
- Owner: aryasaatvik
- License: mit
- Created: 2025-03-27T18:23:42.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2025-03-31T20:37:39.000Z (over 1 year ago)
- Last Synced: 2025-12-14T16:01:20.966Z (7 months ago)
- Topics: json, react, typescript, ui
- Language: TypeScript
- Homepage: http://jsonr.arya.sh/
- Size: 853 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Roadmap: ROADMAP.md
Awesome Lists containing this project
README
# React JSONR Monorepo
A monorepo for React JSONR - a library that allows you to create React components from JSON definitions.
## Repository Structure
- `packages/react-jsonr/` - The core library
- `apps/docs/` - Documentation website built with Next.js and Fumadocs
## Getting Started
This repository uses [pnpm](https://pnpm.io/) for package management.
```bash
# Install dependencies
pnpm install
# Build the library
pnpm build
# Run the documentation site
pnpm docs:dev
```
## Core Concepts
React JSONR is built around a few key concepts:
1. **JSON Nodes** - A JSON structure describing UI components with their properties and children
2. **Component Registry** - A whitelist of allowed components that can be referenced in the JSON
3. **Transformation Pipeline** - A system to process and modify the JSON before rendering
4. **Plugins** - Modular transformers that can alter the JSON tree
5. **Event Handler Mapping** - A secure approach to map string-based event references to actual functions
## Documentation
For detailed documentation, visit the documentation site by running `pnpm docs:dev` or see the README in the [packages/react-jsonr](packages/react-jsonr) directory.
## License
MIT