@kywk/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 @kywk/open-slide-core

Most users get this installed automatically by running npx @kywk/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 '@kywk/open-slide-core';

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

export default openSlideConfig;

Hosting under a subpath

Set base to deploy the built site under a sub-directory (intranet folders, GitHub Pages project sites, reverse proxies). Use a leading and trailing slash:

const openSlideConfig: OpenSlideConfig = {
  base: '/my-slides/',
};

The value is passed straight to Vite's base and to React Router's basename, so client-side navigation matches the deployed path.

Authoring slides

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

import type { Page } from '@kywk/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
  Mermaid,        // render flow, sequence, state, and other Mermaid diagrams
  MorphElement,   // match or fade objects across pages for morph transitions
  type Page,
  type SlideMeta,
  type SlideModule,
  type SlideTransition,
  type OpenSlideConfig,
} from '@kywk/open-slide-core';

Render relational or sequential information directly in a TSX page:

<Mermaid chart={`flowchart LR
  Source --> Transform --> Result`} style={{ width: 1200, height: 650 }} />

Lightbox is enabled by default — click any diagram to expand it near-fullscreen. Pass lightbox={false} to disable.

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

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

License

MIT