R2D2

A web-based JSON editor for Cloudflare R2 storage (S3-compatible object storage).

Features

• R2 Bucket Connection - Connect to Cloudflare R2 buckets using your API credentials
• Organization Management - Manage multiple organizations and their associated R2 buckets
• JSON File Browser - Browse and search JSON files in your R2 bucket with folder navigation
• Visual JSON Editor - Edit JSON files using a tree view, table view, or raw preview
• Template Validation - Auto-detect JSON templates and validate against schema
• Create from Templates - Create new JSON files from predefined templates

Tech Stack

Category	Technology
Framework	SolidStart (SolidJS)
Language	TypeScript
Styling	Tailwind CSS v4
S3 Client	@aws-sdk/client-s3
Icons	lucide-solid
Runtime	Bun / Node.js >= 22

Prerequisites

• Node.js >= 22 or Bun
• Cloudflare R2 bucket with API credentials (Access Key ID, Secret Access Key)

Installation

# Install dependencies
npm install

# Or using Bun
bun install

Development

# Start development server
npm run dev

# Open in browser
npm run dev -- --open

Building

# Create production build
npm run build

# Start production server
npm start

Configuration

R2 credentials are stored in your browser's localStorage. To configure:

1. Go to Settings in the app
2. Create or select an organization
3. Add a new R2 bucket with your credentials:
   • Endpoint: Your R2 endpoint URL (e.g., https://<account-id>.r2.cloudflarestorage.com)
   • Access Key ID: Your R2 access key
   • Secret Access Key: Your R2 secret key
   • Bucket Name: The name of your R2 bucket
   • Region: Usually auto

Project Structure

r2d2/
├── src/
│   ├── components/       # UI components
│   ├── lib/              # Core logic (R2 client, orgs, templates)
│   ├── routes/          # Page routes
│   └── stores/           # State management
├── data/                 # Local data storage
│   └── organizations.json
├── app.config.ts        # SolidStart configuration
└── package.json

License

MIT License - see LICENSE file for details.