DEV Community

Cover image for πŸ“½ Presentador: Build a presentation by writing Markdown
Kostas Bariotis
Kostas Bariotis

Posted on

8 1

πŸ“½ Presentador: Build a presentation by writing Markdown

More often than not, when I'm creating a presentation, I find myself being distracted on each slide by the looks of it and start editing and altering the fonts and colors and sizes.

All I want is to write a presentation and make my points. That's why I built Presentador.

πŸ“½ With Presentador, you write your presentation in Markdown files and it will produce a beautiful website. No code or configuration required.

It's easy! Let me show you how:

Write your presentation

Create a folder and start writing your presentation in Markdown files. Create one file for each slide and name them after the order you want them to take, e.g. 1.md, 2.md, etc.

Use regular Markdown. Presentador will parse each slide and assign a predefined layout to each of them based on the elements in them.

If you find a combination of elements that could be presented differently, please open an issue. πŸ‘

Build your presentation

Run:

> npx presentador build -d FOLDER_NAME

and Presentador will produce a website ready to be hosted anywhere you want.

While developing your presentation, run npx presentador serve -d FOLDER_NAME for instant changes while you're editing it.

That's it!

Head over to https://www.presentador.dev to see it in action. πŸ™‚

Let me know what you think, I really need your feedback to make Presentador better.

Also, Presentador is open source. Let's build it together. 🀝

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

Top comments (9)

Collapse
 
abdurrkhalid333 profile image
Abdur Rehman Khalid β€’

This tool looks pretty cool I will surely give it a try whenever I find an opportunity to give any presentation. Thank you for writing such a small and accurate article.

Collapse
 
jeansmaug profile image
jean-smaug β€’

Really like these kind of tools.

How would you compare Presentador with tools such as Marp or mdx-deck ?

Collapse
 
kbariotis profile image
Kostas Bariotis β€’

Thank you @jean-smaug! I want Presentador to be as simple as possible. No config, no libraries, no code.

Thanks for sharing those two libraries, they both look amazing. :)

Collapse
 
thejavascriptninja profile image
The Javascript Ninja β€’

Really cool tool! I love it! I've already made presentations with it and they've turned out smashingly. One cool thing you could add is if you could embed presentations on other pages.

Collapse
 
kbariotis profile image
Kostas Bariotis β€’

WOW AMAZING idea! :) Thanks

Collapse
 
aahnik profile image
Aahnik Daw β€’

Wow! Can you please write a GitHub action that will deploy to GitHub pages ?

In this way, users don't need to have npm or download anything.

Collapse
 
kbariotis profile image
Kostas Bariotis β€’

That's a great idea! Will make a note of it :)

Collapse
 
daniguardiola profile image
Dani Guardiola_ β€’

Nice! The playground seems down though presentador.dev/presentador/playgr...

Collapse
 
kbariotis profile image
Kostas Bariotis β€’

Thanks! That's a typo in the link :) presentador.dev/playground.html

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay