A new challenger approaches!
Joining the likes of the various other embedded code environments such as CodeSandbox, Codepen, and Glitch, there is a shiny new StackBlitz Liquid Tag! StackBlitz, the online IDE for web applications powered by Visual Studio Code, has become the go-to online editor solution for many developers, many of whom even use StackBlitz to power their documentation examples. (such as the Angular team)
To use the liquid tag, simply add your project ID to the liquid tag. This may be the auto-generated ID when you created the project, or whatever you renamed your project to. Like so:
{% stackblitz ball-demo %}
There you have it! Enjoy the awesomeness that StackBlitz can bring to your blog posts! 🎉
Top comments (3)
Great work John!
I'm noticing now that the element is a little cut off on mobile. Not sure if that's just because StackBlitz has a min-width on the whole element. If you or anyone else wants to give this some investigation, it's appreciated.
Overall these elements always are a bit more natural on desktop so it's not the end of the world if we don't get this just right at first. 🙂
You're absolutely right, it is! That's my bad for not checking mobile. 🤦♂️ I normally get that right the first time lol. I'll take a look later today and hopefully get in a fix for it. 🙂
My bad too. I reviewed it and was pretty quick and dirty with the visual part. This usually just works out of the box if the iframe fits. 🤷♂️