Instagram Carousel Studio

Free, local, Canva-like editor for Instagram carousels (1080×1350).
Design slides in the browser → export PNGs → optionally publish to Instagram via Zamili.

Design for free. Publish with Zamili.
Editing, layers, and PNG export work offline in your browser. Direct Instagram publishing uses a Zamili MCP API key (Pro plan) — that’s how we keep the editor open-source while funding the publish pipeline.

---

Video walkthrough

GitHub doesn’t support embedded players in README files. Click the thumbnail to watch on YouTube:

▶ Watch the full tutorial on YouTube

---

Features

• Visual editor — drag, resize, and edit text, shapes, dots, and images on a 1080×1350 canvas
• Layers panel — select, rename, reorder, lock, and hide elements (Canva/Figma-style)
• Property inspector — fonts, colors, gradients, position, opacity, z-index
• Keyboard shortcuts — undo/redo, arrow nudge, duplicate, delete
• Save / load — projects stored in browser localStorage
• Export JSON — backup or share project files
• Export PNGs — download all slides at full resolution
• Publish to Instagram — upload slides + caption through Zamili MCP (optional)

---

Quick start

Requirements

• Node.js 18.18+
• A modern browser (Chrome, Edge, Firefox)

Install & run

git clone https://github.com/GuidateTest/instagram-carousel-studio.git
cd instagram-carousel-studio
npm install
npm run dev

Open http://localhost:5175

Production build:

npm run build
npm run preview

---

Full tutorial

1. Interface overview

Area	Purpose
Left — Slides	Switch between carousels and slides
Left — Layers	List every element on the current slide
Center — Canvas	Live 1080×1350 preview
Right — Publish	Instagram account + caption + publish
Right — Properties	Edit the selected element
Top toolbar	Undo/redo, save, load, export

2. Edit a slide

1. Click a slide in the Slides panel.
2. Click any element on the canvas or in Layers.
3. Drag to move, handles to resize.
4. Double-click text to edit inline.
5. Use Properties for font, color, size, position, etc.

3. Layers

• Click a layer to select it.
• Rename layers inline.
• Eye — toggle visibility
• Lock — prevent accidental edits
• ↑ / ↓ — bring forward / send backward
• Drag layers to reorder z-index.

4. Keyboard shortcuts

Shortcut	Action
Arrow keys	Move selection 1px
Shift + Arrow	Move 10px
Delete / Backspace	Delete element
Ctrl/Cmd + D	Duplicate
Ctrl/Cmd + Z	Undo
Ctrl/Cmd + Shift + Z	Redo
Escape	Deselect

5. Save your work

• Save — writes project JSON to localStorage
• Load — restores last saved project
• Export JSON — download backup file
• Import JSON — restore from file
• Reset — reload the starter template

6. Export PNGs (no account needed)

1. Finish editing your carousel.
2. Click Export PNGs in the toolbar.
3. Files download as {carousel-id}-carousel-01.png … 05.png at 1080×1350.

Upload these manually to Instagram, Buffer, Later, etc.

7. Publish directly to Instagram (Zamili)

Publishing uses the Zamili MCP API — not bundled server code. You need:

1. A Zamili account (Pro for MCP access)
2. An Instagram account connected in Zamili → Integrations
3. An MCP API key from Zamili → MCP → Create key

In the editor:

1. Open Publish to Instagram (right panel).
2. Expand MCP settings → paste your key (zmcp_live_…).
3. Click Connect & load accounts → pick @youraccount.
4. Select carousel → edit Caption.
5. Click Publish carousel now.

The app renders slides → uploads to Zamili hosting → posts as an Instagram carousel.

Security: Your API key is stored only in your browser (localStorage). It is never committed to git. See SECURITY.md.

Get a key: https://zamili.ai → Dashboard → MCP

---

Customize content

Starter copy lives in:

src/data/carousels/demo-starter.ts

Edit headlines, bullets, captions, and handles. Click Reset in the toolbar to reload the template after code changes (dev mode hot-reloads automatically).

Slide layouts are built in:

src/editor/templates/buildProject.ts

---

Project structure

src/
├── editor/
│   ├── EditorPage.tsx          # Main layout
│   ├── components/             # Canvas, layers, properties, publish
│   ├── store/                  # Zustand state + undo/redo
│   └── templates/buildProject.ts
├── api/zamili-mcp.ts           # Zamili MCP client (publish only)
├── data/carousels/             # Starter content
└── types/                      # Element JSON model
public/
└── brand-mark.svg              # Generic placeholder logo (replace with yours)

---

Design specs

• Canvas: 1080 × 1350 (Instagram 4:5)
• Fonts: Montserrat, Inter, Caveat (Google Fonts)
• Colors: purple #7C3AED, cyan #06B6D4

Replace public/brand-mark.svg with your own logo in the editor (select Logo layer → upload image).

---

FAQ

Is this really free?
Yes — design and PNG export are free and run locally.

Why Zamili for publishing?
Instagram’s API requires a connected business account, hosting for images, and token billing. Zamili handles that pipeline so this repo stays a simple frontend.

Can I fork and remove Zamili?
Yes (MIT license). Swap src/api/zamili-mcp.ts for your own publish backend.

Are my designs sent anywhere?
Only when you click Publish — slide PNGs go to Zamili to reach Instagram. Save/export stay local.

---

License

MIT — see LICENSE.

Built with ❤️ by Zamili — social automation for creators and teams.