How to vibe codeSlides
Professional presentations. From draft to delivery.
slides.com ↗Presentation & Productivity SaaS
The verdict: can you vibe code Slides?
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.
Estimated effort: 2-3 weeks part-time
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
Founded
2013
Raised
—
Team
1-10
Cheapest paid tier
$0
What Slides 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
Funding
Unknown / bootstrapped
Pay vs build, cumulative
Break-even at month 3 — after that, every month is money kept.
The hard parts of vibe coding Slides
- 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 vibecode Slides
Prerequisites
Node.jsfree
Required runtime for executing the Next.js framework and installing frontend dependencies.
GitHubfree
Source control and integration target for Vercel deployment.
AI coding tools
Recommended 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 & infrastructure
| 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
01Project 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.02Reveal.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.03Rich 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.04AI 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.05Live 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.06Exporting, 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 for Slides
What will you build it with?
Starting total with Claude Code$0 one-time
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 Slides
$10/mo (Pro Plan)
Your time to build
35-50 hours
AI tool credits
~$20 (Claude Pro subscription)
Break-even
Never (built for learning and personal use)
Vibe code Slides: FAQ
- Can you vibe code Slides yourself?
- Solid side project — 68/100 vibecodeable. 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.
- How long does it take to vibe code Slides?
- 2-3 weeks part-time — roughly 35-50 hours of hands-on time with an AI coding agent.
- How do you build your own Slides?
- Scoped to personal use: Next.js with Tailwind CSS, reveal.js, and Monaco/Ace Editor on the front, Next.js Server Actions and Route Handlers with WebSockets behind it, Turso (SQLite at the edge) for data. Follow the 6-step build guide on this page — each step has a paste-ready prompt for an AI coding agent.
- How do you code your own Slides without being an expert?
- Use an AI coding tool (Claude Code or Cursor) and work in small steps: scaffold, data model, core screens, then deploy. Realistic effort: 2-3 weeks part-time. The prompts on this page are written so the AI does the heavy lifting.
- How much does it cost to vibe code Slides instead of paying?
- About ~$12 one-time to start and ~$5/mo to run, versus $10/mo (Pro Plan) for Slides. Break-even: Never (built for learning and personal use).
- What stack should you use to vibe code Slides?
- Next.js with Tailwind CSS, reveal.js, and Monaco/Ace Editor; Next.js Server Actions and Route Handlers with WebSockets; Turso (SQLite at the edge); plus Vercel AI SDK, KaTeX for math formulas, highlight.js for code blocks.