Getting started

The CLI scaffolds a new Next.js project with the SlideNerds runtime, brand config, and 20 skill files pre-installed.

slidenerds create my-talk
cd my-talk
npm install
npm run dev

Open http://localhost:3000 to see your deck running. Every change hot-reloads instantly. All decks are code. See the slide definition language reference.

Each slide is a React component in its own file. The deck's page.tsx is a manifest that imports slides and controls their order.

// app/slides/01-title.tsx
export default function Title() {
  return (
    <section data-slide="">
      <h1>My talk</h1>
    </section>
  )
}

// app/page.tsx
import Title from './slides/01-title'
import Problem from './slides/02-problem'
import Solution from './slides/03-solution'

export default function Deck() {
  return (
    <main>
      <Title />
      <Problem />
      <Solution />
    </main>
  )
}

Reorder slides by moving one line in the manifest. Add a slide by creating a file and adding one import. The runtime discovers slides by their data-slide attribute in DOM order, so file structure is for human ergonomics only.

Open Claude Code (or any LLM with file access) in the same directory. Give it a prompt and watch it build your slides.

Example prompts

Your deck runs in the browser with keyboard navigation built in.

Over 100 CSS animations are built into the runtime. Add a class to any element to animate it.

Entrance animations (step-*)

Elements with data-step start hidden and animate in when revealed. Add an animation class to control how they appear.

<p data-step="" className="step-fade">Fades in</p>
<p data-step="" className="step-pop">Pops in with scale</p>
<p data-step="" className="step-slide-in-left">Slides from left</p>
<p data-step="" className="step-bounce">Bounces in</p>

Available: step-fade, step-pop, step-bounce, step-elastic, step-fly-in-*, step-move-*, step-scale-*, step-spin-in, step-flip-*, step-wipe-*, step-blur-in, step-typewriter, step-letter-spread, and more. See the animation skill for the full list.

Exit animations (exit-*)

Elements with data-exit-step animate out before the slide transitions.

<p data-exit-step="" className="exit-fade">Fades out</p>
<p data-exit-step="" className="exit-zoom-out">Zooms out</p>

Emphasis animations (emphasis-*)

Replay an animation on a visible element to draw attention. Triggered on second click.

<p data-step="" className="emphasis-pulse">Pulses on emphasis</p>
<p data-step="" className="emphasis-shake">Shakes on emphasis</p>

Available: emphasis-pulse, emphasis-bounce, emphasis-shake, emphasis-wobble, emphasis-rubber-band, emphasis-tada, emphasis-heartbeat, emphasis-flash, emphasis-spin, emphasis-glow, and more.

Auto-build animations (auto-*)

Elements animate automatically when the slide becomes active. No click needed.

<div className="auto-fade">Fades in automatically</div>
<div className="auto-pop" style={{ animationDelay: '200ms' }}>Pops in after 200ms</div>

Slide transitions (data-transition)

Set the transition between slides with the data-transition attribute on a slide.

<section data-slide="" data-transition="cube-left">
  <h1>This slide transitions with a 3D cube effect</h1>
</section>

Available: fade, dissolve, push-*, slide-*, cover-*, uncover-*, zoom-in, zoom-out, flip-x, flip-y, cube-left, cube-right, iris, split-horizontal, split-vertical, morph.

Create a free account to save your slides, manage brand settings, and access live features like polls, Q&A, and audience reactions. Deploy your deck anywhere, then link it to SlideNerds.

slidenerds login
slidenerds link --name my-talk --url https://my-talk.vercel.app

Share your decks, brand configurations, and analytics with teammates. Invite anyone by email from the Team page in the dashboard.

Get per-slide analytics automatically when you link your deck to SlideNerds. Or bring your own analytics provider.

slidenerds analytics --posthog phc_XXXXXXXXXX
slidenerds analytics --ga4 G-XXXXXXXXXX
slidenerds analytics --gtm GTM-XXXXXX

Export from the deck detail page or from the CLI. PDF renders server-side at 1920x1080. PPTX generates a native PowerPoint file with editable text.

slidenerds export --pdf
slidenerds export --pptx

Save and reuse brand configurations across decks. Upload your logo, set colors, fonts, and spacing. Create brands from the web UI or sync from the CLI.

slidenerds brand set "Acme Corp"
slidenerds brand get "Acme Corp"
slidenerds brand list

Add real-time audience interaction to your slides. Polls, reactions, Q&A, word clouds, and audience counts.

1. Create a live session

Go to your deck's settings page and scroll to Live sessions. Give your session a name (e.g. "Q2 All-Hands") and click Create. You'll get a session ID and code snippet.

2. Add live components to your slides

Import the component and add it to a slide. The poll auto-creates itself when the slide loads.

import { LivePoll } from '@strategicnerds/slide-nerds'

<section data-slide="">
  <LivePoll
    question="What is your biggest challenge?"
    options={['Speed', 'Reliability', 'Cost']}
  />
</section>

3. Share with your audience

Share the session URL with your audience. Either hardcode the session ID in the component, or pass it as a URL parameter:

https://my-deck.vercel.app?session=SESSION_ID

The audience opens the link, navigates to the poll slide, and votes. Results update in real time.

For local development, pass serviceUrl="http://localhost:3000" to each component. See the live skill for full documentation.

Decks are private by default. Share them with specific people or make them public.

Every deck ships with 20 skill files that teach your LLM how to use SlideNerds effectively. Reference them in your prompts to get better results.