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

> Professional presentations. From draft to delivery.

- Site: https://slides.com
- Category: Presentation & Productivity SaaS
- Verdict: **Solid side project** (68/100 vibecodeable)
- Estimated effort: 2-3 weeks part-time

## Verdict

Build a solid side project clone focusing on the core reveal.js editing loop and AI slide generation, but skip real-time laser pointers and multi-region team SSO unless you have months to spare.

Replicating the core presentation editor and JSON-to-deck rendering using reveal.js is straightforward with modern AI tooling. However, achieving production-grade real-time synchronization of audience cursors, handling robust multi-user CRDT co-editing, and building a fully functional Model Context Protocol (MCP) server involves intricate state management and websocket engineering that will swallow dozens of debugging hours.

### What you can't replicate

- The exact organic user growth, public presentation library, and forking network of slides.com
- The ecosystem goodwill of being the official home of reveal.js

## What it does

A modern, cloud-based presentation platform built on top of the open-source presentation framework reveal.js, supporting visual and block-based editing, AI assistance, live streaming, real-time collaboration, and developer APIs.

### Core features

- reveal.js-powered HTML presentation rendering engine with 2D/3D transitions
- Block-based drag-and-drop slide editor (text, code blocks with highlight.js, KaTeX math, shapes, iframes)
- AI assistant to generate slide outlines, draft copy, and translate content across 40+ languages
- Live presentation streaming and real-time cursor/laser pointer synchronization
- Dual-screen Speaker View with notes and timers, plus mobile-device remote control
- PDF export and self-contained HTML archive exporting
- REST API and Model Context Protocol (MCP) server for programmatic deck generation
- Private sharing links with password protection and view analytics

## The business

### Pricing

- Free: $0
- Lite: $5/mo
- Pro: $10/mo
- Team: $20/mo

Founded 2013.
Team size: 1-10.

## The hard parts

- Multiplexing real-time slide state, laser pointer coordinates, and live annotations across viewers via WebSockets without perceptible latency
- Engineering a robust 2D/3D layout canvas engine that reliably translates structured block configurations into fluid reveal.js DOM hierarchies
- Implementing a secure HTML/iframe sanitization pipeline that allows custom CSS and embedded widgets without exposing the application to XSS
- Structuring an HTTP Model Context Protocol (MCP) server that parses natural language tool calls into complex slide deck JSON schemas

## How to vibe code Slides

### Prerequisites

- Node.js (free): Required runtime for executing the Next.js framework and installing frontend dependencies.
- GitHub (free): Source control and integration target for Vercel deployment.

### Recommended AI tools

- Claude Code: Best-in-class terminal agent for scaffolding complex full-stack web applications, managing multi-file structures, and debugging state synchronization.
- Cursor: Ideal for fine-tuning the visual presentation editor, CSS styling, and complex reveal.js integration components.

### Stack

- Frontend: Next.js with Tailwind CSS, reveal.js, and Monaco/Ace Editor
- Backend: Next.js Server Actions and Route Handlers with WebSockets
- Database: Turso (SQLite at the edge)
- Auth: better-auth
- Payments: none
- Other: Vercel AI SDK, KaTeX for math formulas, highlight.js for code blocks

### Hosting

- Vercel (Hosting the Next.js frontend, API endpoints, and serverless functions): $0-20/mo
- Cloudflare (Hosting serverless SQLite database via Turso and edge asset delivery): $0/mo

### Build guide

1. **Project Scaffolding and Database Schema** — Initialize the Next.js project with Tailwind CSS, configure better-auth with SQLite via Turso, and set up the database tables for users, decks, and slides.

```
Scialize a new Next.js project using App Router, TypeScript, and Tailwind CSS. Install better-auth configured for SQLite (Turso). Create a database schema with tables for 'users', 'decks' (id, title, userId, settings json, createdAt, updatedAt), and 'slides' (id, deckId, orderIndex, content json, background json). Implement user authentication flows (sign-up, sign-in, session management) and protect dashboard routes. Ensure clean TypeScript types across all models.
```

2. **Reveal.js Presentation Engine & Editor UI** — Integrate reveal.js into a React wrapper component, and build a multi-pane visual slide editor supporting horizontal and vertical slides.

```
Build a presentation editor interface in Next.js featuring a sidebar slide navigator, a main canvas area, and a properties inspector. Integrate reveal.js within a React wrapper component so that edits in the inspector dynamically update the slide layout in real-time. Support horizontal and vertical slide grids. Implement deck state management in React state synchronized with auto-saving API endpoints to persist slide structures as JSON documents.
```

3. **Rich Content Blocks & Parsers** — Add support for advanced block types including syntax-highlighted code blocks, KaTeX math formulas, embedded media, and custom CSS.

```
Add rich content block types to the slide editor: text blocks with markdown/formatting, code blocks with highlight.js syntax highlighting, LaTeX math formulas rendered via KaTeX, and iframe/media embedding. Build a custom CSS editor panel that injects style tags directly into the active presentation preview. Implement strict sanitization for user-provided HTML and iframes to prevent XSS vulnerabilities.
```

4. **AI Slide Generation & Translation** — Integrate the Vercel AI SDK to power an AI copywriter, outline generator, and multi-language deck translator.

```
Integrate the Vercel AI SDK using Anthropic Claude models to add AI features to the deck editor. Build an AI Slide Generator modal that takes a topic prompt and generates a complete JSON structure of slides, titles, and bullet points. Implement an AI Copywriter tool to rewrite selected text blocks and a Presentation Translation feature that translates all deck text blocks into a selected language in one operation, saving the result as a new editable copy.
```

5. **Live Presenting, Speaker View & Remote Control** — Implement the dual-screen Speaker View with notes and timers, along with a mobile-friendly remote control interface.

```
Create a dedicated Speaker View screen for presenters displaying current slide notes, elapsed time timer, a clock, and a live preview of the next slide. Implement a mobile-friendly Remote Control view accessible via QR code that allows a phone to send navigation commands (next, previous slide) to the active presentation window using WebSockets or Server-Sent Events.
```

6. **Exporting, Sharing & API Endpoints** — Add PDF export capabilities, self-contained HTML bundle generation, public/private link sharing, and a REST API endpoint.

```
Implement deck sharing features: generate public and private shareable links with optional password protection and view tracking counters. Build an export feature that bundles the deck into a self-contained HTML zip file powered by reveal.js for offline self-hosting. Create a secured REST API endpoint (`/api/decks`) allowing external clients to create and retrieve presentations using Bearer token authentication.
```

### Cost vs paying

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

- Custom domain (optional): $12/year
- Total: ~$12 one-time

**Ongoing costs (monthly):**

- Vercel / Cloudflare hosting: $0/mo
- Anthropic API credits for AI slide generation: ~$3-5/mo
- Total: ~$5/mo

- Paying for the SaaS instead: $10/mo (Pro Plan)
- Build time: 35-50 hours
- AI tool credits: ~$20 (Claude Pro subscription)
- Break-even: Never (built for learning and personal use)

## Sources

- [Slides Homepage](https://slides.com/)
- [Slides Pricing & Plans](https://slides.com/pricing)
- [Slides Features Overview](https://slides.com/features)
- [Slides About & Press](https://slides.com/about)