How Silders works

A complete reference for the editor — every section, every icon, and the AI workflow that makes batch creation a one-shot job.

30-second tour

The editor lives at /create. It splits into two areas: the sidebar (4 steps, top to bottom) and the preview canvas (your slide rendered at the right resolution).

Everything you do is saved automatically to localStorage — close the tab and come back, your work is still there.

1. Type — Choose a layout

8 layouts, each tuned for a specific kind of message. The active one has its accent border highlighted; click any other to swap. Switching only changes that current slide's structure — your other slides keep their data.

2. Design — Visual style

This section bundles 5 controls + 3 randomization buttons. All of them are theme-aware: when you change the theme, every other choice keeps making sense.

Theme

14 themes available. The current one shows a swatch (gradient half background / half accent). Click to open the picker grid.

Style (font & character)

4 composition presets — they bundle a coherent font pairing and text accents. Same content, very different feel. Selected style applies to all your slides at once.

Format

Two ratios: 1:1 (1080×1080, classic Instagram square) and 4:5 (1080×1350, Instagram portrait — 25% more feed real estate, recommended for high engagement).

Shape

5 background "blob" styles. Each defines how decorative shapes are positioned and animated behind the content. Click an active one again to disable shapes entirely for a flat layout.

Grain (film texture overlay)

Adds a subtle noise overlay (mixed via overlay blend mode). Toggle on/off and tune opacity 0–100%. Great for an editorial / printed feel.

Photo (background image)

Place an image behind the slide content with controllable opacity. Three options:

• 📁 Upload from your computer (PNG, JPG, WebP)
• ↻ Load a new random photo (from picsum.photos)
• Drag & drop directly anywhere on the editor

Action buttons

3. Content — Text input

Three modes via the toggle at the top right of the section:Form, { } (current slide JSON), and All (all slides JSON, bulk paste).

Form mode (default)

One field per piece of content, with field-specific word limits shown next to each label. Fields adapt to the current layout — e.g. Hook has solution / hook / problem / cta, while Quote replaces them with hook / problem / cta only.

{ } mode (current slide as JSON)

Edit the active slide as a JSON object. Useful when you want to copy/paste a single slide or share it with someone.

{
  "_instructions": "Strict per-field word counts in _max. ...",
  "_max":  { "solution": 6, "hook": 10, "problem": 20, "cta": 8 },
  "layout": "hook",
  "brand": "mysite.com",
  "solution": "Content creators",
  "hook": "Nobody sees your posts?",
  "problem": "The problem isn't your content. It's your structure.",
  "cta": "Try this format"
}

All mode (all slides at once)

The most powerful mode. Edit every slide of every layout in one JSON blob — perfect for AI-generated content.

{
  "_instructions": "Fill each layout. Word counts strict — see _max. ...",
  "brand": "mysite.com",
  "hook": {
    "_max": { "solution": 6, "hook": 10, "problem": 20, "cta": 8 },
    "solution": "...", "hook": "...", "problem": "...", "cta": "..."
  },
  "stat": {
    "_max": { "hook": 6, "problem": 16, "solution": 6, "cta": 8 },
    "hook": "95%", "problem": "...", "solution": "Did you know?", "cta": "..."
  }
}

Buttons inside the editor

• ↺ Reset all — wipes content back to the layout's defaults (next to "Content" label)
• 📋 Copy JSON — copies the current JSON to clipboard (top-right of textarea)
• 📋↓ Paste from clipboard — replaces JSON with clipboard content, validated live

4. Export — Download your slides

Brand & counter

Two top inputs:

• Brand — text shown in the slide footer (e.g. mysite.com)
• Counter — the slide indicator at top-right (e.g. 01 / 04). Auto-computed from selected layouts; manual override allowed. The ↺ button resets it to auto.

Selecting slides to export

Each layout chip can be toggled on/off. Selected ones are included in the export. You always need at least one — clicking the last active chip is blocked.

Format: PNG or WebP

Single export vs ZIP

File names auto-include the slide's hook title (slugified) and the date, so each slide gets a meaningful name.

1 layout selected → {brand}_{layout}_{title-slug}_{date}.{ext}
e.g. mysite_hook_nobody-sees-your-posts_2026-05-08.png

2+ layouts selected → ZIP: {brand}_slides_{date}.zip. Inside, each file is named {brand}_{layout}_{title-slug}.{ext}. The export shows live progress (Capturing 3/7…) while rendering each slide.

Navigation & carousel

When 2+ layouts are selected for export, the preview becomes a carousel of only those layouts:

• ← → Arrow buttons on either side (desktop only)
• Dots at the bottom — click any to jump to that slide
• The active dot stretches into a longer pill in the accent color

When only one layout is active, the carousel UI hides — there's nothing to navigate to.

Mobile

On screens narrower than 768px, the layout flips:

• Preview canvas takes the top portion, scaled to fit
• The 4 sidebar steps collapse into a floating bottom toolbar with 4 buttons
• Tap a button → bottom sheet slides up with that section's controls
• Swipe down on the sheet to dismiss
• Drag & drop image upload still works on mobile (long-press → drag)

AI workflow — generate a full carousel from one prompt

This is the killer feature. Switch the Content section to All mode and you get a full JSON template with every layout's fields. Hand it to an LLM with a one-line task, paste the result back. Done.

Step-by-step

1. In Content, click All
2. Click 📋 Copy JSON at the top-right of the textarea
3. Open ChatGPT / Claude, paste it with a prompt like:

   Fill this JSON with content for a LinkedIn carousel about [your topic].
   The _instructions and _max fields tell you the strict word limits per field — respect them.
   Match a confident, no-fluff tone. Return only valid JSON, no commentary.
   
   [paste the copied JSON here]

4. Copy the AI's response
5. Click 📋↓ Paste from clipboard in the editor
6. All slides update instantly — switch between layouts via the carousel to verify
7. Export as ZIP

Tips & shortcuts

• Drag & drop any image file directly onto the editor (anywhere) to set it as the slide background
• Auto-save: every change persists to localStorage. Reset the editor by clearing site data in your browser
• Per-slide patterns: clicking Pattern only re-rolls the current slide. Each layout keeps its own visual identity in the carousel
• Per-slide counter override — switch layouts and the counter goes back to auto for that slide. The active override is highlighted in your theme accent color
• Style picker: 4 font pairings (Classic / Editorial / Bold / Minimal) apply across every slide for a consistent look
• Manage cookies link in the footer of the landing page lets you change your consent decision anytime
• Random photo source: picsum.photos. Each click of ↻ pulls a fresh image at the right aspect ratio
• Glass theme draws a unique frosted-card layout. Switch to it for a totally different feel without changing content
• Word counter: each field shows its max next to the label (e.g. 10w). Typing past the limit is blocked silently

FAQ

Where do my slides save?

Locally, in your browser's localStorage under the key slide-gen. Nothing is sent to a server. Clearing site data wipes it.

Can I use my own photos?

Yes. Use the 📁 upload button or drag-drop. Images are kept in-memory only (object URLs), never uploaded.

Can I export at higher resolution?

PNG export is already 2× (effective 2160×2160 / 2160×2700). For even higher you'd need to fork the export logic in captureSlide and bump pixelRatio.

Does this work offline?

Editing yes (everything is client-side). Random photos no — they come from picsum. Upload your own images to stay 100% offline.

Is there a watermark?

No. The brand string in the footer is yours — empty it for a completely blank footer.