# How to Vibe Code Your Own LivingWriter (and Stop Paying for It) > AI Writing App for Authors, Screenwriters, Manuscripts & Documents - Site: https://livingwriter.com - Category: Productivity & Writing Software - Platforms: Web app, iOS app, Android app - Verdict: **Solid side project** (68/100 vibecodeable) - Estimated effort: 2-4 weeks part-time ## Verdict You can build a strong personal version of LivingWriter with AI tools, but coordinating the drag-and-drop planning boards with a multi-tabbed text editor takes serious frontend engineering. Replicating the core prose editor, chapter list, and LLM prompt wrappers is straightforward with modern web frameworks and AI coding agents. However, building the visual drag-and-drop boards (Manuscript, Element, and Planning boards) that stay in sync with sidebar trackers and local edits requires careful state management. If you only write for yourself, paying $15-30/month is cheaper than spending 3 weeks debugging text selection edge cases and export formatters. ### What you can't replicate - Official Canva and Google Drive enterprise partnership integrations - Proprietary publishing export validation pipelines across obscure e-reader specs ## What it does A cloud-first, template-driven writing platform designed for authors, novelists, screenwriters, students, and professionals to plan, write, and format manuscripts and documents in a single workspace. ### Core features - Chapter/scene drag-and-drop manuscript reorganization - Multi-tabbed rich text document editor - Visual planning boards (Manuscript, Element, Planning, Research boards) - Story element sidebar trackers (characters, settings, items, tags) - Cloud autosave and minute-by-minute version history/snapshots - Opt-in AI suite (outlining, element generation, rewrites, manuscript chat, script conversion) - Multi-format export (DOCX, PDF, EPUB, Amazon KDP-ready) ## The business ### Pricing - Free: $0/mo - Pro Plan: $15/mo - Pro + AI Plan: $30/mo Founded 2020. Team size: Small indie team. ## The hard parts - Building a smooth, performant multi-tabbed rich text editor with drag-and-drop chapter restructuring - Synchronizing relational sidebar elements (characters/tags) contextually with real-time text modifications - Orchestrating opt-in LLM workflows for structured JSON-compliant novel outlines and screenplay conversions - Formatting complex publishing-standard exports (.epub, .docx) cleanly from internal document blocks ## How to vibe code LivingWriter ### Prerequisites - Node.js (free): Runtime environment for building and running the full-stack web application. - GitHub (free): Source control and integration for deployment pipelines. - Anthropic API Key (Pay-as-you-go (~$5-10/mo)): Powers the AI outlining, rewrites, and manuscript chat features. ### Recommended AI tools - Claude Code: Best-in-class terminal agent for scaffolding complex multi-file Next.js app structures and debugging state loops. - Cursor: Ideal for fine-tuning the rich text editor component and building intricate drag-and-drop board interfaces. ### Stack - Frontend: Next.js with Tailwind CSS and TipTap/ProseMirror rich text editor - Backend: Next.js API routes / Server Actions - Database: Turso (SQLite at the edge for lightning-fast personal workspace saves) - Auth: better-auth - Payments: None (Personal use clone) - Other: Vercel AI SDK for streaming LLM responses, Drizzle ORM for schema definition, Fal.ai for AI book cover image generation ### Hosting - Vercel (Hosting the Next.js frontend and serverless API endpoints on the Hobby tier.): $0/mo - Turso (Managing lightweight relational storage for chapters, manuscripts, and tracking elements.): $0/mo ### Build guide 1. **Scaffold Project and Database Schema** — Initialize the Next.js application with Tailwind CSS, configure Turso database with Drizzle ORM, and set up better-auth for single-user local access. ``` Create a new Next.js 16 project with TypeScript and Tailwind CSS v4. Initialize Drizzle ORM connected to a Turso SQLite database. Define the database schema for: users, manuscripts (id, title, genre, targetWords, createdAt), chapters (id, manuscriptId, title, content, orderIndex, status), elements (id, manuscriptId, name, type, description, aliases, relations), and notes (id, manuscriptId, chapterId, content, priority). Implement better-auth configured for email/password login to lock down the personal workspace. ``` 2. **Build the Rich Text Editor and Chapter Management** — Implement a distraction-free rich text editor using TipTap, featuring multi-tabbed chapter navigation and autosave functionality. ``` Build a multi-tabbed document editor component in Next.js using TipTap. Create a sidebar listing chapters for the active manuscript with drag-and-drop reordering capabilities (using @hello-pangea/dnd or dnd-kit). Implement debounced auto-saving via Server Actions that syncs editor content to the Turso database every 2 seconds, showing a subtle 'Saved' indicator in the UI. Ensure open chapters render in side-by-side or tabbed views with clean typography and distraction-free dark/light styling options. ``` 3. **Build the Visual Planning Boards** — Create interactive drag-and-drop boards for managing manuscript structures, character elements, and research assets. ``` Create a 'Boards' view in the Next.js dashboard with a tab switcher: Manuscript Board, Element Board, and Planning Board. The Manuscript Board must render chapters as visual cards in a kanban or grid layout supporting drag-and-drop repositioning that updates chapter orderIndex values. The Element Board must display characters, locations, and items as cards categorized by tags, allowing users to inspect relations, aliases, and appearance lists ('Appears In' chapters). ``` 4. **Implement Sidebar Trackers and Stash** — Add contextual sidebars for notes, to-do lists, stashes, and element cross-referencing. ``` Build a collapsible sidebar for the document editor containing four tabs: To-Do List (add/complete tasks with priorities tied to chapters), Stash (save highlighted alternate text snippets into a personal collection for later insertion), Footnotes (manage auto-collected citations), and Elements Context (surface characters and settings mentioned or linked within the active chapter text). Ensure all sidebar items persist cleanly to the Turso database. ``` 5. **Integrate AI Suite with Vercel AI SDK** — Wire up AI outlining, text rewriting, manuscript chat, and cover generation using the Anthropic API and Fal.ai. ``` Integrate the Vercel AI SDK into the Next.js backend using the Anthropic API. Build server endpoints and UI action buttons for: (1) AI Outlines (generate structured chapter blueprints from a prompt), (2) AI Rewrite (stream tone and prose transformations for highlighted text selections), (3) AI Manuscript Chat (context-aware assistant answering questions about your story elements), and (4) AI Book Cover Generation using Fal.ai (Flux model) triggered by a text description input box. ``` 6. **Implement Export Engines and Polish UI** — Add export utilities for downloading manuscripts as clean plain text, Markdown, or PDF files, and polish the application layout. ``` Implement an export utility modal that compiles all chapters of the active manuscript in correct orderIndex sequence and triggers client-side downloads for standard formats (.txt, .md, and formatted PDF using jspdf or html2pdf). Polish the overall UI with clean loading states, responsive sidebar toggles, and smooth transitions for a distraction-free writing environment. ``` ### Cost vs paying **Starting costs (one-time):** - Custom Domain (optional): $12/year - Anthropic API Starting Credits: $10 one-time - Total: ~$22 one-time **Ongoing costs (monthly):** - Vercel Hobby Hosting: $0/mo - Turso Database: $0/mo - Anthropic API / Fal.ai usage: ~$5-10/mo - Total: ~$8/mo - Paying for the SaaS instead: $30/mo (Pro + AI Plan) - Build time: 25-35 hours - AI tool credits: $20/mo (Claude Pro) - Break-even: 1 month of Pro+AI plan ## Sources - [LivingWriter Official Website](https://livingwriter.com) - [LivingWriter AI Features Overview](https://livingwriter.com/ai-features)