How hainrixz/open-carrusel works
Open Carrusel is a local-first Instagram carousel editor. The main workflow is to create or open a carousel, chat with Claude to generate or revise HTML slides, review and reorder them in the editor, then export dimension-specific PNGs. The README also documents brand setup, templates, style presets, reference images, captions, safe zones, and per-slide undo. Chat, upload, carousel, and several supporting API handlers were sampled; other feature links reflect documented capabilities and are kept at the API or library level where wiring was not sampled.
Main entry points: page.tsx Carousel editor · route.ts Chat stream API · carousels.ts Carousel operations · data.ts Local JSON data
Components 28
Editor experience
- Carousel dashboard
src/app/page.tsx - Carousel editor
src/app/carousel/[id]/page.tsx - Chat panel
src/components/chat/ChatPanel.tsx - Slide preview
src/components/editor/CarouselPreview.tsx - Slide filmstrip
src/components/editor/SlideFilmstrip.tsx
AI generation
- Chat stream API
src/app/api/chat/route.ts - Prompt builder
src/lib/chat-system-prompt.ts
Carousel editing
- Slide operations API
src/app/api/carousels/[id]/slides/route.ts - Slide edit and undo API
src/app/api/carousels/[id]/slides/[slideId]/route.ts - Carousel API
src/app/api/carousels/route.ts - Carousel operations
src/lib/carousels.ts - Caption generator API
src/app/api/carousels/[id]/caption/route.ts - PNG export API
src/app/api/carousels/[id]/export/route.ts - Slide HTML wrapper
src/lib/slide-html.ts - Slide renderer and zipper
src/lib/export-slides.ts
Brand and reuse
- Brand API
src/app/api/brand/route.ts - Brand operations
src/lib/brand.ts - Asset upload API
src/app/api/upload/route.ts - Template API
src/app/api/templates/route.ts - Template operations
src/lib/templates.ts - Style preset API
src/app/api/style-presets/route.ts - Style preset operations
src/lib/style-presets.ts - Reference images API
src/app/api/carousels/[id]/references/route.ts
Local services
- Local JSON data
src/lib/data.ts - Local uploads
Other components
- Browser user
- Claude CLI
- Headless Chromium
Connections 36
- Browser user → Carousel dashboard: opens
- Browser user → Carousel editor: opens
- Carousel dashboard → Carousel API: manages
- Carousel editor → Chat panel: hosts
- Chat panel → Chat stream API: sends prompts
- Chat stream API → Brand operations: loads context
- Chat stream API → Carousel operations: loads context
- Chat stream API → Style preset operations: loads context
- Chat stream API → Prompt builder: builds prompt
- Chat stream API → Claude CLI: spawns; streams
- Claude CLI → Slide operations API: posts slide HTML
- Carousel editor → Slide preview: previews
- Carousel editor → Slide filmstrip: organizes slides
- Slide filmstrip → Slide edit and undo API: edits and undoes
- Slide operations API → Carousel operations: updates slides
- Slide edit and undo API → Carousel operations: updates slide
- Carousel API → Carousel operations: manages records
- Carousel editor → Caption generator API: requests captions
- Carousel editor → PNG export API: requests export
- PNG export API → Slide renderer and zipper: renders slides
- Slide renderer and zipper → Slide HTML wrapper: wraps slide HTML
- Slide renderer and zipper → Headless Chromium: screenshots
- Brand API → Brand operations: reads and updates
- Carousel editor → Brand API: configures brand
- Carousel editor → Asset upload API: uploads assets
- Asset upload API → Local uploads: writes files
- Carousel editor → Template API: saves and reuses
- Template API → Carousel operations: loads carousel
- Template API → Template operations: manages templates
- Carousel editor → Style preset API: manages styles
- Style preset API → Style preset operations: manages presets
- Carousel editor → Reference images API: manages references
- Carousel operations → Local JSON data: reads and writes
- Brand operations → Local JSON data: reads and writes
- Template operations → Local JSON data: reads and writes
- Style preset operations → Local JSON data: reads and writes