StackBlitz May 2022 Update

May has brought us a lot of opportunities to make our community happy: from hosting sessions at Write the Docs conference to finding plenty of StackBlitz specimens in the wild, we feel pampered basking in the warmth of our community!

Today we are bringing you:

• StackBlitz in the wild: news from our community
• DX & Compatibility improvements: the change log
• Dispatch from Write the Docs conference

Meanwhile, we are getting ready for a big announcement 👀

StackBlitz in the wild

• What a joy to see StackBlitz used in this Astro video!
• Anthony Gore wrote a really good walkthrough on building beautiful tutorials in your API docs featuring StackBlitz — an inspiring read!
• Speaking of improving docs quality, Ionic is releasing a Component Playground! You will now be able to preview and play with a component, choose a language or framework (JavaScript, TypeScript, or Angular among others), and then explore it in StackBlitz. Totally worth a peek even if you haven’t used Ionic yet 👀
• Here’s a treat for the WebAssembly aficionados: Nat Moore’s talk about WebAssembly in the JavaScript Ecosystem with a little shout-out to StackBlitz!
• We were so delighted to see that the Amazon Style Dictionary maintainers use StackBlitz projects to answer questions on their GitHub issues — why only describe a solution if you can provide an example to go with it? We love it!
• While casually checking the NestJS page, we noticed StackBlitz as a default playground there! How lovely!

DX & compatibility improvements

As we’re working on new tools, we are finishing the month with a whole plethora of improvements:

• New starter projects:
  • Added SolidJS to starter projects! Solid is an up-and-coming frontend framework with state-of-the-art speed and DX.
• WebContainers project configuration:
  • Added support for a new compileTrigger option in .stackblitzrc, which can be used to control when changes made in the editor gets synced to the WebContainers filesystem. (Read more on configuring projects for WebContainers.)
• Bug fixes and improvements:
  • Fixed a bug that would reset the WebContainers runtime when hiding the Terminal.
  • On small screens (e.g. tablets and phones), we added a menu to the main editor toolbar to let users navigate to the dashboard, go to their profile or log out. Previously this menu was only visible on larger screens.
  • Fixed EngineBlock issues with SASS import resolution when the imported package uses module style exports to expose the sass entry points.
  • Fixed an issue with the file renaming text input where it wasn’t possible to select parts of the file name using the mouse or trackpad.
  • Updated the sidebar’s open ports count to be more visually pleasing and less distracting.
  • Fixed an issue where text/plain HTTP responses rendered in a project’s preview window would appear with white text on top of a white background in Chrome, when the operating system theme is set to “Dark mode”. That was a nasty one – and inspired a dedicated write-up by our amazing engineer, Florens Verschelde
  • Added syntax highlighting for JavaScript files with the .cjs extension.
  • WebContainers Terminal: fixed opening files from outside the project directory when using the code and open commands.
  • When editing or exploring a project in the editor, we now update the URL parameters to reflect all currently open files. As a result:
    • when you share a project URL, people following this link will see the same files that you had open;
    • when reloading the page, we reopen the same files that you had open.
• Browser compatibility improvements:
  • Fixed a bug that was crashing the StackBlitz editor when embedded in an iframe in browsers that restrict access to localStorage and IndexedDB in cross-origin iframes (Brave by default, Chrome with some settings).
  • Fixed a bug that was crashing the StackBlitz editor in Firefox in private windows.

Write the Docs Conference

We truly had a blast at the Write the Docs Conference where we got to talk to documentarians, DocOps folks, and doc engineers about their hopes and dreams for better workflows, and their pet peeves. It really is a lovely community so if you are interested in docs, consider joining their slack or submitting a talk proposal for the September edition!

The top three topics we discussed were:

• hosting an interactive example on Github, running it on StackBlitz
• creating an interactive environment programmatically with our JavaScript SDK
• bug reproduction workflows using StackBlitz

A big thank you to everyone who visited our booth or joined our sessions!

What’s next?

We are so excited for what the nearest future will bring — we are cooking something really special for you! In the meantime, stay tuned on Twitter or join our Discord community.