A Polished, Read‑Only Cloudflare D1 Explorer (Express + Vanilla JS)

#cloudflare #node #webdev #database

If you’ve ever wanted a lightweight UI to explore your Cloudflare D1 data without pulling in a heavy admin tool or writing ad‑hoc scripts every time, this project is for you. It’s an Express + vanilla JS UI that talks to the Cloudflare v4 API and enforces read‑only queries for safety.

Why this approach?

No client frameworks or build steps — easy to run and tweak.
Read‑only by design — only single SELECT/WITH statements are allowed.
Professional UX — responsive layout, sidebar table list, sortable results, and light/dark theme.
Shareable state — the UI syncs to URL params so you can refresh or send a link to the exact view.

Highlights

Sidebar table list with search (excludes internal/underscore tables like _cf_*).
Browse panel to pick columns, add filters, set sort/limit/offset.
Click any header to toggle ASC/DESC sorting.
SQL editor for custom single‐statement queries.
Settings modal to manage .env credentials from the UI.
Light/Dark theme toggle with persistence.

Screenshots

Getting started
1) Clone the repo and install deps

git clone https://github.com/mohamedrayenbouzaabia-axelites/cloudflare_d1_interface.git
npm install

2) Run it

npm run dev   # nodemon
# or
npm start

3) Open http://localhost:3000 and set your Cloudflare credentials in the Settings panel (it writes .env for you).

Configuration
.env supports:

CF_ACCOUNT_ID
CF_D1_DATABASE_ID
CF_API_TOKEN (D1 Data Access is enough)
CF_API_BASE (optional)

Security

The server removes comments, rejects multi‐statement SQL, and only accepts single SELECT/WITH queries.
Tokens never leave the server.

Under the hood

Express serves /public and exposes APIs:
- POST /api/query (read‑only guard)
- GET /api/tables, GET /api/columns?table=...
- GET/POST /api/env-config for .env management
The UI is vanilla JS that syncs most state into URL params.