Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including markdown-deck with all npm packages installed. Try it out:

var markdownDeck = require("markdown-deck")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

markdown-deck v1.6.8

A web component for presenters

<markdown-deck />

npm version Bundle size License

A web component for presenters.

  • Auto screen fitting & keyboard navigation
  • Mobile view & touch navigation
  • Dark mode
  • Print view
  • Live editor


  1. Import script from

    <script type="module" src=""></script>
  2. Put markdown content inside <script type="text/markdown" /> inside <markdown-deck />:

    <markdown-deck hotkey hashsync>
      <script type="text/markdown">
        # Title
        ## Hello World!
        ## The END

    or set markdown attribute on <markdown-deck />:

    <markdown-deck markdown="# Awesome Presentation" />

    or load markdown file with src attribute:

    <markdown-deck src="" />


  • markdown="{string}" the markdown to parse (override contents in <script type="text/markdown")
  • src="{string}" load markdown file from url
  • css="{string}" load custom css file from url
  • index="{number}" current slide index (starting from 0)
  • hashsync enable syncing index with location hash
  • hotkey enable hotkey navigation
  • invert invert color
  • editing toggle editor
  • printing toggle print view
  • progressBar toggle progress bar


  • next: Space
  • prev / next: / or J / L
  • first / last: /
  • __invert color (dark theme)__: I or D
  • toggle print view: P
  • toggle editor: ESC


  • Custom global styles

    Use <style /> inside <markdown-deck /> to apply custom styles:

        img[src*=""] { height: 40px }

    or load external css file with css attribute:

    <markdown-deck css="index.css"></markdown-deck>
  • Custom per-slide style

    Write <style /> within markdown content:

    # Title
      .slide { background: url(...) }
      .content { filter: invert() }
      code { opacity: 0.8 }

See Also

  • eloc: Eloquence cli.


RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free