Drawbase

Draw, save, and switch sheets without leaving the canvas.

Drawbase is a minimal, Excalidraw-first tool for DSA, HLD, LLD, and system-design notes. Group your diagrams into workspaces by topic, keep as many sheets as you need in each, and switch between them right from the editor — every scene saved to your own Postgres. Built as a personal tool.

Landing

A single-purpose home: pick up a private board and start drawing. Sheet tabs, JSONB storage, and Clerk-gated access are the whole pitch — no ceremony.

Dashboard

Create one workspace per topic (e.g. System design prep), then add sheets inside it. Every saved diagram shows its sheet count and last-touched date.

Canvas

The full Excalidraw editor with a sheet switcher baked into the menu. Flip between sheets, save to Drawbase or locally, export, and theme the canvas — all without leaving the board.

---

For personal use

This is my personal instance. New sign-ins are not accepted on the hosted app — access is limited to the owner.

Want it for yourself? The code is yours — self-host it. Clone the repo, bring your own Clerk and Supabase keys, and run it (see Setup).

Contributions are welcome. If you find this useful or just want to hack on a tidy full-stack Next.js + Clerk + Supabase project, PRs and issues are open.

Stack

• Next.js app router
• Clerk auth
• Supabase Postgres storage
• @excalidraw/excalidraw editor

Setup

1. Install dependencies with pnpm install.
2. Create Clerk app and copy keys into .env.local.
3. Choose correct Supabase database path:

New empty project: create Supabase project, then apply migrations:

pnpm exec supabase login
pnpm exec supabase link --project-ref <project-ref>
pnpm db:push

Existing Drawbase project: do not run db:push yet. Its tables may predate migration tracking. Follow existing-project adoption to verify schema and mark baseline applied safely.

4. Before local DB validation, run SHOW server_version; on hosted project and make supabase/config.toml db.major_version match it.
5. Copy Supabase project URL and secret/service-role key into .env.local.
6. Start app:

pnpm dev

Database schema lives only in supabase/migrations. See supabase/README.md for local development, new migration, deployment, and existing-project baseline workflows.

Env

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_IN_FALLBACK_REDIRECT_URL=/dashboard
NEXT_PUBLIC_CLERK_SIGN_UP_FALLBACK_REDIRECT_URL=/dashboard
SUPABASE_URL=
SUPABASE_SECRET_KEY=

Older Supabase projects may call this key SUPABASE_SERVICE_ROLE_KEY instead.

Storage

Each workspace owns many sheets. Each sheet stores one Excalidraw scene as JSONB:

• elements
• appState
• files

This is enough for personal DSA, HLD, and LLD diagrams. Heavy pasted images can grow DB size quickly, so Drawbase exposes measurement headers on sheet GET/PATCH responses:

• X-Drawbase-Scene-Bytes: full active scene JSON size.
• X-Drawbase-Binary-Bytes: embedded Excalidraw files JSON size.
• X-Drawbase-Binary-Ratio: embedded files as a fraction of scene size.
• X-Drawbase-Binary-Pressure: none, watch, or extract-candidate.

Keep files in JSONB while pressure is none or occasional watch. Move files to Supabase Storage/S3/R2 only after real usage repeatedly returns extract-candidate or scenes become slow to save. Current thresholds flag watch at 512 KiB embedded files, and extract-candidate at 2 MiB embedded files or when files are at least 70% of a 1 MiB+ scene.

Checks

pnpm lint        # Oxlint with Next.js, React, a11y, and import rules
pnpm lint:all    # lint plus typecheck
pnpm typecheck
pnpm build

Oxfmt is the project formatter:

pnpm format:check
pnpm format

License

MIT © Shishir Chaurasiya