The content studio built for agents.
Slides, LinkedIn carousels, stories, thumbnails, and OG images from one workspace. Every page is a React component on a canvas sized for its format. You describe it, your agent writes it.
Workflow
Pages as code. Written by agents.
- 01 · scaffold
Spin up a workspace
Creates the workspace. Every deck, carousel, and thumbnail you make lives inside it.
$npx @open-frame/cli init my-studio✓ ready in 3s - 02 · author
Ask your agent
Your agent drafts pages as React components, in whatever format you pick.
›/create-slide a launch carousel
... - 03 · iterate
Edit, comment, apply
Click any element to tweak it visually. Or leave a comment for the agent to apply.
›/apply-comment✓ applied change
Pages as code
A page is a file. Just React, nothing else.
import type { Page } from '@open-frame/core'; const ACCENT = '#d56b48';const WORD = 'deck';const SUBTITLE = 'A React page, rendered live.'; const Cover: Page = () => ( <div style={{ background: '#08090a', color: '#f7f8f8' }}> <h1 style={{ fontSize: 188, letterSpacing: '-0.04em' }}> Hello, <em style={{ color: ACCENT }}>{WORD}</em>. </h1> <p>{SUBTITLE}</p> </div>); export default [Cover] satisfies Page[];Hello, deck.
A React page, rendered live.
Formats
One workspace. Every format.
Seven presets and a custom canvas, all from the same workspace. It couldn't be easier to ship visuals that fit every platform.
Pick a format in seconds
Set a format in the deck's meta. Every page in that deck renders, previews, and exports at that size — swap the format and the whole deck follows.
Slide. Talks and presentations.
Carousel. LinkedIn and Instagram carousels.
Portrait. Portrait feed posts.
Story. Instagram and WhatsApp stories.
Thumbnail. YouTube thumbnails.
OG image. Link previews.
X post. X post images.
Custom. Set any width and height.
The inspector
Talk to the agent. Or just tap the canvas.
Drop a comment. The agent rewrites the file.
Click any block, leave a note. The inspector pins it as a @slide-comment marker in your source. Run /apply-comments — the agent edits exactly what you flagged and clears the marker.
Click. Tweak. Save.
Toggle inspect, click any element. Change text, font, weight, color, or swap an image — right on the canvas. Edits buffer in memory until you hit Save, so one batch lands as a single HMR write.
Assets
Drop in images. Pull in logos.
In-place file management.
Drag images straight into the deck. Rename and replace from the same pane the inspector uses to swap an element’s src.
Brand logos, no dance.
Search svgl from inside the editor. Pick a result and the SVG lands in your assets folder, ready to import.
Agents
Bring your own agent. Anything that edits React works.
Claude
Codex
CursorGemini CLI
OpenCode
Windsurf
ZedClaudeCodexCursorGemini CLIOpenCodeWindsurfZedUse cases
Designed for you
Start from a prompt, or open the demo workspace and make it yours.
Speakers
- · Conference talks
- · Meetup decks
- · Workshop slides
Creators
- · YouTube thumbnails
- · LinkedIn carousels
- · Instagram stories
Developers
- · Decks versioned in your repo
- · Slides reviewed in pull requests
- · Themes shared as components
Marketers
- · Launch carousels
- · X post images
- · OG images for link previews
Educators
- · Lecture slides
- · PDF handouts to share
- · Reusable course decks
Teams
- · One workspace for every format
- · A consistent brand, in code
- · Static sites anyone can host
FAQ
Questions & answers
What is open-frame?
open-frame is a studio for making slides, LinkedIn carousels, story graphics, YouTube thumbnails, OG images, and X post images with React and a coding agent. Every page is a .tsx file rendered on a canvas sized for its format. Decks live in your repo, so they are versioned, reviewable in pull requests, and yours.
What formats does open-frame support?
Seven presets: slide (1920×1080), carousel (1080×1080), portrait (1080×1350), story (1080×1920), thumbnail (1280×720), OG image (1200×630), and X post (1600×900). If none of those fit, set a custom canvas with any width and height. Every page in a deck renders, previews, and exports at the deck's size.
How is open-frame different from Reveal.js, Slidev, or Canva?
Slide frameworks like Reveal.js and Slidev lean on Markdown or a DSL, and they only make slides. Design tools like Canva are visual editors an agent cannot drive. open-frame gives every page a full React component on a fixed canvas, so an agent can write it, you can review it like any other code, and one workspace covers slides, carousels, stories, and thumbnails.
Which AI coding agents work with open-frame?
Any agent that edits React works. open-frame ships skills for Claude Code, and the same files are editable by Codex, Cursor, Gemini CLI, OpenCode, Windsurf, Zed, and any other tool that can read and write .tsx files. There is no proprietary protocol. Agents work because pages are just code.
Do I need to know React to use open-frame?
No. Describe what you want in plain language and your agent writes the React for you. From there you iterate visually with the in-browser inspector, or leave comments on elements for the agent to apply. Knowing React helps when you want full control, but it is not required.
Can I export what I make?
Yes. Export any deck as a PDF, a PPTX, or PNG images, each sized to the deck's format. You can also build a self-contained static site and host it on Vercel, Cloudflare Pages, Netlify, or any static host.
Is open-frame open source?
Yes, open-frame is MIT-licensed. Source lives at github.com/hdprajwal/open-frame. It is built on open-slide by Yiwei Ho, which pioneered the agent-first authoring model; open-frame adds multi-format canvases and format-correct exports on top.
Get started
Make your first frame in the next minute.
One command, zero config. Your agent takes it from here.