StackBlitz February 2022 Update

Hello hello! Long time no see! Can you believe it’s been half a year since our last monthly update? We were very focused on preparing some really special treats for you all - and, truly, we can’t wait to unveil them in the very near future.

Before we restart our monthly tradition, let’s recap what happened in our corner of the Internet over the past months. We’ve got for you DX improvements, updates on new templates, our new team members, StackBlitz and Vite collaboration, examples of StackBlitz spotted in the wild, tech blog posts documenting the adventures of our engineers, and a bunch of podcasts and stream appearances of our team members.

DX & compatibility

As you can imagine, a lot happened over the past months but most notable improvements include:

• StackBlitz API improvements:
  • new supported templates in SDK: Vue, Node, and Static HTML/JS/CSS
  • new option: theme?: 'light' | 'dark’
  • devtoolsheight option accepts the values 0 and 100
  • hideNavigation=1 option hides the UrlBar in embeds
  • zenMode=1 hides zen mode button in embeds
  • file= query param now supports multiple files (for instance: file=index.html,Hello.js for tabbed view and file=index.html&file=Hello.js for split view)
• Github Importer:
  • the original title is carried over to the fork
  • the terminal= query param remains untouched
  • introduced title= query param for custom project titles
• RBAC (role-based access control):
  • forking private project is possible only by its owner
  • introduction of secret projects, which are unlisted and accessible only by the URL
• UI changes:
  • Introduced project metadata editor for title, description, project URL, and visibility
  • Removed slug and visibility sidebar settings
  • “Pending” state of the “save” button
  • New file icons: SQL and SQLite
  • Use system fonts for all editor UI themes
  • No more port pop-up messages whenever WebContainer opens a new port! The port list is still visible in the sidebar.
  • Improved sidebar display when resizing window
  • Embed view cleanup 🧹
• Files matching .gitignore rules are not persisted
• Application URL is hidden when sharing WebContainer projects as it’s is accessible only locally

A special mention here goes to one of your Community Advocates, Gerome Grignon, who has submitted a PR for a feature to autoclose empty issues - thank you! ✨

New Templates, new adventures!

We have introduced the following new WebContainers templates:

• node.new/sveltekit
• remix.new
• hydrogen.new as a collaboration with Shopify
• A whole happy family of Vite.js templates:
  • vite.new/lit-element
  • vite.new/lit-element-ts
  • vite.new/preact
  • vite.new/preact-ts
  • vite.new/react
  • vite.new/react-ts
  • vite.new/svelte
  • vite.new/svelte-ts
  • vite.new/vanilla
  • vite.new/vanilla-ts
  • vite.new/vue
  • vite.new/vue-ts
• vitest.new

StackBlitz + Vite = a match made in heaven 💕

Speaking of Vite.js, the introduction of the templates was just the beginning of a wonderful journey. In November we became the biggest backer of Vite core development. As the collaboration tightened, we welcomed to our team Patak, a Vite core maintainer, whose main responsibility is to further improve Vite.

What’s next in this saga? Stay tuned!

Our team grew!

Apart from Patak, we have been lucky to welcome other new team members:

• Jake Kuzma (DevSecOps Engineer)
• Gabriel Daltoso (UI/UX Developer)
• Puru ViJay (Intern Front-End Developer)
• and yours truly (DevRel Advocate)

Technical blog posts…

Our engineers have authored two blog posts on the obstacle race that is the web dev. Have a read:

• Roberto Vidal’s post on solving memory bugs through V8 and WebAssembly, which occurred when we started shipping multiple WebAssembly payloads.
• Sam Verschueren’s post on how adding the cross-browser support for WebContainers is not as easy as many would think in which he explains the principles of cross-origin isolation,

…and other appearances

If you want to get to know our team or StackBlitz better, here are some of the podcast and livestream appearances our team gave:

• Are you curious how StackBlitz was built, what the secret sauce behind the WebContainers is, or how we handled the C++ issues? Our CEO Eric Simons talked about all of this, and more, on Web Rush (Oct 28, 2021)
• The secret sauce question also appeared after the demo that Mark Whitfeld, our Software Engineer and an NGXS core team lead, gave at State of Angular (Dec 6, 2021)
• Listen to Tomek Sulkowski, our DevRel Advocate, chat with Wes Bos and Scott Tolinski about WebContainers on the Syntax.fm podcast (Nov 11, 2021)
• Watch and listen to Patak and Anthony Fu talk about how to revamp your testing game with Vitest on JS Party (Feb 25, 2022)

Spotted: StackBlitz in the wild

We are always delighted to see examples of StackBlitz in the wild. Some of our community achievements from this month:

• Aaron Saunders published a new tutorial in the Intro to Remix series with a running project on StackBlitz
• A shoutout to Scott Gallant who’s using StackBlitz while volunteering to teach kids web development 💕
• Here’s a video tutorial on Easy Svelte Kit Page Loader by Scott Tolinski with the code to follow on StackBlitz
• Congrats to kartastrophe who’s enhanced the storybook documentation for their design system by adding StackBlitz code live examples!

What’s next?

We are excited to restart this monthly tradition of StackBlitz updates and we can’t wait to share some of the spicy news next month.

In the meantime, stay tuned on Twitter or join our Discord community ✨