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

> Novel Writing Software for Fiction Authors

- Site: https://dabblewriter.com
- Category: SaaS / Writing Software
- Platforms: Web app, iOS app, Android app
- Verdict: **Solid side project** (68/100 vibecodeable)
- Estimated effort: 3 to 4 weekends of focused development

## Verdict

Build a single-user personal subset with Next.js and Supabase, but expect heavy lifting around the hierarchical manuscript editor and plot grid UI.

Replicating Dabble for personal use is an achievable multi-weekend project if you scope down real-time co-authoring and focus entirely on a robust local-first or cloud-backed writing tool. The main engineering friction points will be structuring the nested book-chapter-scene tree efficiently in PostgreSQL, implementing the visual plot grid layout with smooth drag-and-drop, and ensuring manuscript text never drops during rapid typing sessions. Given the $19-$29/mo price tag, building this yourself is purely for the joy of crafting your own custom writing sanctuary.

### What you can't replicate

- The established community of 10,000+ fiction authors
- DabbleU live workshops, academy courses, and structured author events
- Decade-long brand history and writer trust

## What it does

Cloud-based long-form writing and manuscript organization software tailored specifically for fiction authors, combining plotting grids, distraction-free drafting, and manuscript editing tools.

### Core features

- Hierarchical book/chapter/scene tree management with drag-and-drop ordering
- Visual plot grid mapping chapters against narrative arcs and beats
- Character profiles and worldbuilding lore notebooks with image attachments
- Distraction-free rich text editor with daily word count goal trackers
- Real-time co-authoring and multi-device cloud synchronization
- In-context thesaurus, spelling checks, comments, and sticky notes
- Export utilities to Word, text, and PDF formats

## The business

### Pricing

- Writer Plan: $19/mo
- Author Plan: $29/mo
- Bestseller Plan: $49/mo
- Lifetime Author Access: $699

Founded 2017.
Team size: Small bootstrapped team (<15).

## The hard parts

- Building a reliable real-time multi-device sync engine with offline caching and conflict resolution for large rich-text manuscripts
- Implementing a smooth grid coordinate system for the Plot Grid that maps arbitrary chapters against custom plot lines
- Designing a performant hierarchical document tree structure that supports instant drag-and-drop reordering without layout stutter

## How to vibe code Dabble

### Prerequisites

- Node.js LTS (Free): Required runtime for executing the Next.js frontend and local build scripts.
- GitHub account (Free): Repository hosting and continuous deployment integration.
- Supabase account (Free): Provides PostgreSQL database and built-in authentication for your writing workspace.

### Recommended AI tools

- Claude Code: Best-in-class terminal agent for scaffolding database schemas, writing complex React components for the plot grid, and debugging state synchronization.
- Cursor: Ideal IDE fork for fine-tuning text editor UI components, markdown rendering, and CSS focus mode styles.

### Stack

- Frontend: Next.js with Tailwind CSS and TipTap rich-text editor
- Backend: Next.js Server Actions and API routes
- Database: Supabase (PostgreSQL with JSONB for flexible manuscript metadata and plot structures)
- Auth: better-auth
- Payments: None (Personal-use clone)
- Other: Lucide React (UI icons), Dnd-kit (drag-and-drop manuscript organization and plot grid)

### Hosting

- Vercel (Hosting the Next.js web application frontend and serverless API endpoints): $0/mo (Hobby tier)
- Supabase (PostgreSQL database storage and user authentication): $0/mo (Free tier)

### Build guide

1. **Project Scaffolding and Database Schema** — Initialize the Next.js application with Tailwind CSS and configure the Supabase database schema for manuscripts, chapters, scenes, plot grid points, and character profiles.

