Skip to content
Kadal Deck docs

Coming from reveal.js

Kadal Deck took reveal.js’s model and many of its names: sections and vertical stacks, fragments, data-background-*, auto-animate, and options such as controls, hash, slideNumber and transition. So a reveal.js deck converts closely. What differs is underneath: a Kadal deck is one MDX file (Markdown with React components) built by Vite, where a reveal.js deck is an HTML page. The importer does that translation for you.

Import a deck in one command

Section titled “Import a deck in one command”

From the folder that holds your reveal.js deck:

Terminal window
npx kadal-deck import reveal ./my-reveal-talk
Terminal window
pnpm exec kadal-deck import reveal ./my-reveal-talk
Terminal window
yarn kadal-deck import reveal ./my-reveal-talk
Terminal window
bunx kadal-deck import reveal ./my-reveal-talk

It reads ./my-reveal-talk (a folder, or its index.html) and writes a new deck folder beside it, ./my-reveal-talk-kadal, made the way kadal-deck new makes one. Nothing in the reveal.js deck is changed, installed or run. Then it runs kadal-deck check on the result and prints a summary:

Imported my-reveal-talk/index.html into my-reveal-talk-kadal.
  23 slides, 22 (96%) with nothing to report.
  theme: reveal.js black → minimal (dark); 1 file copied into public/
  report: 0 errors, 3 warnings, 3 notes — IMPORT-REPORT.md
  check: 0 errors, 0 warnings


Next:


  cd my-reveal-talk-kadal
  npm install
  npm run dev

The flags are the same as import slidev’s:

Flag What it does
--out <dir> (-o) where the new deck goes (default <folder>-kadal)
--force write into a folder that isn’t empty
--install install the new deck’s packages straight away; --pm npm|pnpm|yarn|bun picks the package manager
--json one JSON object on stdout, for scripts

What converts

Section titled “What converts”

| reveal.js | Kadal Deck | | ————————————————————————————————————— | –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– | ––––––– | | <section> | a slide (---) | | a <section> of sections | a vertical stack (---- between its slides) | | plain HTML (headings, paragraphs, lists, links, emphasis) | Markdown, so it can be retyped on the slide in the builder | | elements with attributes Markdown can’t hold (style, classes, data-id) | JSX, spelt for React (className, style objects) | | class="fragment" with its style (fade-up, grow, highlight-red…) | <Click effect="…">: reveal’s fragment styles and Kadal’s click effects share their names | | data-fragment-index | <Click at={n}>, ordered as reveal.js orders them | | a list whose every item is a fragment | a <Clicks> list | | data-background-color, -image, -video, -gradient, -iframe (with size, position, opacity, loop, muted) | background frontmatter on the slide; a dark colour also gets colorScheme: dark | | data-transition, data-auto-animate, data-autoslide, data-state, data-visibility, id | the frontmatter keys of the same names (auto-animate matches by text or data-id) | | <aside class="notes">, data-notes | <Notes> | | code blocks, data-line-numbers="1\|2-3" | fences with their language and {1\|2-3}{lines:true} steps | | data-markdown sections, inline or from a file | their Markdown, split on the separators; <!-- .slide: --> read as frontmatter, <!-- .element: class="fragment" --> as a <Click>, Note: as notes, ```js [1 | 3] as steps | | \( … \) maths | $ … $ | | Reveal.initialize({ … })’s literal options | headmatter |

Inline lengths are scaled from reveal.js’s 960×700 stage to Kadal’s 1920×1080, and the deck gets Kadal’s minimal theme in the scheme that matches your reveal.js theme (black becomes minimal, dark).

What you get

Section titled “What you get”
File From
deck.mdx index.html’s slides, converted
public/ the local images and media the slides use, copied
src/reveal.css the page’s own CSS (and its linked stylesheets, under src/reveal/)
IMPORT-REPORT.md everything that did not carry over, slide by slide

The import report

Section titled “The import report”

IMPORT-REPORT.md lists errors first, then warnings and notes, each with the slide it is on. The usual ones:

  • Your CSS. It is carried over, but selectors written for reveal.js’s markup (.reveal .slides section …) don’t match Kadal’s. Rewrite them against the slide’s classes, or move the look into a theme.
  • Scripts and on* handlers. Nothing in the page is run, so they are listed and dropped. Behaviour you need back goes into a React component on the slide; see Components.
  • A slide’s own style. A slide has no style attribute in Kadal; put the style on what is inside it, or in the deck’s CSS.
  • Plugins. reveal.js plugins are not loaded. Most have a built-in equivalent: speaker notes are the presenter view, multiplex is the live room, and maths and code highlighting are KaTeX and Shiki, built in.

Work through the report, run npx kadal-deck checkpnpm exec kadal-deck checkyarn kadal-deck checkbunx kadal-deck check again, and look at the deck with npm run devpnpm devyarn devbun run dev.

Then

Section titled “Then”

Send feedback