https://github.com/art70x/json-builder
Visually construct JSON objects and arrays with typed properties. Live preview, drag-to-reorder, import/export, and save named datasets.
https://github.com/art70x/json-builder
art70x builder json pwa pwa-app react shadcn tailwindcss vite
Last synced: about 1 month ago
JSON representation
Visually construct JSON objects and arrays with typed properties. Live preview, drag-to-reorder, import/export, and save named datasets.
- Host: GitHub
- URL: https://github.com/art70x/json-builder
- Owner: art70x
- License: mit
- Created: 2026-03-08T12:47:55.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2026-03-09T06:51:51.000Z (4 months ago)
- Last Synced: 2026-03-09T11:27:21.878Z (4 months ago)
- Topics: art70x, builder, json, pwa, pwa-app, react, shadcn, tailwindcss, vite
- Language: TypeScript
- Homepage: https://json-b.vercel.app
- Size: 356 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: .github/contributing.md
- License: LICENSE
Awesome Lists containing this project
README
# JSON Builder — Visual JSON Editor & Exporter
[](https://github.com/art70x/json-builder/blob/main/LICENSE)
> Build, edit, and export JSON objects visually with typed properties, nested support, live preview, and drag-to-reorder—all in your browser.
🌐 **Try it live:** [https://json-b.vercel.app](https://json-b.vercel.app)
---
## 🚀 Key Features
**Core Features**
- **Typed Property Editor**: Add properties as `string`, `number`, `boolean`, or `array`. Booleans toggle true/false; arrays auto-detect element types.
- **Nested JSON Support**: Easily create objects within objects or arrays within arrays.
- **Live Preview**: Syntax-highlighted, line-numbered JSON with compact or pretty-print toggle.
- **Drag-to-Reorder**: Rearrange objects and arrays visually using drag handles.
- **Import & Export**: Upload JSON files and export timestamped JSON with all values coerced to their types.
- **Save & Load Datasets**: Store named datasets locally using IndexedDB—no server required.
**Advanced Features**
- **Privacy-First**: 100% client-side; your JSON never leaves your browser.
- **Keyboard Shortcuts**: Quick actions for export, save, and import.
- **Responsive UI**: Side-by-side editor + preview on desktop, tab-based layout on mobile.
- **PWA Support**: Installable and works offline.
---
## 🛠️ Technology Stack
- **Framework**: React 19 + TypeScript
- **Styling**: Tailwind CSS v4 + shadcn/ui (Radix UI primitives)
- **Icons**: Lucide React
- **Async State**: TanStack Query v5
- **Local Persistence**: IndexedDB via `idb`
- **Build Tool**: Vite 8
- **Code Quality**: ESLint + Prettier
---
## ⚡ Quick Start
### Prerequisites
- Node.js 20+
- pnpm 7+ (install with `npm i -g pnpm` if needed)
### Installation
```bash
# Clone the repository
git clone https://github.com/art70x/json-builder.git
# Navigate to the project folder
cd json-builder
# Install dependencies
pnpm install
# Start the development server
pnpm dev
```
The app will run at: [http://localhost:3000](http://localhost:3000)
### Build for Production
```bash
# Build production version
pnpm build
# Preview production build
pnpm preview
```
---
## ⌨️ Keyboard Shortcuts
| Shortcut | Action |
| ---------------- | -------------------- |
| `Ctrl / Cmd + E` | Export JSON to file |
| `Ctrl / Cmd + S` | Save current dataset |
| `Ctrl / Cmd + I` | Import a JSON file |
---
## 🤝 Contributing
We welcome contributions! Open issues, suggest features, or submit pull requests. See [CONTRIBUTING.md](https://github.com/art70x/json-builder/blob/main/CONTRIBUTING.md) for detailed guidelines.
---
## 🙏 Acknowledgments
- [shadcn/ui](https://ui.shadcn.com/) - Accessible and customizable Vue component library.
- [idb](https://github.com/jakearchibald/idb) - Lightweight promise-based IndexedDB wrapper used for client-side dataset persistence.
- [TanStack Query](https://tanstack.com/query) - Manages async state and cache invalidation for the local dataset layer.
- [Lucide React](https://lucide.dev/) - Consistent, lightweight icon set used throughout the interface.
- [Vuetrix](https://github.com/art70x/Vuetrix) - Inspired the project's architecture, CI workflow, formatting standards, and Vite configuration.
- [Caffeine](https://caffeine.ai/) - Used to build the first version of the app.
---
Made with ❤️ for the web development community