Introducing Fusuma 😎

What is Fusuma?


Fusuma is a helper which makes slides using Markdown easily.

  • makes cool slides by WebSlides
  • supports development, production and deploy tasks
    • you don't have to write webpack, Babel, Postcss settings, and etc...
  • supports OGP, SNS, Fullscreen, and Presenter Mode
  • supports Presentation API
  • exports as PDF

just write in Markdown and execute with CLI😍


$ npm i fusuma -D
$ mkdir slides && echo '# HelloπŸ˜„' > slides/ # πŸŽ‰πŸŽ‰πŸŽ‰

# --- executable tasks ---
$ npx fusuma init     # customize fusuma configuration
$ npx fusuma start    # serve as NODE_ENV=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

$ tree -a
└── slides

1 directory, 1 files




  fusuma <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
  live                Start live mode
  help <command>      Display help for a specific command

Configuration File

Fusuma supports yaml and js, and npx fusuma init creates the configuration file.

# .fusumarc.yml

    - twitter
  loop: true
  sidebar: true
  targetBlank: true
  showIndex: false
  isVertical: false
  math: false
  chart: false

Directory Structure

β”œβ”€β”€ .fusumarc.yml  <-- optional
β”œβ”€β”€ package.json
β”œβ”€β”€ slides         <-- Required
β”‚   β”œβ”€β”€
β”‚   β”œβ”€β”€
β”‚   β”œβ”€β”€ 02-ecma
β”‚   β”‚   β”œβ”€β”€
β”‚   β”‚   β”œβ”€β”€
β”‚   β”‚   └──
β”‚   └──
β”œβ”€β”€ index.js       <-- optional
└── style.css      <-- optional

slides/ is required.


// package.json

  "scripts": {
    "start": "fusuma start",
    "build": "fusuma build",
    "deploy": "npm run build && fusuma deploy",
    "pdf": "fusuma pdf"

Syntax Highlighting

Fusuma uses prismjs.

Please set languages to .fusumarc.yml or .fusumarc.js if you want to use these.

# .fusumarc.yml

      - javascript
      - line-numbers
    theme: twilight

Syntax Provided by Fusuma

Split Slides

## Hello

This is the first slide.


## ✌️

This is the second slide.

You can split slides within the same file by using --- syntax.

Add Classes

<!-- classes: title -->

## Hello
.title {
  color: #3498db;

Also, you can use HTML because MarkDown accepts HTML.

Declare Section Title

<!-- sectionTitle: this is the second slide! -->

## ✌️
/* output with this class name */
.section-title {
  color: #ff0;
  background: #ccc;

Makes explicit declarations to create an agenda.
In addition, it is also added to sidebar's list.

Generate Agenda

## Contents

<!-- contents -->

Converts the page number and title name specified by sectionTitle into a list of list(ul/li).

Add Speaker Note

<!-- note
This is a speaker note!!
This sentence can be seen when using Presenter Mode.


## Hello!!

This is a note displayed on the host side in Presenter Mode.

Capturing Screen Contents

## Capturing Screen Contents

<!-- screen -->

Your screen can capture on the slide, but this feature can run only in Presenter Mode.

You can choose your local screen or application window or browser tab as output.

This feature will help live coding etc. See Screen Capture API for detail.


The following image is a screenshot of the output slide.πŸ‘‡


JSX in Markdown

Hello from jsx!!

<!-- markdown (mdx) -->

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

<Sample />
// sample.js

import React from 'react';
import styled, { keyframes } from 'styled-components';

const rotate = keyframes`
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }

const Rotate = styled.h2`
  display: inline-block;
  animation: ${rotate} 3s linear infinite;

export const Sample = () => <Rotate>Hello from jsx!!</Rotate>;


Fusuma provides some components wrapping webSlides.


Flexible blocks with auto-fill and equal height.

  • Item 1 Multipurpose: services, features, specs...
  • Item 2 Multipurpose: services, features, specs...
  • Item 3 Multipurpose: services, features, specs...
  • Item 4 Multipurpose: services, features, specs...
import { Flex } from '@fusuma/client';

    <div>Item 1 Multipurpose: services, features, specs...</div>,
    <div>Item 2 Multipurpose: services, features, specs...</div>,
    <div>Item 3 Multipurpose: services, features, specs...</div>,
    <div>Item 4 Multipurpose: services, features, specs...</div>


<!-- classes: fullscreen -->

import { Card, Code } from '@fusuma/client';

  left={<img src="" />}
  • Yosemite National Park


  • import { Img } from '@fusuma/client';
    <Img src="">
      <h3>Yosemite National Park</h3>

Introducing WebSlides

Please see WebSlides's demo for details.

WebSlides provides some classes and tags.

Header and Footer

## Header and Footer

<header class="bg-blue">header!!</header>
<footer class="bg-green">footer!!</footer>

This slide is using header, footer and bg-* provided by WebSlides.


## Grids

<div class="grid">
  <div class="column">
    <h3>.column 1</h3>
  <div class="column">
    <h3>.column 2</h3>
  <div class="column">
    <h3>.column 3</h3>

.column 1

Incredibly versatile! Auto-fill and equal height. Flexbox is awesome.

.column 2

Incredibly versatile! Auto-fill and equal height. Flexbox is awesome. Just focus on your content. Have less. Do more.

.column 3

see the document


1/9 left top

.slide-top and .content-left

## Alignments

<div class="content-left">
  <h3>1/9 left top</h3>
  <p><code>.slide-top and .content-left</code></p>

See Simple CSS Alignments.


Just 5 basic animations: .fadeIn, .fadeInUp, .zoomIn, .slideInLeft, and .slideInRight.

WebSlides has many components not introduced this slides,
please refer to the document. πŸ™

πŸ‘‰ WebSlides Components

Presenter Mode

Recommend using this feature if you give a speech.

Fusuma is compatible with Presentation API,

but you can also use this mode if you use browsers which don't have Presentation API

because Fusuma can fallback to using localstorage.

Since iframes are used internally, recommend that you use this feature in your localhost.


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

Host Screen


Speaker Note

This page is written with the following Markdown.

<!-- note
This is a speaker note!!
This sentence can be seen when using Presenter Mode.

Slide Timeline

When you start the timer, the timeline will be recorded.


By recording audio, you can also do time travel.


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


The End

Enjoy πŸ˜„