Build Presentations With
Any Large Language Model

Generate beautiful, data-driven slides instantly using JSON and your favorite AI. CrispDeck turns structured data into pixel-perfect, responsive presentations without manual formatting.

CrispDeck

Copy the prompt to your preferred AI assistant to generate your presentation.

CRISPDECK SYSTEM INSTRUCTIONS
Generate a presentation deck strictly adhering to the following JSON schema. Output ONLY valid JSON.

### GLOBAL RULES & LAYOUT CONSTRAINTS (CRITICAL)
1. Data-Driven Completeness: Populate all charts and metrics with realistic, domain-specific data. Do not use generic placeholders.
2. Layout Zones: "zones" is an array of columns. Each column is an array of Components.
3. Chart Data: SVG charts do NOT support Markdown in their data labels. Use plain text only.
4. Title Layouts ("title"): The body is hidden via CSS. DO NOT include a "zones" array.
5. Canvas Layouts ("canvas"): This layout strips all slide padding. Use the "text" component with variant "poster".
6. Hero Layouts ("hero"): Designed for cinematic impact. Use the "text" component with variant "quote".
7. Spatial Awareness (The 30/70 Rule): Respect column widths. Place wide components in 70% columns, tall/narrow components in 30% columns.
8. Layout Preference: STRONGLY prefer side-by-side layouts ("multi-col", "split-30-70"). Balance component height.
9. Deck Metadata: Always populate 'deckTitle' and 'footerText' at the root level.
10. Dynamic Image Generation: For the "image" component, pass a keyword list to "imageQuery" (e.g., {"type": "image", "imageQuery": "corporate,boardroom"}). 
11. Custom Typography: You can utilize ANY Google Font by specifying its exact name in quotes (e.g., "'Space Grotesk', sans-serif").
12. Icons: For media-block "icon", use ANY valid Lucide Icon name.
13. Geospatial Maps & Pins: Use the "map" chart variant. Available regions are "world", "us", "europe", "asia", "africa", "middle_east", "india", "south_america", "canada", and "oceania". You can place markers using the "pins" array by providing valid "lat" (latitude) and "lng" (longitude) coordinates along with a "label".

### SCHEMA DEFINITIONS

type ThemeDef = { bg?: string; surface?: string; border?: string; text?: string; inverted?: string; accent?: string; kicker?: string; head?: string; fontHeading?: string; fontBody?: string; };

type Deck = { deckTitle: string; footerText: string; theme?: ThemeDef; slides: Slide[]; };

type Slide = { id: string; layout: "title" | "divider" | "hero" | "canvas" | "multi-row" | "multi-col" | "dynamic-grid" | "split-30-70" | "split-70-30"; gridColumns?: number; kicker?: string; title: string; subtitle?: string; tracker?: string; zoneStyles?: { flex?: string | number, width?: string, height?: string, flexDirection?: string, justifyContent?: string, alignItems?: string, gap?: string, padding?: string }[]; zones?: Component[][]; };

type LogicTreeNode = { title: string; desc?: string; children?: LogicTreeNode[]; };

type ComponentStyle = { flex?: string | number; width?: string; height?: string; alignSelf?: "auto" | "flex-start" | "flex-end" | "center" | "baseline" | "stretch"; justifySelf?: "auto" | "flex-start" | "flex-end" | "center" | "stretch"; margin?: string; padding?: string; textAlign?: "left" | "center" | "right" | "justify"; };

type Component = { style?: ComponentStyle } & (
| { type: "text", variant: "markdown" | "quote" | "poster", content: string }
| { type: "html", content: string }
| { type: "list", variant: "toc" | "comparison", items: { text: string, positive?: boolean }[] }
| { type: "indicator", variant: "kpi", label: string, value: string | number, trend?: string }
| { type: "indicator", variant: "rag", label: string, value: "red" | "amber" | "green" }
| { type: "indicator", variant: "harvey", label: string, value: number }
| { type: "chevron-flow", steps: { label: string, active: boolean }[] }
| { type: "timeline", events: { date: string, title: string, desc?: string }[] }
| { type: "logic-tree", title: string, desc?: string, children?: LogicTreeNode[] }
| { type: "matrix-2x2", xAxis: string, yAxis: string, quadrants: { name: string, items: string[] }[] }
| { type: "data-table", headers: string[], rows: (string | number)[][] } 
| { type: "gantt", timeline: string[], tasks: { label: string, start: number, duration: number, desc?: string, status: "done" | "progress" | "delayed" }[] }
| { type: "image", url?: string, imageQuery?: string, caption?: string, alt?: string }
| { type: "media-block", variant: "profile", title: string, subtitle: string, role: string, url?: string }
| { type: "media-block", variant: "icon", title: string, subtitle: string, iconName: string }
| ChartComponent );

type ChartComponent = 
| { type: "chart", variant: "bar" | "pie" | "donut" | "line" | "area" | "waterfall" | "funnel" | "treemap", title?: string, data: { label: string, value: number, isTotal?: boolean }[] }
| { type: "chart", variant: "stacked-bar", title?: string, data: { label: string, series: { name: string, value: number }[] }[] }
| { type: "chart", variant: "radar", title?: string, features: string[], data: { values: number[] }[] }
| { type: "chart", variant: "scatter", title?: string, data: { x: number, y: number, r: number, label: string }[] }
| { type: "chart", variant: "heatmap", xLabels: string[], yLabels: string[], data: number[][] }
| { type: "chart", variant: "map", region?: "world" | "us" | "europe" | "asia" | "africa" | "middle_east" | "india" | "south_america" | "canada" | "oceania", title?: string, data: { label: string, value: number }[], pins?: { label: string, lat: number, lng: number, value?: number }[] };

Brand & Theme Options

Save Current Theme To:

Heading Font

Body Font

Add Custom Font

Background Pattern

Brand Logo

Slide Background

#f9fafb

Surface / Cards

#ffffff

Borders / Lines

#e5e7eb

Main Text

#374151

Heading Text

#111827

Inverted Text

#ffffff

Primary Accent

#2563eb

Alert / Kicker

#d97706

Slide Order

JSON Editor

Zoom 100%

Preparing Export...

Build Presentations WithAny Large Language Model

CrispDeck

Paste and edit your AI-generated JSON.

CrispDeck

Notice

Tutorial

Build Presentations With
Any Large Language Model