Skip to content
✍️Fusuma makes slides with Markdown easily.
Branch: master
Clone or download
Latest commit 44b3710 May 20, 2019

📝 Make slides with Markdown easily.

npm Travis AppVeyor Codecov

Just write Markdown and create cool slides.😎


  • supports WebSlides
  • supports Presentation API
    • also, it works even without Presentation API
  • supports various modes
    • development
    • production build
    • exporting as PDF
    • deploying to GitHub Pages
  • supports SNS, OGP, FullScreen, and etc...
  • supports Presenter Mode
    • you can give a speech while watching a presenter's notes and a timer
  • customizes JavaScript and CSS freely


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

Open in Gitpod


Node versions > v8

$ npm i fusuma --save-dev # or npm i fusuma -g

# if you want to use yarn
$ yarn add fusuma --dev


Just execute the following three lines for executing, generating and deploying slides!

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

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

1 directory, 2 files

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

When npx fusuma start is executed, fusuma will create a slide as follows and serves localhost:8080.

And you can customize the slide using CSS.

Directory Structure

Please see samples/intro or Verification Repository.

Slide order is numeric, alphabetical.

├── .fusumarc.yml       <-- the configuration file
├── index.js            <-- optional for rewriting
├── slides              <-- slides written by Markdown or HTML
│   ├──
│   ├──
│   ├── 02-body
│   │   └──
│   └──
└── style.css           <-- optional for rewriting

2 directories, 7 files

Or slides can be divided by --- like below.

## Hello

This is the first slide.


## 🤭

This is the second slide.


Fusuma provides CLI.

   fusuma.js 1.0.0 - CLI for easily make slides with Markdown


     fusuma.js <command> [options]


     init                Create a configure file
     start               Start with webpack-dev-server
     build               Build with webpack
     deploy              Deploy to GitHub pages
     pdf                 Export as PDF
     help <command>      Display help for a specific command


     -h, --help         Display help
     -V, --version      Display version
     --no-color         Disable colors
     --quiet            Quiet mode - only displays warn and error messages
     -v, --verbose      Verbose mode - will also output debug messages

Configuration File

Supports for yaml and js and it can be generated by running fusuma init.


  name: the present and future of JavaScript
  author: Yuta Hiroto
  description: Explain how specifications are determined and how it will be in the future.
    - twitter
    - hatena
  loop: true
  sidebar: true
  targetBlank: true
  showIndex: false
  isVertical: false
      - javascript
      - line-numbers
    theme: default
  js: index.js
  css: style.css


module.exports = {
  meta: {
    url: '',
    name: 'test-test',
    author: 'hiroppy',
    description: 'test',
    thumbnail: 'url',
    siteName: 'siteName',
    sns: ['twitter', 'hatena'],
    repositoryUrl: ''
  slide: {
    loop: true,
    sidebar: true,
    targetBlank: true,
    showIndex: false,
    isVertical: false,
    code: {
      languages: ['javascript'],
      plugins: ['line-numbers'],
      theme: 'default'
  extends: {
    js: 'index.js',
    css: 'style.css'

Slide Syntax

See the example slide:) Syntax Provided by Fusuma

Code Syntax Highlighting

Fusuma uses Prism.js.
You can specify languages, plugins, theme to .fusumrc. Please see babel-plugin-prismjs for detail.

    languages: # the default is ['javascript']
      - javascript
    plugins: # the default is []
      - line-numbers
    theme: default # the default is "default"

Playground of Prism.js

Presenter Mode

  1. open Sidebar(click the bottom right button(三))
  2. click the PC monitor icon
  3. if you use Chrome, you can choose select cast device
  4. if you use a browser that does not support Presentation API, a new window will be created


const { start, build, deploy, pdf } = require('fusuma');
You can’t perform that action at this time.