- Zero Config
- Providing various modes
- Markdown and MDX
- Themes
- Code syntax Highlight, MathJax, Diagrams, and Flowcharts
- Full supporting for SEO and OGP
- Checking a11y automatically
- Customizable JavaScript and CSS
- A sidebar having agenda and some features
- Development Mode
- Running with HMR
- Just coding Markdown and sometimes CSS
- Build Mode
- Rendering to html and optimizing js,css,md
- Generating an image of slides as
og:image
and checking a11y automatically
- Presentation Mode
- Speaker Note
- Timer
- Recording your page actions and voice
- Using a Fluorescent Marker on the slides
- Deploy Mode
- Deploying to GitHub Pages
- PDF Mode
- Exporting slides as PDF
- Live Mode
- Available to make a speech while streaming a comment on Twitter
$ npm i fusuma -D
$ npx fusuma init
$ tree -a
.
├── .fusumarc.yml
├── slides
│ └── 0-title.md
└── style.css
# --- executable tasks---
$ npx fusuma init # create scaffold
$ npx fusuma start # run server for development
$ npx fusuma start-prod # run server for bundle directory
$ npx fusuma build # build slides for production
$ npx fusuma deploy # deploy to github pages
$ npx fusuma pdf # export as PDF
$ npx fusuma live # start live mode
When npx fusuma start
is executed, fusuma will create slides like follows on http://localhost:8080
. In addition, Fusuma adds a sidebar and when you set section titles, fusuma shows them on the sidebar.
slides generated by init |
sidebar |
---|---|
👉 the demo
Fusuma offers the following themes also users can customize them because this is just CSS.
default | pop |
---|---|
webpack | babel | node |
---|---|---|
👉 the demo
## Hello
This is the first slide.
---
## 🤭
import { Sample } from './scripts/Sample';
This is the second slide.
<Sample />
// Sample.js
export const Sample = () => <p>Hello from jsx!!</p>;
👉 Getting Started/Creating Your Slide
The following properties are provided, but you can change the css directly if you want.
:root {
--base-font-family: 'Roboto', 'San Francisco', helvetica, arial, sans-serif;
--base-font-size: 2.4rem;
--base-font-weight: 300;
--base-align: center;
--base-max-width: 1280px;
--base-outer-margin: 24px;
--base-image-height: auto;
--base-image-width: 100%;
--base-image-border: none;
--base-image-border-radius: 0;
--color-title: #464646;
--color-base: #545454;
--color-background: #f5f5f5;
--color-link: #3498db;
--h1-font-size: 5.6rem;
--h1-font-weight: 300;
--h2-font-size: 4rem;
--h2-font-weight: 300;
--h3-font-size: 3.6rem;
--h3-font-weight: 300;
--h4-font-size: 3rem;
--h4-font-weight: 300;
--h5-font-size: 2.4rem;
--h5-font-weight: 600;
--h6-font-size: 2rem;
--h6-font-weight: 600;
--code-font-size: 1.8rem;
--qr-code-image-size: 320px;
}
This feature uses experimental APIs so please use Chrome or Firefox.
- Presentation API (Chrome, Firefox)
- Screen Capture API (Chrome, Firefox)
You can see your Note for each slide and the next slide on the Host screen.
- Showing your slide notes
- Setting a timer
- Recording your actions and voice, and do time-travel
- video: Recording Your Voice
- (experimental) Drawing lines on the slide during making a speech
recording Your Actions | drawing Lines |
---|---|
Fusuma can fetch tweets from Twitter. In addition, fusuma have an api endpoint.
If you specify a keyword
and 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.
I respect your UI and I really love it. I usually talk about you in Japan so I added your colors to Fusuma. If you have issues, feel free to mention me! Thank you.
- Node.js
- webpack
- Babel