# How to Vibe Code Your Own Heptabase (and Stop Paying for It)

> An intelligent, visual knowledge base and research workspace

- Site: https://heptabase.com
- Category: Productivity
- Platforms: Web app, macOS app, Windows app, Linux app, iOS app, Android app
- Verdict: **Serious undertaking** (34/100 vibecodeable)
- Estimated effort: 3-6 months of focused development

## Verdict

Build a web-based subset of the card editor and basic whiteboard, but keep paying for the native multi-platform sync and AI tutor.

Cloning Heptabase fully requires building a desktop-grade infinite canvas rendering engine, a local-first offline synchronization database, and a stateful AI agent tutor. While an AI agent can rapidly scaffold a Next.js web application with basic block editing and a simple SVG-based canvas, getting the performance to 60fps with thousands of interconnected cards and implementing a robust CRDT/offline sync layer is a monumental engineering challenge for a solo developer.

### What you can't replicate

- The native performance and cross-platform desktop optimization of their custom rendering stack
- The finely tuned AI Tutor and automated syllabus curriculum generation loops
- The seamless offline-first local database sync across macOS, Windows, Linux, iOS, and Android

## What it does

Heptabase combines spatial thinking with document management by organizing ideas around cards and infinite whiteboards, PDF annotation, daily journals, and an AI tutor.

### Core features

- Infinite spatial whiteboard with custom card nodes and connectors
- Block-based text editor with bi-directional linking and daily journals
- PDF reader with highlight extraction into indexable cards
- YouTube transcript parser and embedding
- AI tutoring system with syllabus structuring and context search
- Local-first storage with offline sync support

## The business

### Pricing

- Pro: $8.99/mo
- Premium: $17.99/mo
- Premium+: $53.99/mo

### Funding

$2.2M raised.
- Seed
Investors: Y Combinator, Kleiner Perkins, HOF Capital, Moving Capital, Tonic Fund

Founded 2021.
Team size: 8-10.

## The hard parts

- Writing a custom 60fps infinite canvas renderer capable of handling thousands of DOM/WebGL nodes and SVG connectors smoothly
- Implementing a local-first offline storage engine with bidirectional sync and conflict resolution
- Building high-fidelity PDF annotation rendering with precise coordinate highlight mapping and extraction
- Orchestrating multi-step AI tutor workflows and context retrieval over massive user knowledge graphs

## How to vibe code Heptabase

### Prerequisites

- Node.js (free): Required for running the Next.js development server and frontend toolchain
- GitHub (free): Source control and repository hosting

### Recommended AI tools

- Claude Code: Best-in-class agentic coding tool for scaffolding complex multi-file Next.js architectures and debugging state management logic
- Cursor: Ideal for iterative frontend component polish, CSS layout adjustments, and reviewing diffs on whiteboard rendering logic

### Stack

- Frontend: Next.js with Tailwind CSS, React Flow or custom HTML5 Canvas/SVG, and TipTap for block editing
- Backend: Next.js Server Actions / API Routes
- Database: Turso (SQLite at the edge for local-first feel)
- Auth: better-auth
- Payments: None (personal use clone)
- Other: Anthropic API for AI tutor and chat, PDF.js for document annotation

### Hosting

- Vercel (Hosting the Next.js frontend and serverless API endpoints): $0/mo (Hobby tier)
- Cloudflare (Edge database hosting via Turso/D1 and asset storage): $0/mo

### Build guide

1. **Project Scaffolding and Authentication Setup** — Initialize a Next.js project with TypeScript, Tailwind CSS, and set up better-auth for local user authentication to secure your personal knowledge base.

```
Initialize a new Next.js project with TypeScript, Tailwind CSS, and Lucide icons. Configure better-auth with a local SQLite database adapter using Turso. Create a clean dashboard layout with a sidebar navigation for Whiteboards, Notes, Daily Journals, and AI Tutor. Ensure all configuration files are robust and typescript strict mode is enabled.
```

2. **Block-Based Editor and Bi-Directional Linking** — Implement a rich-text block editor using TipTap or Lexical, supporting markdown shortcuts and bi-directional node linking between cards.

```
Build a block-based note editor component using TipTap inside Next.js. Implement extensions for markdown shortcuts, callouts, and bi-directional linking that detects [[Note Title]] patterns and creates relational links in the database. Ensure auto-saving debounce logic persists changes to the Turso SQLite database seamlessly.
```

3. **Infinite Spatial Whiteboard Canvas** — Build an interactive infinite canvas supporting pan, zoom, card placement, resizing, and SVG connector lines between related nodes.

```
Create an infinite whiteboard canvas component supporting smooth pan and zoom using pointer events and CSS transforms or HTML5 Canvas. Implement draggable card nodes that can be placed anywhere on the grid, and allow users to draw directional connector lines between cards with snap-to-edge attachment points. Store card coordinates, dimensions, and connections efficiently in the database.
```

4. **PDF Annotation and Highlight Extraction** — Integrate PDF.js to render documents in-app, allowing text selection, multi-color highlighting, and one-click extraction into indexable cards.

```
Integrate PDF.js into a dedicated document view component. Build UI controls for text selection and multi-color highlighting with coordinate mapping. Implement a feature where selecting text and clicking 'Create Card' extracts the highlighted passage, stores the source reference metadata, and instantly adds it as a new node on a selected whiteboard.
```

5. **AI Tutor and Knowledge Graph Context Integration** — Connect the Anthropic API to build an AI tutor and chat assistant capable of querying user notes and structuring personalized learning syllabi.

```
Implement an AI tutoring chat interface backed by the Anthropic API (Claude Sonnet). Build a backend retrieval service that searches user notes and card contents via vector embeddings or full-text search to inject relevant context into AI prompts. Add structured output handling to generate multi-part course syllabi and lesson progress trackers directly within the app.
```

### Cost vs paying

**Starting costs (one-time):**

- Domain name: ~$12/yr
- AI coding agent credits: ~$40
- Total: ~$52 one-time

**Ongoing costs (monthly):**

- Vercel & Turso hosting: $0/mo
- Anthropic API usage: ~$5-15/mo
- Total: ~$10/mo

- Paying for the SaaS instead: $17.99/mo
- Build time: 120-160 hours
- AI tool credits: $40/mo (Claude Pro + Cursor Pro)
- Break-even: 3 months

## Sources

- [Heptabase Official Website](https://heptabase.com)
- [Heptabase Public Pricing](https://heptabase.com/pricing)
- [Y Combinator Startup Directory - Heptabase Profile](https://www.ycombinator.com/companies/heptabase)