There are two kinds of environments that run projects in StackBlitz: EngineBlock and WebContainers. Each project in StackBlitz is tied to one or the other.
Depending on the environment, StackBlitz IDE includes slightly different features and User Interface elements. See an overview of both environments in the table below - or you can directly consult the section on EngineBlock or WebContainers.
|Supported frameworks||Front-end||Front-end & back-end|
|Supported package managers||Turbo v1||npm, pnpm, yarn v1|
|Full Node.js environment|
|Codeflow IDE (beta)|
|Web Publisher (beta)|
|Shareable preview URL|
To explore these differences in practice, we took a React project and turned it into:
EngineBlock is a custom runtime environment based on SystemJS, capable of running popular front-end frameworks and libraries. Depending on whether you want others to interact with the codebase or the app, you can choose to share the link to the editor or the app preview.
Please note that this environment is running a custom build process and is not compatible with Node.js.
The EngineBlock runtime works with every major browser engine.
As a runtime focused on providing a native Node.js environment, WebContainers are capable of running Node.js toolchains, including Webpack or Vite. Using one of these tools, you can work with any front-end framework just like you would in your local environment. WebContainers, however, also support various back-end frameworks, as well as other tools (including
As for the sharing options, you can share only the editor link as the preview requires running editor. The preview is visible in the editor's window.
This environment has a terminal that supports various common commands you would run locally.
WebContainers are currently supported by Chromium-based browsers and in Firefox, with some caveats.
Our Codeflow IDE runs on the WebContainers runtime.