Localflare: A Practical Local Dashboard for Cloudflare Workers
Localflare turns your local Workers development environment into a full‑stack dashboard that lets you browse D1 databases, KV namespaces, R2 buckets, Durable Objects, and queues without modifying code. This tutorial walks through installation, quick start, attach mode for custom dev workflows, and browser troubleshooting, showing how to get a visual studio‑like experience for Cloudflare Workers projects.
Localflare: A Practical Local Dashboard for Cloudflare Workers
Are you tired of debugging your Cloudflare Workers with no visual interface? Localflare solves that pain point by giving you a real‑time, zero‑config dashboard for everything that runs inside your Workers – from D1 databases to KV namespaces and R2 buckets – all while keeping your code untouched.
What is Localflare?
Localflare is a CLI tool that launches a local worker in tandem with a lightweight API worker. The API serves an intuitive React dashboard hosted at studio.localflare.dev. When your worker runs at http://localhost:8787, the dashboard automatically discovers your wrangler.toml, spins up APIs on __localflare/*, and provides a single‑tap interface to:
- D1 Database Studio – full SQL editor, inline editing, bulk ops, dummy‑data generation.
- KV Browser – view, edit, delete key‑value pairs.
- R2 File Manager – upload, download, and manage objects.
- Queue Inspector – send test messages and view queue state.
- Durable Objects – inspect instance state and send requests.
- Service Bindings – automatic proxying.
No SDK, no code modifications – just run localflare in your project folder.
Quick‑Start Guide
- Navigate to your Workers project:
cd /path/to/your-worker - Install Localflare globally (you can also use
npx):npm i -g localflare # or pnpm add -g localflare - Run Localflare:
Localflare will:localflare- Read your
wrangler.toml - Start your worker at
http://localhost:8787 - Open the dashboard at
https://studio.localflare.dev
- Read your
If you prefer the command‑line only (no auto‑open browser), use:
localflare --no-open
Customizing the Port
localflare --port 9000
The dashboard will automatically detect the new worker port.
Pass Wrangler Options Directly
Want to run a specific environment or set env vars? Use -- to forward arguments:
localflare -- --env staging
localflare -- --var API_KEY:secret
Combine multiple options as needed:
localflare --port 9000 -- --env production --remote
Attach Mode – Perfect for Next.js, Remix, or Other Frameworks
When your dev stack launches a separate server (e.g., pnpm dev), Localflare can attach to that existing process, keeping your bindings shared.
- Terminal 1 – run your dev server
pnpm dev # or opennext dev, nuxt dev, etc. - Terminal 2 – launch Localflare API
localflare attach
The API will listen on http://localhost:8788. You can also change the API port:
localflare attach --port 9000
Browser Troubleshooting
Modern browsers sometimes block connections from studio.localflare.dev to localhost:8787. Here’s how to unblock:
Chrome / Chromium – Enable Local network access in the site info dialog and refresh.
Safari / Brave – Install mkcert, generate a local CA, and restart your browser.
Brave Alternative – Turn off Shields for studio.localflare.dev.
Supported Bindings at a Glance
| Binding | Feature | Dashboard UI |
|---|---|---|
| D1 | Full SQL Studio | ✔ |
| KV | Browser + editor | ✔ |
| R2 | File manager | ✔ |
| Durable Objects | Instance list & state | ✔ |
| Queues | Send test messages | ✔ |
| Service Bindings | Proxy | ✔ |
All the features listed above are available out‑of‑the‑box with zero configuration.
Why Localflare?
- Zero‑config – automatically reads
wrangler.toml. - Real bindings – no mocking; data is from your live dev environment.
- Cross‑framework – works with Next.js, Remix, Nuxt, Astro, SvelteKit, and vanilla Workers.
- Developer‑friendly – inline editing, dummy data generation, SQL editor, drag‑and‑drop uploads.
- Open‑source – MIT‑licensed, community‑driven. Consider sponsoring to keep the project alive.
Getting Help & Contributing
- Documentation: https://github.com/rohanprasadofficial/localflare
- GitHub Issues: Submit bugs or feature requests.
- Sponsor: https://buy.stripe.com/9AQ8e7l6f2aG4g6gII (optional but appreciated)
Bottom Line
Localflare removes a major friction point in Workers development: you can now inspect, edit, and test every bound resource while running your code locally. It’s a quick setup, a robust feature set, and a perfect fit for anyone building on Cloudflare Workers.
Ready to give it a spin? Clone the repo, install the CLI, and watch your local dashboard come to life in seconds. Happy hacking!