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

> AI website and link-in-bio builder for creators

- Site: https://typedream.com
- Category: Web Builder & SaaS
- Verdict: **Solid side project** (62/100 vibecodeable)
- Estimated effort: 3-4 weeks of part-time work

## Verdict

You can build a personal clone of Typedream's core block editor and site generator, but you will hit friction configuring automated custom domain SSL and complex block rendering.

Replicating Typedream for personal use is a rewarding endeavor if you leverage modern open-source block editors like TipTap alongside a robust framework like Next.js. However, wiring up dynamic multi-tenant custom domains with automatic SSL provisioning, managing complex block serialization to static pages, and orchestrating structured JSON outputs from LLMs for AI site generation will consume significant debugging time. Because Typedream is affordably priced for creators, building it makes sense only as a portfolio project or deep learning exercise rather than a financial shortcut.

### What you can't replicate

- The exact proprietary template catalog and built-in asset packs
- The massive existing creator community and network effects
- The official beehiiv distribution ecosystem

## What it does

Typedream is an AI-powered, block-based website builder that combines a Notion-like WYSIWYG editor with instant site generation, digital commerce, and content management.

### Core features

- AI website generation from natural language prompts
- Notion-style WYSIWYG block editor with slash commands
- Multi-page static site rendering and deployment
- Link-in-bio widget customization
- Digital product sales and file delivery
- Form submission collection and management
- CMS and blog collection synchronization
- Custom domain mapping and routing

## The business

### Pricing

- Free: $0/mo
- Launch: $15/mo
- Grow: $42/mo

### Funding

Undisclosed raised.
- Seed / Y Combinator (Winter 2021)
Investors: Y Combinator

Founded 2020.
Team size: 36-40.

## The hard parts

- Building a buttery-smooth Notion-like block editor with inline formatting and slash commands without heavy commercial libraries
- Translating unstructured AI LLM output into a rigid JSON block schema for reliable site rendering
- Handling multi-tenant custom domain routing, automated SSL certificates, and DNS verification at scale
- Managing dynamic database-driven CMS collections and static site re-generation on content changes

## How to vibe code Typedream

### Prerequisites

- Node.js (free): Required runtime for running Next.js and frontend tooling.
- GitHub (free): Repository hosting and continuous deployment integration.

### Recommended AI tools

- Claude Code: Best-in-class terminal agent for scaffolding multi-file React architectures and debugging block rendering logic.
- Cursor: Excellent for fine-tuning complex React UI components and inline text editing interactions in the block canvas.

### Stack

- Frontend: Next.js
- Backend: Next.js Server Actions
- Database: Turso
- Auth: better-auth
- Payments: Stripe
- Other: Vercel AI SDK, Tailwind CSS, TipTap (Block Editor)

### Hosting

- Vercel (Hosting the Next.js frontend, API routes, and static site generation outputs): $0-20/mo
- Turso (Serverless SQLite database for storing user sites, blocks, and form submissions): $0/mo

### Build guide

1. **Project Scaffolding & Database Schema** — Initialize a Next.js TypeScript project with Tailwind CSS and configure Turso with better-auth and Drizzle ORM.

```
Initialize a new Next.js 16 project with Tailwind CSS v4, TypeScript, and App Router. Set up Drizzle ORM configured for Turso (SQLite). Create database schemas for users, sites, pages, blocks (storing JSON content trees), and form submissions. Implement better-auth with email/password authentication. Ensure proper foreign key relationships and index configurations for fast site resolution by subdomain or custom domain. Provide clean separation between client components and server actions.
```

2. **Notion-Style Block Editor** — Build the WYSIWYG block editor canvas supporting slash commands, rich text formatting, and block reordering.

```
Build a Notion-style block editor component using TipTap or a modular React state architecture. Support interactive block types including paragraphs, headings, image embeds, buttons, columns/grids, and toggle lists. Implement slash ('/') command menus that filter block types on typing. Ensure blocks can be reordered via drag-and-drop or keyboard shortcuts, and serialize the entire canvas state into a structured JSON tree for database persistence.
```

3. **AI Website Generator Integration** — Implement AI-driven site layout and copy generation using the Vercel AI SDK and structured JSON generation.

```
Implement an AI website generation feature using the Vercel AI SDK (with Anthropic or OpenAI models). Create an API route that accepts a natural language prompt describing a creator's project. Use structured JSON output mode to generate a complete site wireframe, matching our custom block schema (headers, hero sections, feature grids, call-to-actions, and copy). Automatically populate the block editor canvas with the generated nodes when the prompt completes.
```

4. **Dynamic Public Site Renderer** — Create the public-facing renderer that translates stored block JSON trees into optimized, responsive web pages.

```
Build a dynamic public site renderer page at `[domain]/[slug]` or via custom domain resolution. Fetch the published site and page records from Turso based on the hostname or subdomain. Iterate through the stored block JSON tree and render high-performance, accessible React components for each block type with Tailwind CSS styling. Include responsive design adaptations for mobile viewports and basic meta tag injection for SEO.
```

5. **Digital Products & Form Submissions** — Add native form lead collection and digital product checkout integrations.

```
Add form blocks and digital product sales features. Create a form submission handler that stores entries in Turso and displays them in a dashboard table. Integrate Stripe Checkout sessions for digital products (e-books, files, or links) so that upon successful payment, buyers receive an automated download link or email receipt. Include transaction logging and basic sales analytics charts.
```

6. **Custom Domain Routing & Polish** — Configure multi-tenant domain routing, dashboard navigation, and final error handling.

```
Implement multi-tenant custom domain routing in Next.js middleware by checking incoming request hostnames against registered user custom domains in Turso. Add a user dashboard for managing sites, pages, and publishing status. Implement error boundaries, loading skeletons, and notification toasts using Sonner. Clean up TypeScript types and verify all database queries execute efficiently.
```

### Cost vs paying

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

- Domain registration (optional): $12/yr
- Total: ~$12 one-time

**Ongoing costs (monthly):**

- Vercel Hobby / Pro Hosting: $0-20/mo
- AI API tokens (OpenAI/Anthropic): ~$5/mo
- Total: ~$5-25/mo

- Paying for the SaaS instead: $20/mo (Launch Plan)
- Build time: 40-60 hours
- AI tool credits: $20/mo (Claude Pro / Cursor)
- Break-even: N/A (built for personal use and learning)

## Sources

- [Typedream Official Website](https://typedream.com)
- [beehiiv Acquires AI-Based Website Builder, Typedream](https://www.beehiiv.com/blog/typedream-acquisition)