A declarative language for slides
Create an object, then set its properties. Keep every slide as a clear, linear block. FrameSeq turns readable TypeScript into interactive HTML, PDF, and editable PowerPoint.
npm create frameseq@latest my-talk
presentation({
title: "My talk",
theme: "minimal-academic",
});
// Everything below belongs to this slide
slide("One clear idea").split("42:58");
text("A controllable object")
.size(30)
.color("#24528b");
right();
math`E = mc^2`;
// A new slide begins here
slide("The next idea");Linear sourceNo nested page tree
Object controlChainable modifiers
Rich typesettingLaTeX + Typst
Three outputsHTML · PDF · PPTX
Live product tour
Open the presentation and use Arrow keys or Space. It is the same static HTML you can deploy anywhere.
Built with FrameSeq
See named layouts, progressive steps, math, Typst fragments, Tailwind utilities, shapes, and connectors in a real presentation.
The design language
FrameSeq uses source order as document structure. There is no wrapper around every page and no deeply nested layout markup.
slide("A clear argument")
.split("42:58");
text("42%")
.hero()
.color("#b45309");
text("faster to revise").lead();
bullets(
"Linear source order",
"Named layout regions",
"Controllable objects",
);
right();
text("One source, three destinations")
.eyebrow();
code(`npm run build
npm run pdf
npm run pptx`);The next slide() starts the next page. Nothing is hidden inside wrappers.
Choose a slide concept; FrameSeq creates and routes its named regions.
.split().grid(3).canvas()Every builder returns the same object, ready for semantic or low-level modifiers.
.hero().color().position().style()Built for real presentation work
Start with semantic defaults. Reach for the full web platform only when you need it.
Typesetting
Write inline or display equations with familiar LaTeX syntax. Embed Typst when a table, diagram, or technical fragment needs richer typesetting.
math`\int e^{-x^2} dx`
typst`
#table(columns: 3, ...)
`.width(720);Layout
Split, grid, and named regions cover everyday composition. Canvas positioning, shapes, SVG connectors, and transforms cover diagrams.
Web-native styling
Familiar with frontend work? Pass Tailwind utilities directly to any object. Arbitrary values work without a separate setup.
text("Signal")
.style("text-4xl font-bold
tracking-tight text-blue-600");AI-native authoring
A linear DSL gives models fewer ways to create tangled markup. Semantic commands produce good defaults; explicit modifiers make every generated object understandable and adjustable.
“Read FrameSeq’s llms.txt, then create a six-slide research presentation with math, a method diagram, and speaker notes.”
slides.tsvalidatedAll built-in themes
Theme changes never change the authoring model. Choose a baseline, override global tokens, or define your own theme.
One source, three destinations
FrameSeq owns the presentation structure while the browser provides the rendering engine. Export without maintaining three separate versions of the same presentation.
Read the export guidedeclarative + editableYour next presentation is a TypeScript file