StackBlitz SDK: Instantly Add Live Environments to Your Docs, Blogs, & more
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 ✨
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.
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 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
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:
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. 🙏🍻