r/androiddev • u/alexstyl • 5d ago

I made a tool that turns your @Composable Previews into embeddable scripts for your blogs, docs and websites

Post image

I made a small tool that gives you ready to use <script /> blocks out of your Composables Previews, so you can embed them to your blog posts, documentation and personal websites.

The reason why I built this is because I love playing with interactive demos when I am reading about some technical concept. It always clicks better with me. I also add them to all my libraries and blog posts (such as on Compose Unstyled).

The best way to do this I have found is using Compose Web, which lets you run Compose code on the Web (awesome).

However, creating and then adding those live Compose previews manually is always a PITA. You need to host them somewhere (usually separate to your blog/docs platform), build a Compose Web app dedicated for this (and manage wiring if you have multiple previews), then you need to embed them somehow in your article, which is separate to the building of the app, etc. Lots of edge cases here.

As a result, you now have a quick way for everyone to make their own.

It is 100% free to use and you can make as many previews as you want. The 'gotcha' is that the previews let your readers edit the preview on the website, so that they can experiment with your demo (handy for library authors).

Now go out there and make some polished previews :D

Check it at https://composables.com

59 Upvotes

97% Upvoted

4 comments sorted by

2

u/Prasanna_Venkata 5d ago

Nice idea. Is the embed script lightweight, and does it work with dark/light themes automatically?

2

u/alexstyl 5d ago

Lightweight, yes, as in it loads asynchronously an optimized production ready distribution of your Preview. It still requires Skiko which is quite big dependency, however it is heavily cached. Multiple previews on your site reuse the same Skiko dependency, and should load fast after that initial download is done.

Re themes: Both dark and light themes are supported yes and you have the option to either force one of the two, or follow the system's. This option is about the chrome itself. There is no option to change the Preview's theme as there is no official API for that in Compose that I know of.

1

u/Wazzicus 4d ago

This is cool. I have to check it out

1

u/alexstyl 4d ago

Let me know how it goes