# How to Vibe Code Your Own Literature & Latte (and Stop Paying for It)

> Productivity and writing software tailored for long-form authors and researchers

- Site: https://literatureandlatte.com
- Category: Desktop Productivity Software
- Verdict: **Serious undertaking** (45/100 vibecodeable)
- Estimated effort: 3-6 months of focused part-time development

## Verdict

Build a web-based writing dashboard subset rather than trying to replicate Scrivener's native C++ and Cocoa architecture, but expect significant engineering overhead around the file bundle structure and compiler.

Trying to rebuild Scrivener as a faithful local native clone requires mastering low-level desktop file systems, RTF rendering, and an intricate typesetting compile engine that takes years to refine. A solo developer can successfully vibe-code a modern web-based single-page application subset using React, TypeScript, and local storage or IndexedDB, but matching the lightning-fast native performance of the original desktop app is unrealistic without massive time investment.

### What you can't replicate

- Two decades of edge-case bug fixes in text handling and printing pipelines
- The exact native Cocoa and C++ performance characteristics on macOS and Windows
- Deeply embedded ecosystem goodwill and book-publishing layout presets

## What it does

Scrivener and Scapple developer ecosystem providing hierarchical project management, outliners, virtual corkboards, and compilation engines for novelists and academics.

### Core features

- Hierarchical sidebar tree structure (The Binder)
- Virtual corkboard with index cards and positional state
- Multi-pane split-screen text editor supporting Rich Text
- Dynamic document outliner table view
- Multi-format export compile engine (ePub, PDF, docx)
- Local file-bundle directory persistence model (.scriv project format)
- Distraction-free composition mode overlay

## The business

### Pricing

- Standard License (macOS / Windows): $59.99 — Perpetual single-platform license for desktop users
- iOS App: $23.99 — Mobile application for iPadOS and iOS

Founded 2006.
Team size: 10-12 boutique team.

## The hard parts

- Replicating native multi-pane desktop window management and split-split-view canvas performance in web or cross-platform wrappers
- Building a complex document compiler that stitches together hundreds of independent RTF fragments with dynamic numbering and page styling
- Designing a local-first atomic file-system persistence bundle that resists corruption during rapid edits
- Managing robust synchronization across local file systems without overwriting conflicting changes

## How to vibe code Literature & Latte

### Prerequisites

- Node.js (free): Required for running the full-stack web application development environment
- GitHub (free): Version control and repository hosting for the project codebase

### Recommended AI tools

- Claude Code: Autonomous agentic coding tool capable of managing complex multi-file React architectures and state trees
- Cursor: AI-native code editor for fine-tuning complex multi-pane layout components and tree views

### Stack

- Frontend: Next.js
- Backend: Next.js API routes
- Database: Turso
- Auth: better-auth
- Payments: none
- Other: Tailwind CSS, Zustand, TipTap

### Hosting

- Cloudflare (Hosting static frontend assets and edge workers for the web application clone): $0-5/mo

### Build guide

1. **Project Scaffolding & Data Model** — Initialize a Next.js application configured with Tailwind CSS, TypeScript, and Turso for local database persistence of project document nodes.

```
Initialize a new Next.js project with Tailwind CSS, TypeScript, and Turso using Drizzle ORM. Design a hierarchical data schema for projects, documents (supporting parent-child relationships via a binder tree structure), metadata tags, and custom status fields. Implement a database migration file and ensure local connection strings are fully functional.
```

2. **Binder Sidebar & Tree Navigation** — Build a recursive multi-level sidebar component resembling Scrivener's binder with drag-and-drop node reordering capabilities.

```
Create a recursive React component that renders a hierarchical document tree ('The Binder') with expandable folders, document items, and trash bins. Integrate a drag-and-drop library (such as dnd-kit) to allow users to reparent documents, reorder siblings, and update the database state instantly with optimistic UI updates.
```

3. **Rich Text Editor & Split Pane View** — Implement a distraction-free rich text editor integrated with split-screen view options for simultaneous multi-document reference.

```
Integrate TipTap or a robust rich text editor into the main workspace area. Support basic markdown formatting, word count trackers, session targets, and footnotes. Build a split-pane layout manager allowing users to split the editor vertically or horizontally to view two documents side-by-side from the binder.
```

4. **Virtual Corkboard Interface** — Develop a visual grid-based corkboard view where sub-documents appear as index cards that can be freely rearranged to change document order.

```
Build a virtual corkboard view that reads the child documents of any selected folder in the binder. Render each document as an interactive index card displaying its title and synopsis snippet. Allow users to drag index cards around a grid canvas, automatically updating the underlying sort order of the documents in the project tree.
```

5. **Document Outliner Table View** — Create a tabular outliner view displaying document metadata columns like word count, synopsis, label, and status.

```
Implement an outliner view component displaying project documents in a spreadsheet-like table. Include sortable columns for Title, Word Count, Label, Status, and Synopsis. Ensure inline editing of metadata fields syncs instantly back to the main database and binder state.
```

6. **Export Compilation Engine** — Construct a document compilation pipeline that merges hierarchical chapters into a single formatted download file.

```
Build a compile feature backend service that traverses the binder hierarchy in order, collects text contents of selected folders, applies header prefixes, separator dividers, and markdown transformations, and generates a downloadable HTML, PDF, or text compilation package for the user.
```

### Cost vs paying

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

- Claude Pro / AI Coding Subscription: $20
- Total: ~$20 one-time

**Ongoing costs (monthly):**

- Cloudflare Edge Hosting & Turso DB: $0/mo (Free Tiers)
- Total: $0/mo

- Paying for the SaaS instead: $59.99 one-time per platform
- Build time: 60-90 hours
- AI tool credits: $20 (Claude Pro)
- Break-even: Free forever (Personal Hobby Project)

## Sources

- [Literature & Latte Official Website](https://literatureandlatte.com)
- [Literature & Latte - About Us](https://literatureandlatte.com/about)
- [Literature & Latte - Store & Licensing Info](https://literatureandlatte.com/store)