Redis UI

Repository: github.com/darkknight127/redis-ui

Local-first Redis browser with a three-panel UI: saved connections, a folder-style key explorer, and an inspector for strings, lists, hashes, sets, and sorted sets. A small Fastify API talks to Redis over ioredis; the Next.js (App Router) front end uses SCAN for key listing (cursor pagination, no KEYS).

Features

Area	What you get
Connections	Multiple profiles (host, port, DB, TLS, ACL user/password), connect/disconnect, ping, optional file persistence.
Keys	Pattern + namespace chips, expandable tree (colon segments), “New string key”, load more via SCAN.
Inspector	Key type, TTL, string/list/hash/set/zset editors, JSON tree and table views when values are tabular JSON, raw command runner (with server-side command blocking).
Theme	Light/dark, stored as redis-ui-theme in localStorage.

Requirements

• Node.js 20+
• npm (this repo uses npm workspaces)
• A running Redis instance you can reach from the API process

Quick start

git clone https://github.com/darkknight127/redis-ui
cd redis-ui
npm install

1. Configure environment

Copy the examples and adjust if needed:

File	Purpose
server/.env.example → server/.env	API HOST, PORT, CORS_ORIGIN, optional CONNECTIONS_FILE
web/.env.example → web/.env.local	NEXT_PUBLIC_API_URL (default http://127.0.0.1:3000/api)

CORS: the API must allow your web origin. Dev UI runs on port 5500 (see web/package.json); production next start defaults to port 3000 — set CORS_ORIGIN accordingly.

2. Run in development

From the repo root:

npm run dev

• API: http://127.0.0.1:3000 — health: GET /health, JSON under /api/...
• Web: http://localhost:5500

Or run workspaces separately:

npm run dev -w server
npm run dev -w web

3. Try it

1. Start Redis (e.g. docker run -p 6379:6379 redis).
2. Open the web app → Add a connection (127.0.0.1:6379, correct DB index).
3. Use pattern * (or a prefix like demo:*), expand folders in the key column, select a key, edit or inspect in the right panel.

Optional: demo dataset (DB 10)

Loads sample keys under demo:* into logical database 10:

npm run seed:db10 -w server

Optional: REDIS_SEED_HOST, REDIS_SEED_PORT, REDIS_SEED_PASSWORD (see server/scripts/seed-db10.ts). Then add a connection with DB = 10 and browse demo:*.

Production build

npm run build

• API: npm run start -w server (after npm run build -w server)
• Web: npm run build -w web then npm run start -w web — align CORS_ORIGIN with the URL you serve the UI from.

Project layout

Path	Role
server/src	Fastify app, connection manager, Redis routes
web/app	Next.js App Router, global styles / theme
web/components	Sidebar, key explorer, inspector, JSON table
web/lib/redisStructure.ts	JSON ↔ table model helpers

Security (read this)

• The API defaults to loopback — do not expose it to untrusted networks.
• With CONNECTIONS_FILE, passwords are stored in plaintext on disk — local dev tool only.
• Raw commands are filtered for dangerous names; the surface is still powerful — keep access local.

HTTP API (summary)

Area	Methods	Path
Connections	GET, POST, PATCH, DELETE	/api/connections, /api/connections/:id
Ping / connect / disconnect	POST	/api/connections/:id/ping, .../connect, .../disconnect
Scan keys	GET	/api/connections/:id/keys?match=&cursor=&count=
Key meta	GET	/api/connections/:id/key/:key/type, .../ttl, .../size
Values	GET / PUT / POST / PATCH	strings, lists, hashes, sets, zset — see server/src/routes/keys.ts
Raw command	POST	/api/connections/:id/command — body { "argv": ["PING"] }

URL-encode :key and related path segments where required.

License

This project is licensed under the MIT License.

Source code: https://github.com/darkknight127/redis-ui.