A focused tool for creating code-themed Instagram carousel posts. Built for developers who want to share technical content — clean, readable, and export-ready.
Each carousel is structured as 5 fixed slides, each with a specific role:
| # | Slide | Purpose |
|---|---|---|
| 1 | Cover | Big statement + blinking cursor + accent line |
| 2 | Point | Context / problem narration with sub-note |
| 3 | Code | Syntax-highlighted code block |
| 4 | Compare | Before vs After, stacked layout |
| 5 | CTA | Takeaway + hashtags |
- Real-time preview — edits reflect instantly, no refresh needed
- Syntax highlighting — char-by-char tokenizer supporting TypeScript, JavaScript, Python, Go, and Rust
- Font size control — adjustable per Code and Compare slide (8px–20px)
- Username bar — shown on every slide, configurable alignment (left / center / right)
- Export as PNG — all 5 slides exported via
html2canvas, bundled as a ZIP viaJSZip - SaaS-ready structure — Zustand store, typed state, component-per-slide architecture
| Package | Version | Role |
|---|---|---|
| Next.js | 16 | Framework (App Router) |
| React | 19 | UI |
| TypeScript | 5 | Type safety |
| Tailwind CSS | 4 | Styling |
| Zustand | 5 | State management |
| html2canvas | 1.4 | Slide-to-PNG rendering |
| JSZip | 3.10 | ZIP export |
# Clone
git clone https://github.com/<your-username>/ig-carousel-generator.git
cd ig-carousel-generator
# Install
npm install
# Run dev server
npm run devOpen http://localhost:3000/editor in your browser.
src/
├── app/
│ ├── editor/
│ │ └── page.tsx # Main editor page
│ ├── globals.css
│ └── layout.tsx
├── components/
│ ├── SlidePreview.tsx # Renders the active slide
│ ├── editor/
│ │ ├── SlideNav.tsx # Sidebar slide navigation
│ │ └── SlideForm.tsx # Dynamic form per slide type
│ └── slides/
│ ├── CoverSlide.tsx
│ ├── PointSlide.tsx
│ ├── CodeSlide.tsx
│ ├── CompareSlide.tsx
│ ├── CtaSlide.tsx
│ └── UsernameBar.tsx # Username overlay, shared across all slides
├── lib/
│ ├── highlight.ts # Char-by-char syntax tokenizer
│ └── export.ts # html2canvas + JSZip export logic
├── store/
│ └── carousel.store.ts # Zustand store — all carousel state
└── types/
└── slide.types.ts # TypeScript types for all slide data
- Wire up full export (all 5 slides → ZIP)
- Custom color themes per carousel
- Save / load carousel drafts (localStorage → DB)
- Multi-carousel management
- Auth + cloud storage (SaaS phase)
- Vercel deployment
MIT