Editing and live preview

Keep your editor and the preview side by side. Once you have created a project, saving a deck updates the presentation in place, so you can work on a slide while looking at it.

Preview your changes

From your project directory, start the preview:

npm run preview

It starts the development server on a free port and opens the deck in the app of npm run present, so you don't need to open it in a browser. Press P to try the presentation on your screens without the permission prompts of the browser. Run npx seminar preview decks/talk.deck.mdx to preview another deck. See the @seminar/cli package.

To preview in a browser instead, run npm run dev, and open the address Vite prints. The VS Code extension previews decks next to their editors.

Navigate to the slide you want to edit. Change decks/index.deck.mdx and save it. With @vitejs/plugin-react enabled, Seminar keeps the current slide, open panels, presenter view, and shared slide state when the deck updates. Without the React plugin, a deck change reloads the page instead.

Vite also watches imported React components, styles, images, and other dependencies. Some changes require a full reload or remount components, which can reset their running state. A saved deck is the source of the presentation; live state isn't saved back into the file.

If compilation fails, check Vite's error overlay and terminal output. Fix the error and save again to update the preview.

Work in your editor

Decks are text files, so you can search, replace, move slides, and review changes with the tools you already use. Keep React components and theme code in separate files and import them from the deck. An MDX-aware editor can highlight the Markdown, JSX, and imports.

Use slide ids, such as ### Results {#results}, to give important slides stable addresses while you revise their titles. Keep the deck and its assets under version control so you can review changes and return to earlier versions.

Work with a coding agent

An agent can edit the same .deck.mdx files, components, and themes as you. Give it the deck file, the slides you want changed, and any constraints on content or layout. Point it to the deck syntax and steps, or the developer documentation when it needs to write a component.

Review its changes in the editor and keep the live preview open as you work. Go through the affected steps and try interactive elements; a text diff alone won't show whether a slide fits or an animation makes sense.

Rehearse and build

Use the presenter view to check notes and previews. Try the touch controls if you will present from a tablet or phone.

Before sharing, build the deck and open the resulting HTML file. This checks the version you will actually present, including its bundled fonts, images, and scripts.