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

> The AI presentation workspace

- Site: https://pitch.com
- Category: SaaS
- Verdict: **Don't bother** (25/100 vibecodeable)
- Estimated effort: 6+ months of full-time work

## Verdict

Build a personal Markdown-to-slides generator instead; replicating Pitch's multi-user collaborative vector canvas and PPTX parser from scratch is a massive undertaking.

Pitch is a highly engineered collaborative graphics suite wrapped in a SaaS platform. While you could build a rudimentary slide deck app with Next.js and Tailwind, replicating the smooth 2D vector editor, Yjs-powered multiplayer cursors, precise asset positioning, and a reliable .pptx parsing pipeline requires hundreds of hours of unglamorous canvas math and state management. The paid tiers are cheap relative to the months of solo engineering needed to reach parity.

### What you can't replicate

- The massive library of 150+ professional expert-designed templates
- The years of performance tuning on the vector canvas rendering engine
- Enterprise integrations with HubSpot and CRM tooling

## What it does

Pitch is a collaborative, cloud-based presentation workspace designed for modern teams to create, co-edit, deliver, and track presentations with AI assistance.

### Core features

- Rich 2D vector and layout slide editor
- Real-time multi-user co-editing with CRDT sync
- AI slide generation and content structuring
- Advanced tracking links with view duration telemetry
- Custom deal rooms for client sharing
- PowerPoint (.pptx) import and export pipeline
- Brand asset library and template management

## The business

### Pricing

- Free: $0 forever — For individuals and small workspaces wanting sleek slides
- Plus: $12 / month — For individual professionals
- Team: $18 / seat / month — For small teams who need to collaborate
- Business: $24 / seat / month — For scaling teams

### Funding

$137M raised.
- Seed ($3.7M, 2018)
- Series A ($19M, 2018)
- Series B ($85M, 2021)
Investors: Lakestar, Tiger Global, Index Ventures, BlueYard Capital, Thrive Capital

Founded 2018.
Team size: 45-76+.

## The hard parts

- Building a buttery-smooth 2D vector canvas rendering engine in the browser
- Real-time operational transformation or CRDT state synchronization for multi-user shape dragging
- Bi-directional .pptx parser that maps arbitrary layout shapes and fonts into a custom schema
- Granular slide-by-slide engagement telemetry tracking and analytics dashboards

## How to vibe code Pitch

### Prerequisites

- Node.js (free): Required for running the full-stack TypeScript development environment.
- GitHub (free): Version control and CI/CD deployment pipelines.

### Recommended AI tools

- Claude Code: Best-in-class coding agent for scaffolding multi-file React apps and orchestrating complex backend state logic.
- Cursor: AI-native code editor for fine-tuning complex UI components and canvas interaction handlers.

### Stack

- Frontend: Next.js with Tailwind CSS and Fabric.js / Konva for canvas rendering
- Backend: Next.js API routes with Liveblocks for multiplayer sync
- Database: Neon (Serverless Postgres)
- Auth: better-auth
- Payments: Stripe
- Other: Vercel AI SDK, Anthropic API, PostHog

### Hosting

- Vercel (Hosting the Next.js frontend and serverless API endpoints): $0-20/mo
- Neon (Serverless Postgres database for user workspaces and presentation schemas): $0/mo
- Liveblocks (Real-time multiplayer synchronization and presence for collaborative editing): $0-29/mo

### Build guide

1. **Project Scaffolding and Database Schema** — Initialize the Next.js application with Tailwind CSS, configure Neon database with Drizzle ORM, and set up better-auth for user authentication.

```
Scaffold a new Next.js 16 application using App Router, TypeScript, and Tailwind CSS. Set up Drizzle ORM configured for Neon serverless Postgres. Define database schemas for Users, Workspaces, Presentations (storing slides as structured JSON trees), and SlideComments. Integrate better-auth for secure email/password and Google OAuth login. Ensure clean folder organization with absolute path aliases.
```

2. **Slide Canvas Editor Foundation** — Build the core interactive slide editor using HTML5 canvas or SVG manipulation layers to handle text, shape placement, and styling.

```
Build a responsive slide editor workspace component using React and Konva.js (or Fabric.js). Implement a toolbar allowing users to add text boxes, rectangles, circles, and images to a fixed 16:9 slide canvas. Support selection bounding boxes, dragging, resizing, color pickers, font family selectors, and layer ordering (bring forward / send backward). Save the canvas state as a serializable JSON object to the local React state and database.
```

3. **Real-Time Collaboration with Liveblocks** — Integrate Liveblocks to enable multi-user presence, remote cursors, and real-time state synchronization for deck editing.

```
Integrate Liveblocks into the slide editor to enable multiplayer co-editing. Set up room provider hooks to broadcast active user presence, remote cursors with user names, and synchronized slide selection states. Implement CRDT-backed shared storage for slide elements so that when user A drags a shape or updates text, user B sees the update instantly with zero race conditions.
```

4. **AI Presentation Generation Agent** — Implement an AI generation pipeline using the Vercel AI SDK and Anthropic API to generate structured presentation decks from text prompts.

```
Create an AI generation modal where users can type a prompt and select a deck tone. Use the Vercel AI SDK and Anthropic Claude Sonnet API with structured JSON output mode to generate a multi-slide presentation object containing slide titles, subtitle layouts, bullet points, and suggested background colors. Automatically populate the editor canvas with the generated slides upon completion.
```

5. **Presentation Sharing Links and Analytics Telemetry** — Build public sharing links, viewer engagement tracking, and basic slide view duration analytics.

```
Build a public sharing link system where users can generate unique public URLs for their presentations. Implement an analytics tracker that logs visitor sessions, timestamps, slide view durations, and exit rates when recipients open the shared deck. Create an analytics dashboard page displaying viewer engagement telemetry charts for presentation owners.
```

6. **PDF Export and Polish** — Add client-side PDF export functionality and polish UI navigation across workspaces and teamspaces.

```
Implement client-side PDF export for presentations using html2canvas and jsPDF to render each slide cleanly into a downloadable document. Build workspace management screens allowing users to organize presentations into folders, invite guests with commenter roles, and manage team settings. Polish the application UI with smooth modals, tooltips, and loading states.
```

### Cost vs paying

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

- Custom domain registration: $12 one-time
- Total: ~$12 one-time

**Ongoing costs (monthly):**

- Vercel Hobby/Pro Hosting: $0 - $20/mo
- Liveblocks Collaboration Tier: $0 - $29/mo
- Anthropic API Credits for AI Agent: ~$5/mo
- Total: ~$5 - $54/mo

- Paying for the SaaS instead: $18 - $24 / seat / month
- Build time: 120-160 hours
- AI tool credits: $20 (Cursor/Claude Code Pro)
- Break-even: Not practical for commercial replacement; built solely for learning canvas architecture.

## Sources

- [Pitch Official Website & Pricing](https://pitch.com)