Yiwei Ho
329d83ca43
* refactor(core): quieter, more minimal viewer UI Strip decoration and tighten hierarchy across the viewer chrome: - Replace system-view emoji (all slides, draft, themes, assets) with line icons via a shared SystemViewIcon; user folders keep their custom emoji/color chips. - Compact the home, themes, and theme-detail page headers from hero-sized titles down to a dense header row with icon and folio count. - Calm selected states: sidebar rows and rail thumbnails drop their accent bars and rely on background, weight, and outline instead. - Remove content zoom on card hovers; keep the shadow/ring lift and press feedback only. - Add a capped stagger entrance (rise-in) to the home and themes grids, disabled under reduced motion. - Simplify empty states to a bare icon and text, and drop the inline shortcut chip from the Present button. - Fix the slide card actions menu never opening: the freeze-motion click shield inside thumbnails (z-10) sat above the unlayered actions button, swallowing pointerdown; the trigger also cancelled Base UI's open action with preventDefault. Raise the button to z-20 and drop preventDefault. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * refactor(core): redesign the sidebar - Replace the bold wordmark + icon-button cluster with an identity row: a small brand mark chip beside the app name. - Add a full-width command-menu search field under the header with a keyboard shortcut hint, replacing the icon-only trigger. - Move folder creation to a hover-revealed plus button in the Folders section header and drop the persistent bottom row; the inline creation input is unchanged. - Move the language and theme toggles into the footer next to the version label. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * refactor(core): use the product icon as the sidebar brand mark Replace the placeholder Play glyph with the open-slide app icon, bundled at 128px (22KB) and rendered with a hairline ring so its edge reads on the dark sidebar. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * refactor(core): inset shell layout with elevated content cards Replace the bordered-chrome layout with the inset pattern: separation comes from background contrast, rounded corners, and hairline rings instead of structural borders. - Retone --sidebar to match --canvas so the sidebar, thumbnail rail, panels, toolbar, and notes drawer sit on one continuous chrome ground. - Float the home content area and the slide viewport as rounded elevated cards (bg-background + hairline ring + edge shadow) with an 8px gutter; the dev assets view gets the same treatment. - Drop the border-r/border-l/border-t/border-b chrome separators on the sidebar, rail, panels, viewer toolbar, and notes drawer; the panel open/close animation now transitions width only. - Make the selected sidebar row an elevated pill (background + ring + edge shadow) instead of a muted fill. - Give the editor slide canvas a real floating shadow instead of the inset hairline; the white slide now reads against the near-white card. Only the editor viewport renders non-flat, so thumbnails, the player, and exports keep their clipped edge. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * refactor(core): deepen the dark chrome ground for card contrast Drop the dark-mode ground from L 0.125 to 0.1 so the elevated content cards read clearly against the sidebar and rails. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * refactor(core): lift dark content surfaces off the chrome ground Raising --background to L 0.175 (vs the 0.1 ground) makes the inset cards read clearly even on dim displays, where both prior tones crushed to near-black. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * test(core): update sidebar toolbar e2e for the redesigned chrome The command-menu trigger is now a labelled search field with no tooltip, so assert its visible label instead of a hover tooltip; language and theme toggles keep their tooltip checks in the footer. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * refactor(core): address review feedback - Use SystemViewIcon for every system view in the home command menu so the assets entry matches the sidebar's FolderOpen icon and all four share the same size and stroke. - Cap the grid stagger at twelve items (Math.min(i, 11)). - Remove the notes drawer's remaining inner divider. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * chore: consolidate the branch changesets into one Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * refactor(core): align the sidebar search field with the nav rows Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * refactor(core): space sidebar rows so states don't touch A 2px gap between rows keeps adjacent hover and selected backgrounds from fusing into one block. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> --------- Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
open-slide
The slide framework built for agents. Describe your deck in natural language — your coding agent writes the React. open-slide handles the canvas, scaling, navigation, hot reload, and present mode so the agent can focus on content.
Every slide renders into a fixed 1920 × 1080 canvas. Pages are arbitrary React components, not a constrained DSL.
npx @open-slide/cli init my-slide
Why open-slide
Slides are visual code. Agents are great at writing code. open-slide is the missing runtime that turns "make slides about X" into a polished, presentable deck — without you ever leaving the chat.
Highlights
🤖 Agent-native authoring
Works with any coding agent (Claude Code, Codex, Cursor, …). The scaffolder ships with built-in skills:
/create-slide— drafts a deck end-to-end. Asks four scoping questions (topic & aesthetic, page count, text density, motion vs. static), picks an id, plans the structure, and writes the pages./slide-authoring— the technical reference for the 1920 × 1080 canvas, type scale, palette, and layout rules. The agent reads this before writing.
From a one-line prompt to a polished deck, no boilerplate.
🎯 In-browser inspector
Click any element in the dev server and attach a comment — "make this red", "change to 'Open Slide Rocks'", "shrink the headline". Comments are persisted as @slide-comment markers in source. Run /apply-comments and the agent applies every pending edit, then clears the markers.
The loop: present → click to comment → /apply-comments → repeat.
🖼️ Assets manager + svgl logo search
Manage images, videos, and fonts per deck through a built-in assets panel. Search and drop in any brand logo via the integrated svgl catalogue — no more hunting for SVGs.
🎬 Professional present mode
Fullscreen playback with keyboard navigation, plus a presenter mode with current/next slide preview, speaker notes, and a timer. Built for the stage, not just the browser tab.
📦 Export to static HTML & PDF
One command exports your deck as a self-contained static HTML site or a print-ready PDF. Share without a server.
📁 Slide manager
Organise decks into folders with custom emoji and drag-and-drop to reorder. Useful once you've built more than three decks and need to find anything.
🚀 Deploy-friendly
Outputs a plain static build — one-click deploy to Vercel, Cloudflare Pages, Zeabur, Netlify, or any static host. No server, no runtime, no lock-in.
Get started
npx @open-slide/cli init my-slide
cd my-slide
pnpm dev
The scaffolded workspace ships with agent skills preconfigured for Claude Code. From there you drive the deck through your agent — or edit slides/<id>/index.tsx directly. See CLAUDE.md for the hard rules.
Repo layout
This repo is a pnpm + Turbo monorepo.
| Path | Description |
|---|---|
| packages/core | @open-slide/core — runtime (home page, slide viewer, present mode, inspector), Vite plugin, and the open-slide dev/build/preview CLI. |
| packages/cli | @open-slide/cli — npx @open-slide/cli init scaffolder. Generates a minimal workspace where Vite/React/tsconfig stay hidden inside core. |
| apps/demo | Example workspace that consumes @open-slide/core via workspace:*. Used for local development of the framework. |
Development
pnpm install
pnpm dev # runs the demo against the local @open-slide/core
pnpm build # builds all packages
pnpm check # type-checks all packages
pnpm lint # lints via biome
Support
If open-slide has been useful to you, consider supporting development:
License
MIT © Yiwei Ho