DEV Community


Introducing Fusuma: A helper for creating slides with markdown

abouthiroppy profile image Yuta Hiroto ・2 min read

GitHub logo hiroppy / fusuma

✍️Fusuma makes slides with Markdown easily.

📝 Makes slides with Markdown easily.

npm Azure Codecov

Just write Markdown and create cool slides.😎

Please see Fusuma's website for details!


  • Slide Syntax
    • Markdown and MDX
    • Code
    • MathJax
    • Diagrams and Flowcharts
  • UI
  • Experimental APIs on Browsers
    • Presentation API (Chrome, Firefox)
      • Also, Fusuma works even without Presentation API (uses localstorage)
    • Screen Capture API (Chrome, Firefox)
      • It will help live coding, etc
  • Others
    • Zero Config
    • Supporting SEO and OGP
    • customizes JavaScript and CSS freely


  • Start Mode (for development)
  • Build Mode (for production)
  • Presentation Mode
    • Speaker Note
    • Timer
    • Recording user's actions and voice
    • Using a Fluorescent Marker on the slides
  • Live Mode
    • Streaming tweets and comments
  • Deploying to GitHub Pages
  • Exporting slides as PDF


You can also try Fusuma in Gitpod, a one-click online IDE for GitHub:

Open in Gitpod

Getting Started

Getting Started/Preparation

Node versions > v10

Just execute the following two lines…


Created a CLI that supports to release with 1 command without writing webpack, Babel, Postcss, etc setting file.

And make a slide with markdown only.

It can quickly create a slide and publish it to gh-pages.





You just execute the following three lines for executing, generating and deploying slides.

$ npm i fusuma -D
$ npx fusuma init 
$ mkdir slides && touch slides/ && echo '# Hello😄' > slides/

# --- executable tasks---
$ npx fusuma start    # development
$ npx fusuma build    # production as NODE_ENV=production
$ npx fusuma deploy   # deploy to github pages
$ npx fusuma pdf      # export as PDF from HTML

# --- Tree ---
$ tree -a
├── .fusumarc.yml
└── slides

1 directory, 2 files

When npx fusuma start is executed, it is output as follows.

Default theme is bespoke-theme-nebula.

And only .fusumarc.js and slides/ are necessary files at the time of execution.


Fusuma supports the following tasks.

  • init: generate the configuration file(.fusumarc.js)
  • start: run with webpack-dev-server
  • build: build with webpack4
  • deploy: upload the prebuilt files to gh-pages
  • pdf: convert prebuilt files from HTML to pdf

What it can do / What it can not do

What it can do

What it can not do

Expressing animation is difficult because a slide is written by Markdown.
However, you can write a slide as HTML and extend JS.

If you interested in Fusuma, please see this repository😍


Discussion (0)

Editor guide