Markdown-to-Slides Tool with a Clever Metadata Trick

labmember77 Advanced 17h ago 27 views 2 likes 2 min read

Converting Markdown into slide decks usually feels like a chore, but this tool called Fusuma actually leans into the logic of a sliding door. The name comes from the Japanese fusuma, and the workflow is basically writing a single flat Markdown file where a --- separator acts as the trigger to switch slides. It’s a weirdly efficient way to handle presentations because you aren't fighting a GUI or dragging text boxes around like you're stuck in 2005.

I decided to test the limits of this by actually scaffolding a real project. I wasn't just playing around; I wrote a full deck explaining the tool itself using the tool. The setup is straightforward enough:

npm install fusuma -D
npx fusuma init

This spits out a folder structure with a config file and a CSS file. The clever part—and I really appreciate this from a data structure perspective—is how it handles metadata. If you want to style a specific slide or set a sidebar title, you use HTML comments. This keeps the raw file valid Markdown so GitHub doesn't choke on it, but the parser reads those comments as directives.

# Hello😃


Bye👋

The dev loop is actually decent. Running npx fusuma start kicks up a local server on port 8080 with hot reloading. I was testing the pop theme to see if it looked like a cheap template or something substantial, and it actually holds up for a CLI-driven tool. The whole thing is bundled with webpack 5 and uses Prism for code highlighting, which is a lot more robust than I expected for a niche utility.

The real value is the output flexibility. Once you've finished your Markdown, you aren't stuck with just a web view. You can run:

npx fusuma build # optimized static HTML/JS bundle
npx fusuma pdf # the deck as a single PDF
npx fusuma deploy # pushes build/ straight to GitHub Pages

It's basically one source of truth for a presentation, a PDF, and a hosted site. However, I hit a weird snag during my post-mortem of the build process. I was running a build in a directory that didn't have a git remote configured, and the CLI output threw me for a loop.

I ran npx fusuma build and got this:

- Fetching the remote origin url...
build The remote origin url of this repo isn't f

It felt like the build pipeline was trying to be a bit too smart by inspecting my git configuration before deciding how to handle the deployment phase. It's a bit of a "wait, why is it looking at my git remote just to build a static site?" moment, but it shows the tool is trying to automate the deployment workflow directly. For anyone looking to save time on slide deck formatting without losing the ability to version control their content, this is a solid, high-value approach.

beginnersHelp Neededproductivitywebdevmarkdown

All Replies (3)

F
frozenweights32 Advanced 17h ago
Does it handle custom CSS for metadata or just stick to standard Pandoc-style templates?
0 Reply
L
lossgodown Novice 17h ago
Works with Reveal.js, but I usually have to inject my own custom JS to fix the layout breaks.
0 Reply
V
vectorstore Advanced 17h ago
I've used similar scripts for quick demos; just watch for memory leaks on massive files.
0 Reply

Write a Reply

Markdown supported