Skip to the presentation
Press F or Present to start. ↑ ↓ change slides; ← → move through the active carousel, or change slides when there is none.

Your first slidepig deck

Let's make something worth presenting.

Follow this guide as a page, or press F to turn it into a deck.

You will need Node.js 22.12 or newer and npm. slidepig uses React 19 or newer.

01

01 · A place for your ideas

Start with a little piggy.

The scaffold gives you a site with a deck, an image pipeline, and a Cloudflare Worker configuration. You own all of its source files.

Run the commands below, then open the local URL printed by Vite. The page is server-rendered in development, just like the published version.

terminal
npx slidepig create my-decks
cd my-decks
npm install
npm run dev
02

02 · Your deck is a file

One file. No registration form.

Run npm run new -- my-pitch to create src/decks/my-pitch.ts. Its filename becomes its URL: /my-pitch/ in the starter. Each slide needs an id and a title. Give the id a stable name so shared links keep working.

Write plain text in body paragraphs, use built-in layouts, or use a .tsx deck for React content and custom layouts. Assets in public/ are available at the root: public/photo.jpg becomes /photo.jpg.

src/decks/my-pitch.ts
import { defineDeck } from "slidepig";

export default defineDeck({
  title: "My pitch",
  description: "An idea worth sharing.",
  slides: [
    { id: "hello", layout: "hero", title: "Hello, world." },
    {
      id: "plan",
      title: "Here is the plan.",
      body: ["One idea per slide. Room to explain it."],
    },
  ],
});
03

03 · Dress for the occasion

Try the look before editing the code.

On localhost, press D to open the visual tuner. Try backgrounds, overlays, themes, and accents. Copy the resulting settings into your deck file to keep them; the tuner does not save your source.

Add images and videos to deck.media and reference their ids from slides. npm run build optimizes configured images and prerenders the pages. Custom components, layouts, and CSS can live alongside the deck.

04

04 · Your turn

Read it. Present it. Send the link.

  1. 01

    F / Esc

    Enter presentation mode; return to reading. The Present button works on touch screens.

  2. 02

    ↑ / ↓

    Move between slides while presenting.

  3. 03

    ← / →

    Move through the active media carousel.

  4. 04

    Space

    Play or pause the slide's video while presenting.

  5. 05

    #plan

    Share a slide directly by adding its id to the page URL.

05

05 · Out of the pen

Build, preview, then publish.

npm run build optimizes images, prerenders pages, and checks decks, HTML, links, and local assets. Fix any build errors before publishing. npm run preview serves the result through the Cloudflare Worker locally.

For Cloudflare, set your Worker name in wrangler.jsonc, authenticate with Wrangler, and run npm run deploy. Configure your custom domain in Cloudflare and set SITE_ORIGIN to that origin when building, so canonical URLs point to your site. The generated dist/ pages can also be served by another static host; configure clean URLs and the 404 page there.

terminal
npm run build
npm run preview
# When ready, with Cloudflare configured:
# SITE_ORIGIN=https://decks.example.com npm run build
# npm run deploy
06

Already have a React app?

Let the pig piggyback.

Install slidepig in a React 19+ app and import its CSS once. On a page with its own main landmark, pass embedded so the deck becomes a labelled region. Its styles are scoped to the deck.

A deck can also own the whole page: omit embedded, or use mountDeck from slidepig/client to render or hydrate it into an element.

Pitch.tsx
import { Deck, defineDeck } from "slidepig";
import "slidepig/styles.css";

const deck = defineDeck({
  title: "Our next chapter",
  slides: [{ id: "hello", title: "An idea worth sharing." }],
});

export function Pitch() {
  return <Deck deck={deck} embedded />;
}