In web development we are used to using online editors to share small code snippets as examples, whether that’s with peers or in StackOverflow, such as CodePen or JSFiddle. In August 2017 a new web editor based on Visual Studio Code was developed, an editor that goes beyond anything that’s ever been developed before, and allows us to create web applications using the two most widely used frameworks for the development of Single Page Applications (SPA); React and Angular.

StackBlitz has fast become a very popular tool among the large community of developers that work with both frameworks, not only for the ease of creating a new application but also for the surprising fluidity and the ability to share hosted projects on their servers with customizable URLs. In fact, Angulars official documentation now uses StackBlitz to demonstrate examples. In its introduction tutorial “Tour of Heroes” you can find a link to the live example using the most recent version of the framework, where you can directly edit the code and perform tests.

In just under a year, StackBlitz has help develop over a million projects thanks to features such as:

• As mentioned previously, it is a web editor based on Visual Studio Code, but with the browser in full screen mode by pressing F11 it’s difficult to distinguish and it inherits some features like IntelliSense, sidebar with browser view and search, code folding, go to definition and more. Combined with its high fluidity and the ease at which we can use our existing code either by loading our files by drag-and-drop or from GitHub, its a great editor, readily available on any platform where you have access to a web browser.

External libraries can be added almost immediately, for this they have developed a new NPM client called Turbo that runs in the browser and unlike NPM or Yarn only downloads the files needed by the application instead of downloading the complete library with all its dependencies in node_modules. The speed difference is exponential, which tells us NPM clients will be using tree-shaking and lazy-loading techniques in the future, instead it is not as robust as the clients previously mentioned and on occasion we may be met with problems when adding dependencies. However, the speed difference compensates enough, offering a tool that allows the fast creation/edition of web applications.

• You can directly load applications created with Angular CLI or create-react-app from a GitHub repository, simply by indicating a URL with the following format:{GITHUB_USERNAME}/{REPO_NAME} and any change that is made in the repository is reflected in the StackBlitz project, in such a way that we can use GitHub as we always do to host our repositories and run the application from any device without having to download the project, and obtain the dependencies with NPM/Yarn, etc.

For example, a demo of @angular/material is loaded from GitHub, and if we want to load the web without the editor, we only have to use the URL of the embedded browser, which can also be customized.

As well as being able to host our applications without a bandwidth limit, Stackblitz also offers a very simple way to deploy them in Firebase Hosting as a subdomain of

Wondering how Stackblitz can help you?

• Quick creation of examples/prototypes to show a functionality or error and share it with teammates or in StackOverflow, in which case another developer has instant access to it and can edit it and make any necessary corrections and re-share the updated URL.

• Can be used as a practice tool with the latest versions of Angular or React, you even have an option in the dependencies to obtain the latest version of all the project libraries. It also has templates for Ionic, TypeScript or JavaScript (ECMAScript 6) and the intention is to add the Vue.js option in the future which unfortunately is not possible at the moment.

• It can also be used to practice with external libraries, thanks to the speed of your NPM client we can load the latest version of our favourite library within a few seconds.

• Used as a tool to test someone’s knowledge in a job interview or similar, or to share a project of their own, to analyse their code and execute the project almost instantly, you can even see the changes in real time.

• It can also be used as our environment to develop and maintain web applications of moderate size or from the creation to the deployment of the production version in FireBase Hosting, what online tool for creating web pages can compete with Stackblitz, which also has the latest version of Angular or React? With the added benefit of being reached within seconds and the ability to load our favourite libraries within seconds too?…

Written by: Daniel Macho