I’m very impressed (put intended 😛) about how this tool allows you to build such dynamic presentations with relatively simple code.
I’m a fan of Open Source, and impress.js is a very nice open source tool with a lot of community developed tooling around it, and a lot of potential. Although it is “just” simple html, css and javascript, it delivers amazing results if you dedicate some time to it.
It’s a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.
It exists for years now, but somehow it didn’t go widespread. I think there might be some pretty obvious reasons for it, so if you’re interested in knowing more, follow me on this one: I’m going to show you the information, how to get started quickly and finally, a small experiment to help me create, update, and share these presentations at incredible speed.
🔨 How does it work?
The base demo and the source code
The impress.js repository has a fair amount of documentation and examples. It is intended for users experienced with HTML, but don’t be afraid to poke around the repository!
The documentation goes in much detail about how it works and it should be enough of a reference to do pretty advanced things!
The Classic Slides demo is targeted towards beginners, or can be used as a template for presentations that look like the traditional PowerPoint slide deck. If you’re unsure how wild you wanna go with presentations, this can be a very good starting point to get your feet wet!
One really cool detail about impress.js is that it features a plugin system. This can make it really extensible. I really love tooling that allows you to expand upon!
Some tooling always comes handy!
As I explored around to see what impress.js is capable of, I’ve stumbled upon some worthy mentions. These tools, depending on the types of workflows you have, can really help you take advantage of this wowing way to create presentations.
Hovercraft! is a tool to make impress.js presentations from reStructuredText. This allows you to replace a arguably more tedious process of html editing, and create content in a format that is both structured and readable. Check the demo for an explained of how it works. Looking good 👍
But I also get that reStructuredText is not for everyone. A much more widespread format is Markdown. It is used everywhere, and for a good reason.
Markpress is a neat way to generate impress.js presentations out of Markdown files, as a simple command line tool and node package to convert markdown files into self-contained impress.js html presentations. It also works so well that even README files look amazing when converted!
If you’re more of the Graphical Interface type of person, you also have a couple of options:
- Impressionist is a visual 3D editor for
impress.jspresentations. I did not try it but looking at the video demos, although a bit archaic looking, it boasts some pretty beefy capabilities with positioning and adding content. Unfortunately it requires installation and setup, which might discourage people to use it (as it did to me). - Gossip! on the other hand, is readily accessible as a web editor and requires no installation! It has simpler capabilities but a much better user interface, and allows you to create a full featured presentation with nice (but not impressive) content displaying options. It feels good to use and I might take it for a spin sometimes!
Theres also many other tools and demos available. The impress.js people did a nice job of gathering all known ones on their wiki.
The simplest of setups
But maybe we’re getting ahead of ourselves. For today, we’re more into exploratory mode and looking at spinning up a quick presentation to see how impress.js feels. Its just html, what can be that difficult about it?
You don’t actually need to download any build tools or any complicated dependencies. All you need is an html file and an internet connection! Here’s the most basic structure needed to build an impress.js presentation file:
Tap me to see the code! 🧪
<html lang="en">
<head>
<meta charset="utf-urlencoded" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />
<title>A basic Presentation</title>
<style>
body {
background-color: white;
font-family: Arial, sans-serif;
color: black;
margin: 0;
padding: 0;
}
.step {
width: 600px;
border-radius: 10px;
padding: 40px;
color: #333;
text-align: center;
opacity: 10%;
transition: opacity 1s;
}
.step img {
opacity: 0%;
transition: opacity 1s;
}
.active {
opacity: 100%;
transition: opacity 1s;
}
.active img {
opacity: 100%;
transition: opacity 1s;
}
h1 {
font-size: 2.5em;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
p {
font-size: 1.2em;
line-height: 1.4;
margin: 20px 0;
}
img {
width: 80%;
height: auto;
margin-top: 20px;
}
</style>
</head>
<body>
<div id="impress">
<div id="first-slide" class="step" data-x="0" data-y="0" data-z="0" data-scale="10">
<h1>A title</h1>
<p>This is a paragraph, but inside a step you can add any type of html!</p>
</div>
<div id="second-slide" class="step" data-x="800" data-y="-800" data-z="-2000" data-scale="2" data-rotate="45">
<h1>Another title</h1>
<p>A second slide, rotated 45 degrees!</p>
</div>
(...)
</div>
<script src="https://impress.github.io/impress.js/js/impress.js"></script>
<script>impress().init();</script>
</body>
</html>Place the code above in a file that has the .html extension, and open it in your internet browser of choice. Its that simple.
I still recommend you to check out the repository “Getting Started” guide, as it explains in much better detail how it all works, and how to achieve a setup that allows you to create fully offline viewable presentations, which you might want.
🖼️ Showing them on this blog
In my case, I’ve been considering using impress.js presentations as a way to add some cool content and show it on this blog in a super interesting way. But how can I make this work? 🤔
I started exploring with the demo presentation. I wasn’t sure if this would work, but no one’s ever fully sure until they try it.
Using the Custom HTML block and a couple of tweaking, it was easy enough to place an iframe that loads a presentation.
🎉 It works! (As you might already have noticed 😂). So at this point I’m pretty confident I can use impress.js on this blog! But for that, and because this is the Internet, I need some place to host them.
I’m starting very vanilla with this blog, and I want to avoid WordPress plugins or complicated integrations.
A typical solution could be to use a basic server or something like GitHub pages to achieve this. But besides both being a fair amount of work, where’s the fun in that? 😛
I decided to do something more intricate, using some of the tools I already have in my belt:
- I host the presentations as static
index.htmlfiles stored in folders on a Git repository I created for the purpose. Besides being a place I can use to keep them in sync between my devices, and backed up for safety, this plays well with my normal workflow and allows me to use my favorite code editor to update and create presentations, use my favorite browser to preview them, and
n8nWebhooks are a great way to quickly create workflows that can be called on-demand. I created an automation that receives atargetquery parameter, and uses it to fetch the correct file in the repository and send the content of that file as a response using the fetched html code and proper headers.
In the end, I host all of this, and this blog, on my edgebox. This gives me peace of mind in relation to the setup and its sturdiness. Gitea and n8n were installed and working with a click of the dashboard, I have everything backed up and secured without having to do a thing, and I didn’t need to write any code or do any “deploys” to make this happen.
When your tooling is free, so are you!
If you wanna see the end result, just scroll to the end of this post. But I recommend you stick around to know how I didn’t even need to write a single line of code (or use a GUI) to create the presentation you’ll see!
🤖 GPTeeing some code!
So now its the time we automate… let’s use some AI magic to generate some impress.js code for us!
What would take to go from 0 to some presentable content about a given topic in a easily organized code structure that you can iterate on?
As it turns out, not much!
To achieve a good result, we need to be very tactic with the prompt engineering part of it, but it is mostly what you would also do for other generative code tasks.
Break down the subject
We should prompt the LLM to break down a subject into digestible presentation main topics. This normally means creating a prompt template and tweaking it until you’re satisfied with what the LLM spits out. I’m not going to go into detail on this specific topic, but let me know if you would like me to write more about it!
Also, If you prefer doing the full editorial part yourself, simply write whatever you want to present using your normal creative workflows.
Honestly, I believe this is always the better option. You want LLM’s to aid you on the boring stuff, not take the best you got within you: Your creativity!
Build topic content
For each topic generated, we should ask it to build a couple of sentences about it and ask it to develop coherent “presentational” content. This normally gives you a really nice starting point to work out your personal touch into the presentation.
Build the html
After we collect the material for our slides, we can finally instruct the LLM to generate the impress.js presentation using a base template for guidance.
Why a base template? This will greatly help prompting, as this step will “constraint” the LLM to generate the content based on the template guidance. This avoids hallucinations and adds a way for you to tweak how the LLM generates presentations.
This template should contain everything you need to run a presentation, as the LLM will base upon it. So one crucial detail is to include a css style tag, allowing the LLM to be aware of that and generate them too. Fortunately, we already did our experiments above, and we know this is possible 😉
Start with something simple (like my example above) and work it from there until you get your expected results. Add nice examples of how to use features of impress.js in the template markup, and the LLM will sometimes use them!
But if you like a specific feature, its simple to also include that in the prompt. You can even be very specific about where you want something to be used, and from my quick experiments with both GPT3.5 and GPT4, this fares very well.
Unless you want linear “left-to-right” presentations, fill your prompt with requests to use stuff like positioning, panning and rotation properties of impress.js “steps” to generate a dynamic slideshow with scattered elements. This will make it more impressive!
🤑 Profit?
Here’s where this got me with the subject “City of Berlin”. Click on top, and use the arrow keys (or swipe on mobile) to navigate:
✈️ Next steps
Now that I know this works, it can be taken to the next level. In the past, I created a telegram bot to interface with the OpenAI API and be a chatbot that I can use multi-platform.
Can I expand on it to have a command that allows me to leverage it to fully automate creating and storing public presentations on a given subject, and be able to iterate on them with my code editor?
I think I do… 😏 So stick around to know how it will go!
With this, I believe I would have a perfect setup to consistently add some “spice” to my publishing! What do you think of this little experiment?
👇 Drop me a comment below, happy to read suggestions!
Leave a Reply