HTML to slides in seconds

HTMLTO SLIDES

Paste HTML+CSS, get high-res PNG, WebP & PDF carousels. Use the web editor, CLI, or MCP server.

npx slideshot ./slides.html --scale 4
Open Editor Browse Gallery
terminal
$▌
npx slideshot4 slides → ZIPPNG + WebP + PDF540 × 675MCP ServerAI PromptsUp to 6x ScaleOpen SourcePrivacy First
npx slideshot4 slides → ZIPPNG + WebP + PDF540 × 675MCP ServerAI PromptsUp to 6x ScaleOpen SourcePrivacy First
npm Downloads
507
Last 7 days
GitHub Stars
1
Open source
Prompt Templates
8
Ready to use
Export Formats
3
PNG / WebP / PDF

WHY SLIDESHOT?

You write code. Your slides should be code too.

Canva is slow for devs

Drag-and-drop is fine for marketers. You need to generate 20 slides from data, not click through templates one by one.

Screenshots lose quality

Screenshotting your browser at 1x gives you blurry, low-res images. Slideshot renders at up to 6x scale -- print-ready.

No automation pipeline

Need slides generated in CI, from a script, or by an AI agent? There's no API for that -- until now.

Model Context Protocol

LET AI BUILD
YOUR SLIDES

Connect slideshot to your AI tool via MCP. Describe what you want, the AI writes the HTML, and slideshot renders it -- all in one step. No copy-paste, no context switching.

ClaudeCursor IDEWindsurfChatGPT (Custom GPTs)AntigravityAny MCP Client

CLAUDE DESKTOP

~/Library/Application Support/Claude/claude_desktop_config.json

{
  "mcpServers": {
    "slideshot": {
      "command": "npx",
      "args": ["-y", "slideshot-mcp"]
    }
  }
}

CURSOR IDE

.cursor/mcp.json

{
  "mcpServers": {
    "slideshot": {
      "command": "npx",
      "args": ["-y", "slideshot-mcp"]
    }
  }
}

AVAILABLE TOOLS

render_html_to_images

Render HTML slides to PNG, WebP, and PDF files. Pass html string, output directory, selector, dimensions, scale (1-6x), and formats.

get_slide_prompt

Returns an AI prompt template for generating slideshot-compatible HTML. Choose "generic" or "branded" variant.

WORKFLOW

01

Ask AI to use get_slide_prompt for the prompt template

02

Provide your content topic -- AI generates slide HTML

03

AI calls render_html_to_images with the HTML and output path

04

Get PNG, WebP, and PDF files ready for LinkedIn, presentations, or anywhere

NO MCP? USE THE HTTP API

For ChatGPT Custom GPTs and OpenWebUI, import the OpenAPI spec as an Action or Tool. Same render + prompt endpoints, no MCP required.

https://slideshot.vercel.app/api/openapi.json
ChatGPT Custom GPT → OpenAPI ActionOpenWebUI → OpenAPI Tool
View on npm
Zero Install

ONE COMMAND.
DONE.

No install. No config. Just npx and your HTML file. Works in CI/CD pipelines, GitHub Actions, scripts, or your terminal.

CI/CD ReadyGitHub ActionsShell ScriptsCross Platform
terminal
# Zero install -- just run it
$ npx slideshot ./slides.html --scale 4
# Or install globally for speed & reusability
$ npm i -g slideshot
$ slideshot render ./deck.html --formats png,webp,pdf
# Output
✓ slides.zip — 4 slides (PNG, WebP, PDF)
slideshot/editor
<div class="slide">
<h1>Your content</h1>
<p>Goes here</p>
</div>
LIVE PREVIEW
Real-time rendering
Web App

PASTE. PREVIEW.
EXPORT.

No setup needed. Open the web editor, paste your HTML+CSS, see a live preview, and export with one click. Collapsible code and preview panels for a distraction-free experience.

Open Editor

PRIVACY FIRST

Your data never leaves your machine. No tracking, no analytics, no cloud uploads.

NO DATA STORED

Your HTML is processed in-memory and discarded immediately. Nothing is saved to any server or database.

ZERO TRACKING

No cookies, no analytics scripts, no telemetry. The webapp and CLI collect nothing about your usage.

100% OPEN SOURCE

Every line of code is on GitHub. Audit it, fork it, self-host it. MIT licensed.

View Source on GitHub

EVERYTHING YOU NEED

From AI-generated prompts to high-res exports, slideshot handles the full pipeline.

AI Prompt Templates

8 built-in style variants: minimal, monospace, bold social, data cards, corporate, dark neon, editorial, and browser-shell.

High-Res Export

PNG, WebP, and PDF at up to 6x scale. Each .slide element becomes one image. Bundled as a ZIP.

CLI + MCP Server

Use from terminal with npx slideshot, or integrate with Claude / Cursor via the slideshot-mcp server.

USE WITH CHATGPT CUSTOM GPTS

Create a Custom GPT with our system prompt from the gallery. ChatGPT generates slideshot-compatible HTML -- paste the output into the editor or pipe it through the CLI.

