Embedding Compose Multiplatform code into Medium articles

Photo by Jeremy Thomas on Unsplash

I’m excited about the topic of this new article because it opens the door to new experiences for readers and writers in Medium. While preparing material for an upcoming article, I thought about how to provide rich media to support the explanation. After some reflection, I realised that the answer was right in front of me! Why not use code, specifically Compose Multiplatform, for that?

Embark with me on this “aha” moment I had! 🧳

Compose Multiplatform embeded in Medium

Before we start 🔍

When reading a technical article, supporting media plays a crucial role in making the explanation more digestible and tangible. I wanted to incorporate this idea into an article about AGSL shaders that I’m currently writing. Shaders, in general, can be a complex topic, and I believe it will be easier to understand if something more engaging is included for readers.

After considering various options (YouTube videos, GIFs, etc.) and evaluating their pros and cons, I had an “aha” moment! Why not use Compose Multiplatform for this? Compose is something I’m familiar with and can easily leverage to provide a visual and interactive experience for readers. Additionally, you can compile Compose code for the Web! What more do we need?

Medium embedding facilities 📦

The Medium editor allows writers to embed almost any content from various services like YouTube, GitHub Gists, and many more. This functionality is provided by Embed.ly. Simply paste the URL of the content into the Medium editor, and if the content is supported, an embedded iframe will appear. That’s it! 💥

Which services are good candidates for sharing HTML content? There are several (check the list here), but I found one that works smoothly: JSFiddle.

The plan 🗺️

Here’s the plan:

• Build a Compose Multiplatform project targeting Kotlin/JS.
• Host this project in a GitHub repo.
• Deploy it to GitHub Pages using GitHub Actions.
• Use JSFiddle to create a minimal HTML page embedding the GitHub Pages URL.
• Paste the URL from JSFiddle into the Medium article.

Create a new Compose Multiplatform Project

This is an easy step. Just go to the Compose Multiplatform Wizard and fill in the details:

• Project name
• Project ID
• Choose target platforms

Be careful with the last step, as you should choose Browser (JS). WASM isn’t working properly for Safari, and web-apps won’t run at all. Additionally, you can choose any companion library you want from the list.

Push Code to new GitHub Repo

Once you’ve created the project, open it in Android Studio (ensure you have the Compose Multiplatform plugin installed). Make sure it compiles for Kotlin/JS by running the jsBrowserRun Gradle task. Once ready, create the GitHub project and push the whole project to it.

Deploy to Github Pages

I’ve explained how to do this in a previous article. In short, we use GitHub Actions to build the project distributables and push them to a branch named gh-pages in the same GitHub repo. At the end, you’ll have a URL pointing to the GitHub Page where the project is hosted.

Embed Github Pages into JSFiddle

Now, create a new fiddle in JSFiddle. You’ll see a something like this:

JSFiddle interface

In the HTML pane, we just need to use the <iframe> tag and reference the GitHub Pages URL from the previous step:

We also need to tweak the CSS to ensure the iframe occupies the whole page without extra artifacts (like borders or scrollbars). Use the following code snippet in the CSS pane:

Save and run it to see your project working properly on JSFiddle. My advice is to create an account to ensure your work persists.

The last step is to get the proper URL for embedding it into Medium. Click the Embed button on the top menu bar. The following interface will appear:

Embed interface from JSFiddle

As you can see, JSFiddle provides many options for customizing the embedded content. For our use case, toggle off all tabs except Result. Also, to embed it as an iframe in Medium, click the Prefer iframe? text in the Embed snippet section. This will give us the final URL to use.

Embed snippet from JSFiddle

Be sure to copy only the value from the src attribute in the iframe HTML tag. Before pasting it into Medium, append https: at the beginning.

Use JSFiddle URL in Medium

Once you have the correct URL, copy and paste it into the Medium editor to see how it brings your Compose Multiplatform project to life!

Enriching the experience 🎉

Using this approach, I embedded the sample at the top where you can see the text “Hello from KMP!!” dancing on the screen. But does this mean we have to create a new project every time we want to embed something in Medium? Short answer: no way! 😛

Since the project is web-based, we can fully leverage it. For instance, in this article, I used a query string to customise which content is shown. Let’s take a closer look.

Query strings are commonly used on the Web to pass textual information to the underlying JS code. We can define a parameter named sample and evaluate it at runtime to select which composable to show. Here’s how:

As seen in line 5, we access the query string through the window JS object. Then, we create a new instance of URLSearchParams to reference all the params from the query string. Later, in line 6, we get the value of the sample param and decide which composable to invoke. This showcases the versatility of Kotlin Multiplatform!

Last step is to create a new JSFiddle where we can put the query string we’ve defined here:

This is the final result!

Edit 22/06/2024: detected issues

After publishing this article, some folks pinged me with different issues that prevented them from seeing KMP content on their browsers. Some experienced problems with Content Security Policy issues, preventing the JSFiddle container from appearing. Others could see the container, but the KMP content failed to load with errors related to GL context (more details in this thread). Nevertheless, I’m going to actively use the technique described in this article, as I feel it’s really powerful and gives me the expressive freedom I was looking for.

Conclusion

Even though this technique has some limitations, I find it useful, which is why I’m sharing it. It can be used to explain how coroutines and structured concurrency work in Kotlin, showcase animation APIs, illustrate concepts, and more. There are no limits to what you can do!

All the source code shown in this article is available in this GitHub repo: https://github.com/manuel-martos/MediumCompose

Thanks for reading to the end!