@open-slide/core

@open-slide/core

Runtime and CLI for open-slide — a React-based slide framework where you write slides and the framework handles the Vite/React stack, layout, navigation, hot reload, and fullscreen play mode.

Install

pnpm add @open-slide/core

Most users get this installed automatically by running npx @open-slide/cli init. Use this package directly only if you're wiring up an existing workspace by hand.

What's inside

• Runtime — home page, slide viewer, thumbnail rail, keyboard navigation, and fullscreen presenter mode. Every slide renders into a fixed 1920×1080 canvas; the framework scales it.
• Vite plugin — discovers slides/<id>/index.{tsx,jsx,ts,js}, exposes them via virtual modules, and reloads when slides are added or removed.
• CLI — open-slide dev | build | preview so workspaces never need to touch Vite, React, or tsconfig directly.

CLI

Once installed, the open-slide bin is available in the workspace:

Command	Description
open-slide dev	Start the dev server. Flags: -p, --port <port>, --host [host], --open.
open-slide build	Build a static site. Flags: --out-dir <dir> (defaults to dist).
open-slide preview	Preview the production build. Flags: -p, --port <port>, --host [host], --open.

Config

Create open-slide.config.ts in the workspace root (all fields optional):

import type { OpenSlideConfig } from '@open-slide/core';

const openSlideConfig: OpenSlideConfig = {
  slidesDir: 'slides',
  port: 5173,
};

export default openSlideConfig;

Authoring slides

Slides live under slides/<kebab-case-id>/index.tsx and default-export an array of Page components:

import type { Page } from '@open-slide/core';

const Cover: Page = () => (
  <div className="flex h-full w-full items-center justify-center">
    <h1 className="text-[120px] font-bold">Hello, open-slide</h1>
  </div>
);

const pages: Page[] = [Cover];
export default pages;

export const meta = { title: 'Hello' };

Exports

import {
  CANVAS_WIDTH,   // 1920
  CANVAS_HEIGHT,  // 1080
  type Page,
  type SlideMeta,
  type SlideModule,
  type OpenSlideConfig,
} from '@open-slide/core';

The Vite plugin is exposed under a subpath for advanced setups:

import { createViteConfig } from '@open-slide/core/vite';

License

MIT