Catch deck errors before anyone presents
Write slides as JSON or in a Markdown dialect, and both land in one validated model. Every issue comes back at once, with its path and a fix, so people and agents correct the deck first.
- Deck model
Solution · Slides
Decks written as data, presented on the web.
Write a deck in JSON or Markdown and see every issue before you present. Run it on any screen with a presenter view, then print a PDF or export PPTX.
Status: in development
Present a real deck
Try this
- Start the demo, then step through with the arrow keys or the Next button.
- Switch the scenario to load another fixture deck.
- Change the theme, play the deck, or open View source to read the deck as data.
Use Reset to return to the starting example.
Slide 1 of 7: Small pieces. Infinite possibilities.
If the interactive demo cannot load, use the static preview above.
Write it once. Check it, present it, hand it out.
Present on any screen, notes in view
The stage scales a fixed canvas to the screen, gives every slide and step its own URL, and follows the keyboard and touch. An overview and a presenter window keep your notes and the next slide close.
- Present
Good-looking slides that stay readable
Pick a catalog layout per slide, set backgrounds that keep text contrast, or start from a finished, fictional starter deck and change only what you need.
- Layouts and templates
Hand it out as PDF or PPTX
The same deck prints to PDF through the browser, one page per visible slide, and exports to PPTX locally, so the deck you present is the deck you share.
- Print and PPTX
From a text file to a presented deck.
Author
Write the deck as JSON or in the deck Markdown dialect. Both produce the same deck, and Markdown round-trips.
Package:
@texuli/deckParse and validate
One model checks every slide and reports every issue at once, with a code, a path and a fix. It never throws.
Package:
@texuli/deckNavigate
A framework-free engine runs slides, steps, vertical stacks, hash routes and the presenter protocol, with no DOM.
Package:
@texuli/deckPresent
The Svelte stage scales a fixed canvas to any screen, with keyboard and touch, an overview, a presenter window and layouts.
Package:
@texuli/slidesPrint and export
Print one page per slide to PDF from the browser, or export an editable PPTX that reports what it leaves out.
Package:
@texuli/slides
Solution
Slides
Packages
- L8
@texuli/slidesPresentation stage, layouts, print and PPTX exportSubpaths: ./stage · ./layouts · ./export - L0
@texuli/deckFramework-free deck model, codecs, navigation engine and authoringSubpaths: ./model · ./engine · ./markdown · ./authoring · ./templates
Built on
- L7
@texuli/player(Blueprint player) - L6
@texuli/catalog(Agent catalog) - L5
@texuli/blocks(Content blocks) - L4
@texuli/media(Media) - L2
@texuli/tokens(Theme tokens) - L0
@texuli/core(Texels and the URL policy)
Build with Slides
Start with a deck
Install
pnpm add @texuli/deck @texuli/slidesParse a JSON deck
import { parseDeck } from '@texuli/deck/model';
const result = parseDeck({
"formatVersion": 2,
"meta": {
"title": "Quarterly update",
"locale": "en"
},
"style": {
"theme": "ocean",
"transition": "slide"
},
"slides": [
{
"id": "opening",
"layout": "title-hero",
"props": {
"title": "Quarterly update",
"subtitle": "Fictional numbers for Northwind"
}
},
{
"id": "adoption",
"layout": "big-stat",
"props": {
"number": "82%",
"label": "of releases shipped on the day they merged"
}
}
]
});
if (result.ok) {
console.log(result.deck.slides.length);
}
Parse a Markdown deck
import { parseDeckMarkdown } from '@texuli/deck/markdown';
import { validateDeckBlock } from '@texuli/slides/stage';
const result = parseDeckMarkdown("---\ntitle: Quarterly update\nlocale: en\ntheme: ocean\n---\n\n<!-- .slide: id=opening layout=title-hero -->\n\n# Quarterly update\n\nFictional numbers for Northwind\n", {
validateBlock: validateDeckBlock,
});
if (result.ok) {
console.log(result.deck.slides.map((slide) => slide.id));
}
Present with DeckStage
<script lang="ts">
import '@texuli/slides/styles.css';
import { DeckStage } from '@texuli/slides/stage';
const deck = {
"formatVersion": 2,
"meta": {
"title": "Quarterly update",
"locale": "en"
},
"style": {
"theme": "ocean",
"transition": "slide"
},
"slides": [
{
"id": "opening",
"layout": "title-hero",
"props": {
"title": "Quarterly update",
"subtitle": "Fictional numbers for Northwind"
}
},
{
"id": "adoption",
"layout": "big-stat",
"props": {
"number": "82%",
"label": "of releases shipped on the day they merged"
}
}
]
};
</script>
<DeckStage {deck} />
Verified by apps/website/tests/solutions/slides-quickstart.test.ts
Recipes
Present a deck in the browser
Mount DeckStage with a fixture deck, step by step in the Slides docs.
Install the packages (external site)
Add @texuli/deck and @texuli/slides from npm (pre-1.0, in development).
For agents
Agents write a deck as JSON or Markdown, check it with the deck model, and present it with DeckStage. The packages are in development.
deck.rundeck.run: In developmentMCP operation: lint, inspect and convert a deck on the shared v2 model.
layout-decklayout-deck: In developmentCatalog layout for an agent-emitted deck (the main landmark).
deck-slidedeck-slide: In developmentCatalog layout for one slide inside a deck.
skills/texuli/build-ui/references/decks.mdskills/texuli/build-ui/references/decks.md: In developmentSkill reference for JSON and Markdown decks, DeckStage, print and PPTX.
Platforms
Web
Web: In developmentSvelte 5 packages published on npm (pre-1.0).
Compose Desktop
Compose Desktop: PlannedKotlin Multiplatform renderer on the JVM, built in this repository.
Android
Android: PlannedNative renderer target.
iOS
iOS: PlannedNative renderer target.
Start building with Slides
Write decks as JSON or Markdown and present them in the browser.
