Eric Simons
Mar 1, 2018 · 4 min read

After two months of testing & iteration, I’m excited to finally announce the public release of our new API & Javascript SDK! 🎉

With the StackBlitz API & SDK, you can now:

  • Create & embed live environments, on-demand, from any data source—in just a few lines of code 💪
  • Open & embed environments directly from Github 🔄
  • Take full control of the StackBlitz VM 🛠
  • Keep your bundle size small—the entire SDK is <2kb gzipped
Google’s Angular docs now use the StackBlitz API for running all code examples ⚡️

The API & SDK are already being using in production by Google’s Angular.io docs, Angular Material, top-tier training companies like Oasis Digital, and soon by other great projects like Material UI, RxJS, Kendo UI & more.

Why?

Tinkering with code demos is the best way to learn new libraries, but it’s a total hairball having to get everything set up locally—especially for beginners.

This is not an easy problem to solve as a library maintainer. One option is to roll your own playground like TypeScript’s or Babel’s, but these take a surprising amount of time to create/maintain and typically aren’t robust enough for live editing JavaScript libraries. The other option is using a 3rd party playground/fiddle/pen for hosting live examples, but your demo code then has to be kept in sync by hand (yuck) and can’t use standard features like importing other files & npm modules.

This problem is actually the core reason why we created StackBlitz: we needed something that would allow learners to live edit the massive codebases in our RealWorld project (“the mother of all demo apps”) as well as our examples on Thinkster.io.

How it works 🛠

It’s super simple! First, install from npm:

npm install --save @stackblitz/sdk

Or add a script tag to the UMD build on jsDelivr/Unpkg — the SDK will be available on window as StackBlitzSDK:

<script src="https://unpkg.com/@stackblitz/sdk/bundles/sdk.umd.js"></script>

And that’s it! You can now make use of all the functionality in the SDK, like:

  • Generating & embedding new projects on-demand (docs / live demo)
  • Opening & embedding projects from Github Repos (docs / live demo)
  • Opening & embedding existing StackBlitz Projects (docs)
  • And, the most mind blowing feature of all..

Controlling the StackBlitz VM ⚙

With programmatic access to the VM’s file system, package manager, editor & more, the SDK allows you to build incredible applications that normally would be prohibitively complex to implement in local environments.

An amazing example of this is PageDraw.io, a design tool that just launched from Y Combinator. Using the StackBlitz SDK, the PageDraw team was able to create a design environment that lets you drag, drop, & customize components while live editing the running code… entirely within your browser:

Pretty neat, right? You can try it out over at PageDraw.io

And this is just scratching the surface of the sorts of apps you can build on top of the SDK. You can learn more about all the VM controls in our docs. 🔧

Go forth & code the future 🌎

We’ve created a brand new docs page over at stackblitz.com/docs and we can’t wait to see the amazing stuff you build with our new SDK & API. Our SDK is also fully open source (along with many other things we’re building), so be sure to check out/star our Github repo.

We’d like to give a huge thanks to Dan Wahlin + the Angular, RxJS, & Kendo UI teams for being first adopters of our API’s & providing us with their super valuable feedback. You all are seriously awesome. ❤️

None of this work would’ve been possible without the financial support of our awesome platinum sponsors, Auth0 & Kendo UI, and all our Patreon supporters. Thank you so, so much for backing our mission. If you like the work we do on StackBlitz, please consider becoming a Patron. 🙏🍻

As always, feel free to reach out on our Discord channel or tweet @StackBlitz if you have any questions, feedback, or just to show us what you’ve built!

Rock on 🤘

StackBlitz Blog

News and Engineering from the StackBlitz Team

Eric Simons

Written by

Software engineer & builder of @StackBlitz, @GoThinkster (acq) & https://realworld.io 🤘 Code the future!

StackBlitz Blog

News and Engineering from the StackBlitz Team

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade