WYSIWYG slide deck editor toolkit
The fastest way to add an in-app presentation editor. Compose slides with blocks and layouts, then render/export anywhere.
Try the one component drop-in.pn
One component is all it takes to build decks, banners, socials, and printables.
import { Blockslides } from "@blockslides/react";
import "@blockslides/react/styles.css";
export default function App() {
return (
<div style={{ height: "100vh" }}>
<Blockslides />
</div>
);
}
Live demo
This is a real editor. Click around and try a few common workflows.
Try adding a slide from templates, select text to open the bubble menu, drag blocks to reorder content, and click an image to explore image controls.
Why Blockslides?
One editor → many asset types
Build decks, social banners, thumbnails, and printable one-pagers from the same slide model. Mix sizes like 16x9, A4, and LinkedIn banner in a single doc.
Batteries-included editor UX
A full slide editor with blocks, layouts, menus, shortcuts, drag-and-drop, media, and tables. Ship an in-app editor without rebuilding the fundamentals.
Own your content (JSON-first), render anywhere
Store content as structured JSON for persistence and versioning, then export to HTML, Markdown, or plain text for publishing, previews, docs, and search indexing.
Extensible + AI-ready
Start with ExtensionKit, then customize via extensions and node views. Use @blockslides/ai-context (prompt bundles, schemas, and templates) to keep AI-generated documents valid.
Prebuilt UIs
Drop-in components and presets to help you ship editing UX fast, with sensible defaults and escape hatches when you need them.
Ship a production-ready editor UI with sensible defaults, then customize with extensions and node views when you need to go deeper.
Learn moreAdd Blockslides to your app
Start with the docs and ship your first in-app editor in minutes.