# Decks written as data, presented on the web. > Write decks as JSON or Markdown and present them in the browser. Language: en Canonical: https://texuli.com/solutions/slides/ Markdown: https://texuli.com/solutions/slides.md (this page). Every texuli.com page has a Markdown twin at its URL plus `.md` (the home page is https://texuli.com/index.md), and any page URL answers `Accept: text/markdown` with its twin instead of HTML. Last Updated: 2026-11-13 --- Solution · Slides 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 [Try the live deck](https://texuli.com/solutions/slides/#demo)[Start building](https://texuli.com/solutions/slides/#quickstart) ![Isometric 3D slide stage and storyboard of pearl slides assembling from violet cubes](https://texuli.com/_astro/solution-slides-hero.BW9V5OXC.webp) ## 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. ## Small pieces. Infinite possibilities. An open-source interface library, owned end to end, for humans and agents. Texuli · Open source · MIT Static slide preview Slide 1 of 7: Small pieces. Infinite possibilities. The static preview is ready; the interactive controls load on request. If the interactive demo cannot load, use the static preview above. ## Write it once. Check it, present it, hand it out. ### 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 ![Data tiles of two kinds passing a lilac-glass check gate and assembling into one pearl slide deck](https://texuli.com/_astro/solution-slides-story-1.ErPb1WB7.webp) ### 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 ![A large presentation stage, a smaller phone showing the same slide, an overview grid and a presenter strip](https://texuli.com/_astro/solution-slides-story-2.Dy0tt3pl.webp) ### 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 ![Three pearl slide cards in different layouts on a quiet shelf, one with a contrast-safe violet wash](https://texuli.com/_astro/solution-slides-story-3.rIYhavIv.webp) ### 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 ![A presentation slide on a pearl frame above a filmstrip of small thumbnail slides](https://texuli.com/_astro/page-slides.DWqlYgea.webp) ## 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/deck` - ### Parse 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/deck` - ### Navigate A framework-free engine runs slides, steps, vertical stacks, hash routes and the presenter protocol, with no DOM.Package: `@texuli/deck` - ### Present The Svelte stage scales a fixed canvas to any screen, with keyboard and touch, an overview, a presenter window and layouts.Package: `@texuli/slides` - ### Print 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` Slides is built from @texuli/slides and @texuli/deck, on @texuli/player, @texuli/catalog, @texuli/blocks, @texuli/media, @texuli/tokens and @texuli/core. Solution Slides Packages - L8[`@texuli/slides`](https://www.npmjs.com/package/@texuli/slides) Presentation stage, layouts, print and PPTX export Subpaths: ./stage · ./layouts · ./export - L0[`@texuli/deck`](https://www.npmjs.com/package/@texuli/deck) Framework-free deck model, codecs, navigation engine and authoring Subpaths: ./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) ![Five-beat isometric pipeline from source tiles through a check gate, an engine cube, a stage and a print stack](https://texuli.com/_astro/solution-slides-how.B62zUl1e.webp) Build with Slides ## Start with a deck ### Install ``` pnpm add @texuli/deck @texuli/slides ``` ### Parse 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\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 ``` ``` Verified by `apps/website/tests/solutions/slides-quickstart.test.ts` ## Recipes - ### [Present a deck in the browser](https://texuli.com/guides/solutions/slides/) Mount DeckStage with a fixture deck, step by step in the Slides docs. - ### [Install the packages (external site)](https://www.npmjs.com/package/@texuli/slides) 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. - [MCP server](https://texuli.com/mcp-server/) - [Agent skill](https://texuli.com/skill/) - [Building with agents](https://texuli.com/agents-page/) - `deck.run` deck.run: In developmentMCP operation: lint, inspect and convert a deck on the shared v2 model. - `layout-deck` layout-deck: In developmentCatalog layout for an agent-emitted deck (the main landmark). - `deck-slide` deck-slide: In developmentCatalog layout for one slide inside a deck. - `skills/texuli/build-ui/references/decks.md` skills/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. [How the native renderer works](https://texuli.com/native/) ## More Solutions - ### [Documents](https://texuli.com/solutions/documents/) Edit, read, paginate and export block documents.Status: in development - ### [Workflows](https://texuli.com/solutions/workflows/) Author and view workflow graphs inside your app.Status: in development - ### [Canvas](https://texuli.com/solutions/canvas/) An embeddable whiteboard with shapes, connectors and export.Status: in development - ### [Sheets](https://texuli.com/solutions/sheets/) An embeddable spreadsheet with formulas and CSV.Status: in development - ### [Design systems](https://texuli.com/solutions/design-systems/) Carry one brand document across Texuli surfaces.Status: available - ### [Dashboards](https://texuli.com/solutions/dashboards/) KPI boards people arrange, from the keyboard too.Status: in development - ### [Forms](https://texuli.com/solutions/forms/) Schema-driven forms with conditions, steps and drafts.Status: in development - ### [Agent chat](https://texuli.com/solutions/agent-chat/) A thread whose replies paint validated blueprints.Status: in development - ### [Rich text editor](https://texuli.com/solutions/editor/) Owned rich text with Markdown in and out, safe paste and export to any chat.Status: in development ## Start building with Slides Write decks as JSON or Markdown and present them in the browser. [Read the Slides guide](https://texuli.com/guides/solutions/slides/)[Install @texuli/slides](https://www.npmjs.com/package/@texuli/slides) ![A low horizon of stacked cubes rising to one glowing pearl cube under a wide open sky](https://texuli.com/_astro/home-final.BGuYKnjC.webp) ![A low horizon of stacked cubes rising to one glowing pearl cube under a wide open sky](https://texuli.com/_astro/home-final.BGuYKnjC.webp) ## For agents Present a deck: the live Slides demo runs in the browser on fixture data. Runs in the browser on fixture decks only; nothing is saved. The live parts run in the browser and are not in this Markdown; the operations below do the same work through the read-only MCP server at https://texuli.com/mcp (no sign-in; see https://texuli.com/auth.md). Limits today: - Pre-1.0 and in development: a new minor version may break the API. - No hosted editor or deck storage; the host app keeps the deck data. - Native rendering is planned, not built. MCP operations ([reference](https://github.com/DailybotHQ/texuli/blob/main/packages/tools/docs/ops.md#operations)): - `deck.run`: Run a deck command. - `catalog.search`: Search the component catalog. - `component.get`: Read a component manifest. Docs: - [Slides docs](https://texuli.com/guides/solutions/slides/) - [@texuli/deck README](https://github.com/DailybotHQ/texuli/blob/main/packages/deck/README.md) - [@texuli/slides README](https://github.com/DailybotHQ/texuli/blob/main/packages/slides/README.md)