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

> A note-taking tool for networked thought.

- Site: https://roamresearch.com
- Category: Productivity & Knowledge Management
- Verdict: **Solid side project** (68/100 vibecodeable)
- Estimated effort: 2-3 weeks part-time

## Verdict

You can build a functional personal single-user clone of Roam's core block-based graph engine, but you will hit friction getting the bidirectional query engine and sub-millisecond editor tree rendering buttery smooth.

Replicating a personal version of Roam for local use is entirely realistic with modern AI tools, provided you drop multi-user real-time collaboration and stick to a single-user SQLite backend. The primary engineering hurdles will be orchestrating the tree-node data structure so that block transclusion updates live without triggering expensive re-renders, and implementing clean regex parsing for live [[bidirectional links]].

### What you can't replicate

- The massive community of custom CSS themes and JS extensions built over years
- The exact institutional momentum and network effects of 'The Cult of Roam'

## What it does

A web-based knowledge management tool built around bidirectional linking, daily notes, block references, and transclusion for non-hierarchical thought mapping.

### Core features

- Daily Notes chronological scratchpad view
- Bidirectional auto-linking via [[page name]] syntax
- Block references and live transclusion (embedding blocks inside other pages)
- Dynamic graph view visualization connecting related pages
- Datalog or relational query engine to filter blocks by attributes and references
- Nested tree structure with keyboard-driven folding, indent, and outdent
- Real-time or optimistic multi-device sync

## The business

### Pricing

- Pro Plan: $15/mo — Standard monthly subscription with unlimited public and private graphs.
- Believer Plan: $500 — 5-year upfront commitment for power users and early access features.

### Funding

$9M raised.
- Seed Round (September 2020)
Investors: 7 institutional and angel investors

Founded 2019.
Team size: 11-50.

## The hard parts

- Building a lightning-fast hierarchical tree editor where every single line is an addressable, transcludable block
- Maintaining instantaneous bi-directional link index updates across the entire database on every keystroke
- Rendering complex Datalog or recursive graph relationship queries without UI blocking or latency
- Handling real-time collaborative conflict resolution if synchronizing across multiple sessions

## How to vibe code Roam Research

### Prerequisites

- Node.js (free): Runtime environment for building and running the full-stack web application.
- GitHub (free): Source code control and deployment pipeline integration.

### Recommended AI tools

- Claude Code: Best-in-class agentic coding tool for scaffolding complex nested tree components and database schemas.
- Cursor: Essential for iterative UI refinement of the markdown editor and sidebar split-pane layout.

### Stack

- Frontend: Next.js with React and Tailwind CSS
- Backend: Next.js API routes / Server Actions
- Database: Turso (SQLite at the edge for ultra-low latency queries)
- Auth: better-auth
- Payments: none
- Other: Vercel AI SDK, Lucide React for UI icons

### Hosting

- Vercel (Hosting the Next.js frontend and serverless API endpoints.): $0/mo
- Turso (Storing blocks, pages, and graph relationships in edge SQLite.): $0/mo

### Build guide

1. **Project Scaffolding and Database Schema** — Initialize the Next.js project with Tailwind CSS and configure Turso with tables for pages, blocks, and block references.

```
Scaffold a new Next.js project with TypeScript and Tailwind CSS. Set up Turso database connectivity using the libSQL client. Create a clean database schema with three tables: `pages` (id, title, created_at, updated_at), `blocks` (id, page_id, parent_block_id, content, order_index, created_at, updated_at), and `block_references` (id, source_block_id, target_block_id). Implement migration scripts to initialize these tables cleanly.
```

2. **Daily Notes and Page Routing** — Implement the default Daily Notes chronological view alongside dedicated page views for individual titles.

```
Build a responsive layout in Next.js with a sidebar and a main content area. Implement a Daily Notes view that automatically groups blocks by ISO date headers (e.g., [[January 1st, 2026]]) and allows seamless scrolling through past daily journals. Add dynamic routing for individual pages (`/p/[title]`) that extracts or creates pages on the fly when referenced via brackets.
```

3. **Nested Block Tree Editor** — Build an interactive block-based outliner supporting indent, outdent, enter-to-split, and backspace-to-merge mechanics.

```
Create a recursive block editor component in React where each block behaves like a bullet point. Support keyboard navigation: pressing Enter creates a new sibling block below, Tab indents a block making it a child of the block above, Shift+Tab outdents it, and Backspace on an empty block deletes it and focuses the previous block. Ensure state updates persist smoothly back to the SQLite backend via debounced server actions.
```

4. **Bidirectional Linking and Backlinks Engine** — Parse `[[Page Name]]` syntax dynamically and render live backlinks at the bottom of referenced pages.

```
Write a robust text parser utility that scans block content for double-bracket syntax `[[Page Name]]` and converts them into clickable internal links. Implement a background indexing function or database query that scans all blocks across the entire database to aggregate incoming backlinks for any given page. Render a collapsible 'Linked References' and 'Unlinked References' section at the bottom of every page view.
```

5. **Block Transclusion and References** — Implement block transclusion via `((block-uuid))` syntax to embed live, editable copies of blocks from other pages.

```
Add support for block transclusion syntax `((block-uuid))`. When a user types or pastes a block reference ID, render the target block's content live inside the current block context as an embedded, read-write view. Ensure edits made inside an embedded transcluded block update the original source block in real time across the application.
```

6. **Graph Visualization and Polish** — Add a lightweight visual graph representation using canvas or SVG and refine keyboard shortcuts and layout performance.

```
Build a visual Knowledge Graph view using an HTML5 Canvas or lightweight SVG force-directed graph library. Nodes represent pages, and edges represent bidirectional links and block references between pages. Allow users to click any node in the graph to jump straight to that page. Add keyboard shortcuts for quick search popup (`Cmd+K`) and polish the overall typography to mimic a clean, minimalist scratchpad.
```

### Cost vs paying

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

- Custom domain (optional): $12/yr
- Total: ~$12 one-time

**Ongoing costs (monthly):**

- Vercel Hobby & Turso Free Tier: $0/mo
- Total: $0/mo

- Paying for the SaaS instead: $15/mo
- Build time: 25-35 hours
- AI tool credits: $20/mo
- Break-even: Instant (Free self-hosted)

## Sources

- [Roam Research Official Website](https://roamresearch.com)
- [Vendr - Roam Research Pricing & Plans](https://www.vendr.com)
- [Wikipedia - Roam (software)](https://en.wikipedia.org/wiki/Roam_(software))