Blog Projects About Me

Cloudflare Local Helpers

GitHub NPM
hono htmx

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.

Features

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

Features

1. KV Editor

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

KV Namespaces

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

D1 Databases

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

R2 Buckets

4. Environment Variables Viewer

  • Inspect all environment variables and bindings bound to your worker

Environment Variables

Tech Stack

How to use

1. Installation

Add the package as a development dependency:

npm

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

yarn

Terminal window
yarn add cf-local-helpers --dev

pnpm

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

bun

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

2. Quick Start

To see the dashboard in action with sample data:

Terminal window
# 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);
});