Beem Slide

beem-slide dev

The dev server — hot reload, inspector, assets, present mode.

npm run dev

Or npx beem-slide dev if you would rather not go through the script. Either way you get a Vite dev server on http://localhost:5299, or the next free port if something already has it.

Hot reload covers both the framework and your decks. Saving an index.tsx re-renders the page you are looking at without sending you back to page one, which matters when the page you are iterating on is page eleven.

What is in it

  • Deck list — every directory under slides/, grouped by the folders you put them in.
  • Canvas — the current page at 1920 × 1080, scaled to the window.
  • Inspector — click an element to edit it, or leave a note for the agent. See Inspector.
  • Design panel — live edits to the deck's design tokens, with save and discard. See Themes.
  • Assets — drag files in, rename, replace, search svgl for brand marks.
  • Notes and present mode — speaker notes per page, and a presenter console in a second window. See Present mode.

Flags

FlagDefaultDescription
-p, --port <port>config, else 5299Port to listen on.
--host [host]localhost onlyExpose on the network. Pin a host by passing one.
--openoffOpen a browser on start.
--no-skills-checkoffSkip the skills drift check.

--host is what you want when the deck has to render on a phone or a tablet on the same network — the canvas scales the same, but touch and RTL are worth seeing on real hardware.

The skills check

On startup the server looks for a skills directory shipped beside the installed framework and compares it against .agents/skills/ in the workspace. If they have drifted it offers to sync; where stdin is not a TTY it warns in one line instead of blocking.

In a workspace installed from npm there is nothing to compare — the authoring guides are served through the MCP tools rather than vendored into your repo — so the check stays quiet. See sync:skills for when it does apply.

Turn it off with --no-skills-check, or with BEEM_SLIDE_SKIP_SKILLS_CHECK=1 when it is a container build and threading a flag through is awkward.

Config

beem-slide.config.ts
import type { BeemSlideConfig } from '@beem-slide/core';

const config: BeemSlideConfig = {
  port: 5300,
  slidesDir: 'slides',
  themesDir: 'themes',
  locale: 'en',
};

export default config;

A --port flag beats the config value; the config value beats the default.

On this page