open-carousel
The social-carousel framework built for agents. Describe your carousel in natural language — your coding agent writes the React. open-carousel handles the canvas, platform formats, safe zones, hot reload, and export so the agent can focus on content.
Every slide renders into a fixed-pixel canvas sized for the platform you're posting to — 1080 × 1350 (Instagram portrait), 1080 × 1080 (square), or 1080 × 1920 (Stories/TikTok) — and exports as PNGs (Instagram/TikTok) or a PDF document (LinkedIn). Pages are arbitrary React components, not a constrained DSL.
npx @open-carousel/cli init my-carouselopen-carousel is a fork of open-slide by 1weiho, adapted for social media carousels.
Why open-carousel
Carousels are visual code. Agents are great at writing code. open-carousel is the missing runtime that turns "make a carousel about X" into a polished, post-ready set of slides — 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-carousel— drafts a carousel end-to-end. Asks four scoping questions (platform & format, aesthetic, slide count, CTA), plans the hook → CTA structure, and writes the slides./carousel-authoring— the technical reference for canvas formats (portrait/square/story), platform safe zones, mobile type scale, palette, and layout rules. The agent reads this before writing.
From a one-line prompt to a polished carousel, no boilerplate.
Platform formats & safe zones
Pick a format per carousel via meta.format — portrait 4:5, square 1:1, or story 9:16. The authoring skills encode each platform's safe zones (story UI overlays, grid crop, caption areas) and a mobile-first type scale so nothing important gets covered or unreadable.
In-browser inspector
Click any element in the dev server and attach a comment — "make this red", "change to 'Open Carousel 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: preview → click to comment → /apply-comments → repeat.
Assets manager + svgl logo search
Manage images, videos, and fonts per carousel through a built-in assets panel. Search and drop in any brand logo via the integrated svgl catalogue — no more hunting for SVGs.
Export ready to post
Export every slide as PNG images (ZIP) for Instagram and TikTok, or as a print-ready PDF for LinkedIn document carousels. One command also exports a self-contained static HTML site for sharing previews.
Carousel manager
Organise carousels into folders with custom emoji and drag-and-drop to reorder. Useful once you've built more than three carousels 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-carousel/cli init my-carousel
cd my-carousel
pnpm devThe scaffolded workspace ships with agent skills preconfigured for Claude Code. From there you drive the carousel 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-carousel/core — runtime (home page, carousel viewer, present mode, inspector), Vite plugin, and the open-carousel dev/build/preview CLI. |
| packages/cli | @open-carousel/cli — npx @open-carousel/cli init scaffolder. Generates a minimal workspace where Vite/React/tsconfig stay hidden inside core. |
| apps/demo | Example workspace that consumes @open-carousel/core via workspace:*. Used for local development of the framework. |
Development
pnpm install
pnpm dev # runs the demo against the local @open-carousel/core
pnpm build # builds all packages
pnpm check # type-checks all packages
pnpm lint # lints via biomeCredits
Built on open-slide by 1weiho. All the agent-first slide tooling comes from there; open-carousel adapts it for social media carousels (platform formats, safe zones, hook → CTA authoring, image export).
License
MIT