Markdown Slides Editor Online

Install the plugin, and the editor if you want to author decks

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

npm install @react-markdown-kit/editor

You only need the first line to render a deck. The root entry doesn’t load React, so a server component or a static build gets the same <article> of <section>s. The /present entry adds present mode. The left pane of this page is built from the editor and the /editor entry.

Making slides from Markdown

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 HTML with no script, classes or inline styles, and the notes get 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>

   Copy
2. Write plain Markdown. On GitHub, in a diff or in any other editor, the file shows up as a document with horizontal rules. A --- inside a fence, a quote or a list doesn’t split the slide, and front matter at the top sets the title, the aspect ratio and the defaults for every slide.

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

   Copy
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 { defineMarkdownPreset } from '@react-markdown-kit/renderer'
   import { slides } from '@react-markdown-kit/slides/present'
   
   const preset = defineMarkdownPreset({
     extensions: [slides({ hashRouting: true, sync: 'talk' })],
   })

   Copy

   import { defineMarkdownPreset } from '@react-markdown-kit/renderer'
   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} />

   Copy

Put a deck in your own page

If you add embed=1 to a share link, the page hides everything except the deck (the footer, the landing copy and the editor all go away). The deck fills the frame, opens in present mode and keeps keyboard and pointer navigation inside the frame, so arrow keys and clicks move the slides once the frame has focus. There’s a small Open in React Markdown Kit link in the corner that opens the full editor in a new tab with the same deck.

<iframe
  src="https://reactmarkdownkit.com/markdown-slides?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 doesn’t need to load anything from your server. Press Share on this page to copy a link with your deck in it, then add &embed=1. An embedded deck doesn’t touch the address bar or open a 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 add 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, and the right pane is the renderer with the same preset. The deck re-renders as you type. Press Present in the deck’s control bar to show it from this window.
• The deck lives in the address bar. ?d= is the source, deflated and base64url encoded, so a link carries 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, and it stays on the same slide as this window.
• Printing gives each slide a 16 by 9 inch page, using the stylesheet’s break-after: page and this site’s own @page rule. The deck scales with container units, so nothing has to measure the window.
• The other plugins are in the editor demo, the Mermaid canvas is in the Mermaid editor, and the renderer demo covers rendering on its own.