Introducing Compose-ur-Pres

A tool that allows you to write a presentation slide deck in Kotlin with Compose.

I’ve always been frustrated with regular presentation tools, such as Keynote, Powerpoint, or Google Slides. While I do not want to deny their quality, I simply do not believe these tools can implement everything that I have in mind. After all, as an application programmer, creating screens and animations is what I do. I have many ideas of how I want to present and animate my content, and I do not want to be constrained by a WYSIWYG editor. Since I program my screens, why not program my slides?

When I first encountered Reveal.js, I thought “OK, that’s what I want, but I want it in Kotlin”. At that time, Compose multiplatform did not exist, so I wrote my first version with Kotlin-React. Then came Compose multiplatform and more specifically what was then known as Compose Web and is now named Compose HTML. So, of course, I rewrote the entire tool using that. I used it for several presentations (including my presentation at KotlinConf 23).

At the same time Compose Desktop became stable and the new Compose Web with Wasm was introduced, my frustration with CSS (especially CSS animations) grew stronger. I wanted to position my content pixel by pixel, and frame by frame, just like Compose allowed me to. So I rewrote this presentation tool a third time, but this time for Compose desktop, and named it “Compose-ur-Pres”, or “CuP” for short.

A few weeks ago at Android Makers 24, I was thrilled to open source that tool. You can read its documentation, start creating your slides with a template project, and of course access its sources.

The pitch of Compose-ur-Pres is very simple: write and animate your slides just like you would your application screens. Focus on your slide content, and CuP will take care of:

• Creating & managing the application window.
• Displaying your slides in order and animate transitions between them.
• Showing an overview of all your slides & their steps.
• Providing a speaker window with dedicated tools (speaker notes, laser draw, screen highlights, etc.).
• Exporting your presentation as a web page (in alpha !).

Here’s an example of a simple slide:

As a CuP Slide is “just” a Composable function, we encourage you to apply the same trick you would in compose, and especially to abstract your boilerplate into your own composables…

…which will allow you to write very semantic slides:

Creating a CuP presentation is made very easy by the template project and the dedicated Gradle plugin. Simply follow the Quick Start Guide, and you’ll be writing your slides within minutes.

As we are programmers, our presentations often revolve around code, so it was important for us to provide a way to display, highlight, and animate source code.

Here’s an example of a simple animation that transforms an assignment into a lazy calculation:

Before I leave you hopefully exploring this new fun tool, I want to emphasize that it is currently in Beta, which means to us:

• We are happy with most of the public API, but some may change. We will try to provide a transition but make no promises. Some API may break between beta versions.
• We haven’t yet optimized the composition of the presentation and the slides. We think we can gain some performances and fix some small glitches.

In the meantime, feel free to experiment with Compose-ur-Pres and tell us what you think! You can reach us in the #cup-presentations channel of the Kotlinlang Slack.

This article is brought to you by Kodein Koders, a European service & training provider focused on Kotlin & Kotlin/Multiplatform. You can visit our blog, or our Youtube channel for more content.