Cloudflare Local Helpers

About

A local development dashboard for managing Cloudflare Workers resources. When developing with Cloudflare Workers, you often need to inspect and manage local KV stores, D1 databases, and R2 buckets. This tool provides a clean UI for that during development.

Why I built it

Cloudflare Workers development is excellent, but local state can become hard to inspect once a project uses several bindings. I built this to make local debugging feel closer to a small admin console: quick to open, easy to scan, and useful during real development.

Core features

• Browse and manage local KV namespaces
• Query and inspect D1 (SQLite) databases
• Manage R2 bucket objects
• Works with Wrangler’s local development environment

Dashboard areas

1. KV Editor

• View all KV namespaces
• List, search, and filter keys
• Create, edit, and delete key-value pairs
• View key expiration and metadata

2. D1 Explorer

• View all D1 databases
• Browse tables and schema
• Run custom SQL queries with a built-in editor
• View query results in a table format with execution time

3. R2 Browser

• Navigate R2 buckets and folders (breadcrumbs support)
• View object metadata (size, type, uploaded date)
• Preview images directly in the dashboard
• Download files

4. Environment Variables Viewer

• Inspect all environment variables and bindings bound to your worker

Tech Stack

• Hono (hono.dev)
• HTMX (htmx.org)
• TailwindCSS (tailwindcss.com)
• DaisyUI (daisyui.com)
• AlpineJS (alpinejs.dev)

Reflection

This project sits at the intersection of developer experience, Cloudflare internals, local tooling, and practical UI design. It came from a simple need: make local Workers state easier to inspect while building.

How to use

1. Installation

Add the package as a development dependency:

npm

npm install cf-local-helpers --save-dev

yarn

yarn add cf-local-helpers --dev

pnpm

pnpm add cf-local-helpers --save-dev

bun

bun add cf-local-helpers --save-dev

2. Quick Start

To see the dashboard in action with sample data:

# Clone the repository
git clone https://github.com/bimsina/cf-local-helpers.git
cd cf-local-helpers

# Install dependencies
pnpm install

# Build package
pnpm build

# Run the example project
pnpm dev

This will start the development server with sample D1 databases, KV namespaces, and R2 buckets pre-configured. Visit http://localhost:8787/dashboard to access the dashboard.

3. Usage Examples

Pure Cloudflare Worker

export default {
  async fetch(request, env, ctx) {
    const url = new URL(request.url);

    if (url.pathname.startsWith("/dashboard")) {
      const { default: createHandler } = await import("cf-local-helpers");
      const dashboard = createHandler({ basePath: "/dashboard" });
      return dashboard.fetch(request, env, ctx);
    }

    return new Response("Hello World!");
  },
} satisfies ExportedHandler<Env>;

Hono

import { Hono } from "hono";

const app = new Hono();

app.all("/dashboard/*", async (c) => {
  const { default: createHandler } = await import("cf-local-helpers");
  const dashboard = createHandler({ basePath: "/dashboard" });
  return dashboard.fetch(c.req.raw, c.env, c.executionCtx);
});

export default app;

TanStack Start

import { createFileRoute } from "@tanstack/react-router";

export const Route = createFileRoute("/api/dashboard/$")({
  server: {
    handlers: {
      GET: async ({ request }: { request: Request }) => {
        const { default: createHandler } = await import("cf-local-helpers");
        const dashboard = createHandler({ basePath: "/api/dashboard" });
        return dashboard.fetch(request, env);
      },
      POST: async ({ request }: { request: Request }) => {
        const { default: createHandler } = await import("cf-local-helpers");
        const dashboard = createHandler({ basePath: "/api/dashboard" });
        return dashboard.fetch(request, env);
      },
    },
  },
});

Itty Router

router.all("/dashboard/*", async (request, env, ctx) => {
  const { default: createHandler } = await import("cf-local-helpers");
  const dashboard = createHandler({ basePath: "/dashboard" });
  return dashboard.fetch(request, env, ctx);
});