Markdown Slides Editor Online

The plugin, plus the editor for authoring

npm install @react-markdown-kit/renderer @react-markdown-kit/slides

npm install @react-markdown-kit/editor

Rendering a deck needs only the first line, and the root entry loads no React: a server component or a static build gets the same <article> of <section>s. The /present entry adds the show; the editor and the /editor entry are what the left pane of this page is made of.

Slides from Markdown in three steps

1. Render a deck. Put slides() in a preset. Slides split on ---, the notes start at ???, a -- is a pause, and <!-- class | background | name: … --> comments set a slide’s properties. The output is static: no script, no classes, no inline style, and the notes carry the HTML hidden attribute.

   import Markdown, { defineMarkdownPreset } from '@react-markdown-kit/renderer'
   import { slides } from '@react-markdown-kit/slides'
   import '@react-markdown-kit/slides/styles.css'
   
   const preset = defineMarkdownPreset({ extensions: [slides()] })
   
   <div className="rmk-document">
     <Markdown preset={preset}>{deck}</Markdown>
   </div>

2. Write plain Markdown. The same file is a document with rules on GitHub, in a diff and in any editor. A --- inside a fence, a quote or a list never splits, and front matter at the top sets the title, the aspect ratio, and defaults for every slide.

   ---
   title: Q3 review
   ---
   
   # Welcome
   
   ---
   
   <!-- class: center, middle -->
   
   ## Numbers
   
   Revenue is up.
   
   --
   
   So are costs.
   
   ???
   
   Pause before the second line.

3. Present, then edit. The /present entry’s slides() gives the deck a Present button, keyboard and pointer navigation, fragments, a presenter view with the notes and a clock, #3 deep links and a BroadcastChannel that keeps two windows on the same slide. The /editor entry adds the slide break, the markers and the directive chips to the editor, with four toolbar buttons.

   import { slides } from '@react-markdown-kit/slides/present'
   
   const preset = defineMarkdownPreset({
     extensions: [slides({ hashRouting: true, sync: 'talk' })],
   })

   import { MarkdownEditor } from '@react-markdown-kit/editor'
   import { slides } from '@react-markdown-kit/slides/editor'
   
   const preset = defineMarkdownPreset({ extensions: [slides()] })
   
   <MarkdownEditor preset={preset} value={source} onChange={setSource} />

Put a deck in your own page

Add embed=1 to a share link and the page drops everything but the deck: no footer, no landing copy, no editor. The deck fills the frame, opens in present mode, and keeps its keyboard and pointer navigation inside it, so arrow keys and clicks move the slides once the frame has the focus. A small Open in React Markdown Kit link sits in the corner and opens the full editor in a new tab with the same deck.

<iframe
  src="https://slides.reactmarkdownkit.com/?embed=1&d=uIyBXZWxjb21lCgotLS0KCiMjIFNlY29uZCBzbGlkZQoKT25lIGZpbGUsIHR3byBzbGlkZXMu"
  title="A deck written in Markdown"
  width="100%"
  height="480"
  loading="lazy"
  allowfullscreen
></iframe>

The d value is the whole deck, so the frame loads nothing from you. Press Share on this page to copy a link with your deck in it, then add &embed=1. An embedded deck writes no address bar and opens no sync channel, so several frames on one page stay independent. Give the frame the aspect ratio of your slides (16 by 9 by default) and allowfullscreen if you want the full screen button to work. See the embed on its own.

About this editor

• The left pane is the rich editor with the /editor entry; the right pane is the renderer with the same preset. Type and the deck re-renders; press Present in the deck’s control bar to show it from this window.
• The address bar holds the deck: ?d= is the source, deflated and base64url encoded, so a link is the whole file. Share copies a link that opens in present mode. Presenter window opens a second window with the next slide, the notes and a clock; it and this window move together.
• Print gives each slide a 16 by 9 inch page, with the stylesheet’s break-after: page and this site’s own @page rule. The deck uses container units to scale, so nothing measures the window.
• See the other plugins at work in the editor demo, the Mermaid canvas in the Mermaid editor, or just the rendering in the renderer demo.