```
Create a new Next.js TypeScript project using App Router, Tailwind CSS, and Lucide React. Set up a Supabase client configuration file in utils/supabase. Write a complete SQL migration file that defines tables for 'projects' (id, title, user_id, description), 'manuscript_items' (id, project_id, parent_id, type [book/chapter/scene], title, content, sort_order), 'plot_cards' (id, project_id, title, description, chapter_id, arc_name, color), and 'character_profiles' (id, project_id, name, bio, image_url). Include foreign key constraints, indexes on project_id, and Row Level Security policies allowing users to manage only their own data. Output all configuration and migration files with clean directory structures.
```

2. **Authentication and Dashboard Shell** — Implement authentication using better-auth or Supabase Auth and build a responsive dashboard shell to list, create, and manage multiple novel projects.

```
Implement user authentication in the Next.js app using Supabase Auth or better-auth supporting email/password login and sign-up flows. Build a main dashboard page at /dashboard that fetches the authenticated user's novel projects from the database, displays them in a clean grid layout with cover placeholders, and includes a modal to create a new manuscript project with a title and subtitle. Add proper loading states, error handling, and navigation links pointing to /project/[id].
```

3. **Hierarchical Manuscript Tree and Sidebar Navigation** — Build a left sidebar sidebar component that renders books, chapters, and scenes in a collapsible tree with drag-and-drop reordering capabilities.

```
Build a manuscript navigation sidebar component for the project workspace at /project/[id]. It must fetch and render a hierarchical tree of books, chapters, and scenes for the active project. Implement drag-and-drop reordering using dnd-kit so users can rearrange chapters and scenes. Add buttons to add new chapters, add new scenes, delete items, and rename items directly in the tree. Ensure state updates optimistically and syncs changes back to the Supabase 'manuscript_items' table.
```

4. **Distraction-Free Rich Text Editor and Word Count Tracker** — Integrate a modern rich-text editor (such as TipTap) with a distraction-free focus mode toggle, sticky notes, and a live daily word count goal tracker.

```
Create a rich-text writing canvas component using TipTap inside /project/[id]/write. The editor should support bold, italics, headers, blockquotes, and auto-saving text changes to the database on a debounce timer. Build a top header bar displaying the active scene title, current word count, and daily word count progress bar against a customizable goal. Add a 'Focus Mode' toggle button that hides the sidebar and navigation panels, leaving only a centered, distraction-free writing window with customizable dark/light background themes.
```

5. **Visual Plot Grid and Character Notebook** — Develop the visual Plot Grid interface mapping chapters against narrative arcs and build the character profile and worldbuilding notebook views.

```
Build a visual Plot Grid view component at /project/[id]/plot that renders a matrix grid where columns represent plot lines or story arcs and rows represent chapters or scenes. Allow users to add, edit, and drag plot cards across grid cells, persisting positions to the 'plot_cards' table. Additionally, build a character profile tab at /project/[id]/characters that displays a grid of character cards with avatar images, physical traits, and backstory fields, backed by the 'character_profiles' table.
```

6. **Export Utilities and Read-to-Me Text-to-Speech** — Implement manuscript export utilities to compile chapters into downloadable Word (.docx) or text files, alongside a browser speech synthesis text-to-speech feature.

```
Implement an export feature in the project settings that compiles all chapters and scenes of a manuscript into a clean plaintext or formatted download file. Also, build a 'Read to Me' audio player toolbar at the bottom of the editor using the browser's built-in Web Speech API (window.speechSynthesis) to read the active scene text aloud with play, pause, and stop controls.
```

### Cost vs paying

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

- AI Coding Assistant (Claude Pro / Cursor): $20
- Custom Domain (optional): $12/yr
- Total: ~$32 one-time

**Ongoing costs (monthly):**

- Vercel Hobby & Supabase Free tiers: $0/mo
- Total: $0/mo

- Paying for the SaaS instead: $19/mo to $29/mo
- Build time: 25-35 hours
- AI tool credits: $20 (1 month of Claude Pro / Cursor)
- Break-even: 2 months (vs Writer plan)

## Sources

- [Dabble Official Website & Marketing Pages](https://dabblewriter.com)