by hiroppy

hiroppy / fusuma

✍️Fusuma makes slides with Markdown easily.

3.8K Stars 169 Forks Last release: 10 months ago (v1.15.1) 559 Commits 82 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

📝 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 for executing, generating and deploying slides!

$ npm i fusuma -D # yarn add fusuma --dev
$ mkdir slides && echo '# Hello😄' > slides/title.md

--- Tree ---

$ tree -a . └── slides └── title.md

1 directory, 1 files

-------- init ---------

you can use init command

$ npx fusuma init $ tree -a

. ├── .fusumarc.yml ├── slides │ └── 0-title.md └── style.css

1 directory, 3 files

--- executable tasks---

$ npx fusuma init # customize fusuma configuration $ npx fusuma start # development $ npx fusuma build # build as NODE_ENV=production $ npx fusuma live # start live mode $ npx fusuma deploy # deploy to github pages $ npx fusuma pdf # export as PDF from HTML

--- help

$ npx fusuma --help $ npx fusuma live --help # see help for a specific command


npx fusuma start
is executed, fusuma will create a slide as follows and serve

And you can customize the slide using CSS and JS.

Guides/Configuring Fusuma#extending-js-and-css

Markdown and MDX

## Hello

This is the first slide.


This is the second slide.

Also, you can use React components!

import { Sample } from './scripts/Sample';


This is the second slide.

// Sample.js

import React from 'react';

export const Sample = () =>

Hello from jsx!!


Configuration File

This file is optional, but many customizations will be possible.
Supports for

and it can be generated by running
fusuma init


Fusuma has a configure file to customize slides and SEO, etc...

Guides/Configuring Fusuma

Slide Syntax

Fusuma has some slide syntax like creates a table of contents automatically, etc.

Guides/Slide Syntax

Presenter Mode



  • Show your slide note
  • Set a timer
  • Record your actions and voice, and do time-travel
  • Draw lines on the slide

Recording Your Actions

Video -> Recording Your Voice

Drawing Lines

When you write characters on the host side, it will be reflected on the client side in real time.

Live Mode


Fusuma can fetch tweets from Twitter. In addition, fusuma have an api endpoint.
If you specify a

authentication keys
, fetching from twitter will be enabled.
Since comments can be sent to fusuma itself, you can use in the private case.
Also, this mode can run with Presenter Mode.


This slide is very simple, so this is a measure of the maximum performance fusuma can deliver.

The values of

Best Practices
depend on the user because the user writes HTML(Markdown).
If you want to make
score 100%, you should fill in the



$ git clone [email protected]:hiroppy/fusuma.git
$ cd fusuma
$ npm i
$ npm run setup

Link local packages

$ npx lerna add @fusuma/xxx [email protected]/yyy

see https://github.com/lerna/lerna/tree/master/commands/add


const start = require('@fusuma/task-start');
const build = require('@fusuma/task-build');
const pdf = require('@fusuma/task-pdf');
const deploy = require('@fusuma/task-ghp');
const init = require('@fusuma/task-init');

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.