Get Prompts

SYSTEM PROMPTS

Copy these into ChatGPT, Claude, or any LLM. One generates slide structure from your content, the other extracts a design system from a reference image.

Base Prompt

Content to Slide Structure

Turns your text, lists, and data into slideshot-compatible HTML. Handles multi-slide splitting, typography, and layout.

system-prompt.txt
You are a slide layout engine. Given content (text, lists, stats), generate a single self-contained HTML file that works with slideshot.

RULES:
- Each slide is a <div class="slide"> inside <body>
- Slide dimensions: width: 540px; height: 675px; overflow: hidden
- Body: background: #1a1a1a; padding: 48px; display: flex; flex-direction: column; gap: 40px; align-items: flex-start
- Include a <style> block inside <head> with all CSS (no external stylesheets except Google Fonts)
- Import fonts from Google Fonts via <link> in <head>
- Use inline SVGs for icons/illustrations — no external images (Puppeteer can't fetch them reliably)
- Split content across multiple slides when it overflows. Don't cram.
- Each slide should have: a header area, a content body, and optionally a footer bar

SLIDE STRUCTURE:
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link href="https://fonts.googleapis.com/css2?family=YOUR+FONT&display=swap" rel="stylesheet">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      background: #1a1a1a;
      padding: 48px;
      display: flex;
      flex-direction: column;
      gap: 40px;
      align-items: flex-start;
      font-family: 'Your Font', sans-serif;
    }
    .slide {
      position: relative;
      width: 540px;
      height: 675px;
      overflow: hidden;
      flex-shrink: 0;
    }
  </style>
</head>
<body>
  <div class="slide"><!-- Slide 1 --></div>
  <div class="slide"><!-- Slide 2 --></div>
</body>
</html>
```

EXPORT CONSTRAINTS:
- Selector: .slide (default) — each matched element becomes one image
- Max 20 slides per export
- Keep total HTML under 512KB
- Test that content fits within 540x675 — nothing should overflow or clip

When the user gives you content, structure it into slides following these rules. Pick appropriate typography, spacing, and visual hierarchy. Don't ask clarifying questions — just produce the HTML.

Style Prompt

Image to Design System

Reverse-engineers a visual style from a reference image into CSS tokens, typography, and colour palette.

system-prompt.txt
You are a CSS design system extractor. Given a reference image or description of a visual style, reverse-engineer the complete design system and output it as CSS custom properties + class definitions ready to use in slideshot HTML slides.

WHAT TO EXTRACT:

1. COLOUR PALETTE — every distinct colour as hex, with usage label:
   Primary, Secondary, Background, Text, Accent, Border, Muted, etc.

2. TYPOGRAPHY — font families (with Google Fonts import URL), weights, sizes:
   - Hero/Display: family, size, line-height, letter-spacing, weight
   - Body/UI: family, size, line-height, weight
   - Labels/Captions: family, size, tracking, text-transform

3. LAYOUT SYSTEM:
   - Outer container: background, padding (creates visible border effect)
   - Content container: border-radius, background, shadow
   - Content padding: horizontal/vertical values
   - Spacing scale: gap between elements
   - Dividers: thickness, colour, style

4. DECORATIVE ELEMENTS:
   - Border styles, border-radius values
   - Box shadows
   - Any shell/frame (e.g. browser chrome, phone frame)
   - Decorative shapes (blobs, dots, patterns — describe as SVG-ready)

OUTPUT FORMAT — always use this structure:

```
Colors:
  Primary:      #HEX    — [usage]
  Secondary:    #HEX    — [usage]
  Background:   #HEX    — [usage]
  Text:         #HEX    — [usage]

Typography:
  Display:  [Font Family] (Google Fonts)
  Body:     [Font Family] (Google Fonts)

Spacing:
  Base unit:        [N]px
  Container pad:    [N]px

Border Radius:
  Container:  [N]px
  Cards:      [N]px
```

Then provide the full CSS classes that implement this system, ready to paste into a slideshot HTML file's <style> block.

EXAMPLE — Obsio browser-shell style:

Colors:
  Primary Yellow:   #FFD233  — Slide bg, accents, tags
  Dark Navy:        #12122A  — Browser shell, footer bar
  Black Text:       #0A0A0A  — Headlines, body, outlines
  White:            #FFFFFF  — Content area

Typography:
  Display:  Bebas Neue  — all hero headlines
  Body:     DM Sans     — all UI/body copy

Spacing:
  Outer slide:     20px padding (yellow border)
  Browser shell:   14px border-radius
  Content padding: 24px horizontal

When the user provides an image or describes a style, extract everything into this format. Be specific with hex values, pixel sizes, and font names. Don't hallucinate fonts — if unsure, suggest the closest Google Fonts match and say so.

READY TO BUILD
YOUR SLIDES?

Open the editor, paste your HTML, and export. Or grab a prompt template from the gallery.

Open Editor Browse Gallery
npx slideshot ./slides.html