@getnarro/core

The React runtime for Narro presentations — Presentation, Slide, navigation, transitions, and speaker notes

getnarro.com · Documentation · Ecosystem

Slides are components. Presentation owns the deck — navigation, routing, transitions, sub-slides, speaker notes, fonts — and Slide is whatever JSX you put inside it.

Just want a deck? npm create narro@latest scaffolds a project, and npx @getnarro/cli new deck.md starts a single-file markdown deck. This package is what both of those use underneath.

Installation

npm install @getnarro/core react react-dom

react and react-dom 19+ are peer dependencies. Most decks also want @getnarro/shared-ui for Heading, Text, List, Code, and the rest of the slide components.

Quick start

import { Presentation, Slide } from "@getnarro/core";

export default function MyPresentation() {
  return (
    <Presentation>
      <Slide>
        <h1>Hello, World!</h1>
      </Slide>
      <Slide>
        <h2>Second slide</h2>
        <p>Content goes here</p>
      </Slide>
    </Presentation>
  );
}

Sub-slides

Multi-step content inside one slide, each step with its own transition:

import { Presentation, Slide, type SubSlide } from "@getnarro/core";

const steps: SubSlide[] = [
  { content: <div>Step 1: Introduction</div>, transition: "fade" },
  { content: <div>Step 2: Details</div>, transition: "slide-left" },
  { content: <div>Step 3: Conclusion</div>, transition: "slide-up" },
];

export default function Tutorial() {
  return (
    <Presentation>
      <Slide subSlides={steps} />
    </Presentation>
  );
}

Full guide: SUB_SLIDES_GUIDE.md.

Transform navigation

Spatial zoom and pan across one canvas, rather than a sequence of slides:

import { Presentation, Slide, TransformSlide, type TransformSubSlide } from "@getnarro/core";

const spatialSteps: TransformSubSlide[] = [
  { position: { x: 0, y: 0, scale: 1 }, content: <div>Center</div> },
  { position: { x: 2000, y: -500, scale: 0.8, rotate: -5 }, content: <div>Zoomed out</div> },
];

export default function SpatialPresentation() {
  return (
    <Presentation>
      <Slide>
        <TransformSlide subSlides={spatialSteps} />
      </Slide>
    </Presentation>
  );
}

Full guide: https://getnarro.com/docs/transform-mode.

Fonts

Apply a preset, or pass your own font stacks to the theme:

import { applyFontPreset, Presentation } from "@getnarro/core";

applyFontPreset("inter");

// or
<Presentation
  theme={{
    fontHeading: '"Inter", sans-serif',
    fontBody: '"Inter", sans-serif',
    fontMono: '"JetBrains Mono", monospace',
  }}
/>;

The presets are system, inter, roboto, openSans, lato, montserrat, poppins, raleway, sourceSerif, playfairDisplay, merriweather, jetBrainsMono. system needs no network request; the rest are loaded from Google Fonts on first use. Details in FONTS.md.

Exports

Props for every one of them are at https://getnarro.com/docs/components, generated from the TypeScript source in this package.

The Narro ecosystem

| Package | What it is | | --- | --- | | @getnarro/cli | CLI tools for creating and managing Narro presentations | | @getnarro/core | The React runtime for Narro presentations — Presentation, Slide, navigation, transitions, and speaker notes ← you are here | | @getnarro/docs | Narro's documentation as data — markdown pages, a generated component API reference, and llms.txt | | @getnarro/markdown | Markdown & MDX authoring for Narro presentations | | @getnarro/marketplace | Themes, colour schemes, and templates for Narro presentations | | @getnarro/mcp-server | MCP (Model Context Protocol) server for AI-assisted Narro presentation creation | | @getnarro/shared-ui | Slide components for Narro presentations — headings, text, lists, code, media, charts, and layouts | | create-narro | Scaffold a new Narro presentation |

All eight ship from one repository and release together.

The npm package named narro is unrelated to this project. Narro's packages are all under the @getnarro/ scope; the CLI binary narro comes from @getnarro/cli.

Website · Documentation · llms.txt · GitHub · Issues · Changelog

Released under the MIT License.