Slidebook

Build polished, collaborative, and programmable slide decks with React and Next.js. Slidebook is an end‑to‑end toolkit for creating presentations with first‑class support for theming, live preview, and real‑time collaboration. AI‑assisted authoring is available through the integrated web editor.

Overview 

Slidebook enables you to author slides as JSX/TSX, style them with Tailwind, and run them in a modern Next.js app. Choose between a zero‑config simplified mode for quick presentations or a fully customizable professional mode for complete control. Real‑time features—including multi‑device control, host view, and QR sharing—are provided by an optional server.

Packages 

Features 

• AI‑assisted authoring: Generate or refine content directly in the web editor (not distributed as a standalone package)
• Zero‑config start: Drop TSX files into slides/ and run immediately
• Professional mode: Eject to a full Next.js app for complete customization
• Theming: Ready‑made themes powered by Tailwind design tokens
• Real‑time sync: Multi‑device control, QR sharing, and host view
• Speaker tools: Speaker notes, next‑slide preview, and fast navigation

Quick Start 

Simplified Mode 

No configuration needed. Simply create a slides/ folder and add your slide files:

slides/
  1.tsx
  2.tsx
  slide-3.tsx

Professional Mode 

For full control over structure and rendering, eject to a full Next.js project:

slidebook eject

This scaffolds a complete Next.js app wired to @slidebook/core.

Examples 

Check out live examples and demos at slidebook.dev/presentations .

For local examples, see the examples  directory in this repository.

Modes 

Simplified Mode 

Author slides in slides/ and run with the CLI. Ideal for quick decks, workshops, or sharing.

Professional Mode 

Eject to a full Next.js project for complete control over routing, data fetching, and rendering:

slidebook eject

This scaffolds a Next.js app wired to @slidebook/core.

Commands 

slidebook dev           # Start local development server with hot reload
slidebook build         # Build the app for production
slidebook start         # Run production build (app + optional server)
slidebook start app     # Run only the app
slidebook start server  # Run only the server
slidebook eject         # Switch to full custom project mode (Next.js)

Recommended Stack 

• Tailwind CSS: Preconfigured design tokens and themes
• Framer Motion: Smooth animations and transitions
• Next.js: App Router with Server Components and async data fetching

Note

Slides are React Server Components by default, so you can use async logic, for example to fetch data directly inside a slide:

Code Copied

const data = await db.query("SELECT * FROM ...");

Configuration 

Configuration can be provided via config file, CLI arguments, or environment variables. Precedence order: CLI argument > environment variable > config file > default.

Example slidebook.config.js 

// @ts-check

/** @type {import('@slidebook/cli/lib/config').Config} */
export default {
  slide: {
    width: 1200,
    height: 600,
  },
  app: {
    serverUrl: "http://localhost:3000",
    qrUrl: "https://slidebook.dev",
    port: 3000,
  },
  auth: {
    password: "qwerty",
  },
};

Full options 

Project structure 

Professional mode 

.
├── src/
│   ├── app/                       # Next.js app directory
│   │   ├── [[...pathname]]/       # Slide route segment
│   │   │   └── page.tsx           # Renders current slide
│   │   ├── layout.tsx             # App layout with theme and wrapper
│   │   └── globals.css            # Global styles
│   └── slides/                    # Your slides, one file per slide
│       ├── 0.tsx                  # First slide
│       ├── 1.tsx                  # Second slide
│       └── index.tsx              # Optional wrapper for all slides
├── public/                        # Static assets
├── slidebook.config.js            # Config file
└── package.json

Slides segment (src/app/[[...pathname]]/page.tsx):

import { RootPage } from "@slidebook/core/lib/components/root-page";
import { generateStaticParamsFactory } from "@slidebook/core/lib/lib/generate-static-params";
import { slides } from "../slides";

export const generateStaticParams = generateStaticParamsFactory(slides.length);

export default async function SlidePage({ params }: { params: Promise<{ pathname: string[] }> }) {
  const { pathname } = await params;
  return <RootPage segments={pathname} slides={slides} />;
}

Slides definition (src/slides/index.tsx):

export const slides = [
  { component: Slide1, notes: Notes1 },
  { component: Slide2 },
];

Layout (src/app/layout.tsx):

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import { SlideLayer } from "@slidebook/core/lib/components/slide-layer";
import { Layer } from "./slides/layer";

import "./globals.css";
import "@slidebook/core/lib/styles.css";

export const metadata: Metadata = {
  title: "Slidebook",
  description: "Advanced presentation tool",
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={Inter({ subsets: ["latin"] }).className}>
        <Layer>
          <SlideLayer>{children}</SlideLayer>
        </Layer>
      </body>
    </html>
  );
}

export const dynamic = "error";

Simplified mode 

.
├── slides/             # Your slides, one file per slide
│   ├── 0.tsx           # First slide
│   ├── 1.tsx           # Second slide
│   └── layer.tsx       # Optional wrapper for all slides
├── public/             # Static assets
├── slidebook.config.js # Config file
└── package.json

Example slide (slides/1.tsx):

export const Slide = () => (
  <h1 className="text-4xl font-bold text-center text-white">Hello World</h1>
);

export const Notes = () => <p>Welcome notes for host view</p>;

Layer (slides/layer.tsx):

export const Layer = ({ children }) => (
  <div className="p-12">{children}</div>
);

Themes 

Import a theme in layout.tsx (professional mode) or slides/layer.tsx (simplified mode):

import "@slidebook/core/lib/assets/themes/pink-neutral.css";

Available themes: blue-neutral, blue-slate, green-neutral, green-slate, orange-neutral, orange-slate, pink-neutral, pink-slate.

Real‑Time Sync and Host View 

When the host changes a slide, theme, or QR code, all connected clients update instantly across devices. The host view displays the current slide, next slide preview, speaker notes, and navigation controls. Access requires a password configured via config file, CLI arguments, or environment variables.

Running the App 

Running Together (Recommended) 

Run both the app and server together:

slidebook start

Runs both server and editor in one command — enabling:

• Real-time sync across devices
• QR code sharing
• Host view & navigation

Tip

Recommended for local use and self-hosting

Running Separately 

For serverless hosts like Vercel that don't support WebSockets, run the app and server separately:

slidebook start server
slidebook start app

Useful if you're deploying to environments like Vercel, which do not support WebSocket or real-time infrastructure.

Important

When running separately, pass the server URL to the app

// slidebook.config.js
export default {
  app: {
    serverUrl: "https://your-slidebook-server.example.com",
  },
};

Deployment 

• Serverless hosts (Vercel): Deploy the app only. Real‑time features require a separately deployed server instance and serverUrl configuration.
• Self‑hosted (Docker, Fly.io, VPS): Run slidebook start to launch both services together, or run them independently and configure serverUrl in your config.

Contributing 

Issues and pull requests are welcome. If you enjoy using Slidebook, consider starring the repository—it helps guide prioritization and future development.

License 

MIT