@slideskit/core

React component library for building presentations and slide decks. Define slides as data, render with themeable components, and add a presenter notes window.

Installation

npm install @slideskit/core

If you're not in a React project, you'll also need react and react-dom. npm 7+ installs these automatically as peer dependencies.

Quick Start

import { Presentation } from "@slideskit/core";
import "@slideskit/core/styles.css";

const presentation = {
  meta: { title: "My Deck" },
  defaults: { theme: "default" },
  options: { showNotes: true, showProgress: true },
  themes: [
    {
      name: "default",
      colors: { primary: "#0ea5e9", background: "#0f172a", text: "#f8fafc" },
      fonts: { body: "system-ui", headline: "system-ui" },
    },
  ],
  slides: [
    {
      layout: "full",
      title: "Welcome",
      subtitle: "A quick intro",
      content: [
        { type: "text", content: "Hello world!", align: "center" },
      ],
    },
  ],
};

function App() {
  return <Presentation presentation={presentation} />;
}

Content Block Types

Slides are built from content blocks. Supported types:

| Type | Description | |------|-------------| | text | Plain text | | title | Title + optional subtitle with divider | | list | Bullet, numbered, or checklist | | image | Image with optional caption, aspect ratio presets | | table | Table with headers and rows | | columns | Two-column layout (left/right blocks) | | card | Opaque card containing nested blocks | | grid | Grid of cells (rows × columns) | | layered | Overlay content on top of a base block | | html | Raw HTML (sanitized) | | component | Custom React component via registry | | styleGuide | Color and typography style guide block | | quote | Blockquote with optional attribution and role |

Use blockRegistry to add extension block types (e.g. video). See Extensions.

Extensions

| Package | Description | |---------|-------------| | @slideskit/video | Video block (YouTube, Vimeo, file paths) via react-player | | @slideskit/code | Code block with syntax highlighting via Shiki |

import { videoBlockRegistry } from "@slideskit/video";
import { codeBlockRegistry } from "@slideskit/code";
import "@slideskit/video/styles.css";
import "@slideskit/code/styles.css";

<Presentation
  presentation={...}
  blockRegistry={{ ...videoBlockRegistry, ...codeBlockRegistry }}
/>

Theming

Provide themes in presentation.themes. Each theme has name, colors (e.g. primary, background, text, cardBackground, cardText), and fonts (body, headline). Set the active theme with presentation.defaults.theme or per-slide with slide.theme.

Custom Components

Use componentRegistry to register custom components for component blocks:

const registry = {
  MyChart: ({ data }) => <Chart data={data} />,
};

<Presentation
  presentation={presentation}
  componentRegistry={registry}
/>

In a slide:

{ "type": "component", "content": { "name": "MyChart", "props": { "data": [...] } } }

Notes Window

Enable options.showNotes to show a presenter notes button in the toolbar. Notes sync with the current slide via BroadcastChannel. Use a custom notes page with the notesUrl prop, or the built-in blob-based notes window.

API

| Export | Description | |--------|-------------| | Presentation | Main presentation component | | Slide | Single slide (used internally or for custom layouts) | | SlideContent | Single content block renderer | | useDiscreteNavigation | Hook for discrete slide scrolling | | resolveTheme, themeToStyle | Theme utilities | | getNotesChannelName | Notes BroadcastChannel name | | cn | Class name utility |

All types are exported for TypeScript.

License

MIT