Cloudflare Local Helpers

hono
htmx

A dashboard for managing Cloudflare Workers local resources (KV, D1, R2).

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);
});