This page provides an overview of the terms we use to describe each of the pieces of the user interface (UI) available to you in StackBlitz projects.
The Menu Bar is where you perform general operations on your StackBlitz project. It includes:
- The StackBlitz logo which links to your dashboard if you are logged in or to the StackBlitz home page otherwise.
- The buttons to save, fork (create a copy of the project), and share the project. If the project is connected to a GitHub repository, you will also find the commit button here.
- The project owner's avatar which is also a link to their StackBlitz profile page.
- The project title. If you are the project's owner, you can click on it to change it.
- The project visibility icon. If you are the project's owner, you can click it to edit project information such as title, description, URL, or whether the project is public, private or secret.
- The buttons to open the app preview in a new window and to close the integrated preview.
The Activity Bar allows you to select a view to display in the Side Bar from the available:
- Firebase (EngineBlock projects only)
- Ports in use (WebContainers projects only)
- Settings (some differences between environments – see the settings description for details)
When you open a StackBlitz project, the Side Bar displays the Project view. You can open a different view by clicking on the icons in the Side Bar.
The Project Side Bar view includes the project description (if its author provided one), allows you to browse the project files and, if you are the project owner, to connect the project to a GitHub repository.
In the EngineBlock environment the Project Side Bar also displays the project's npm dependencies list.
The Search Side Bar allows you to find all the given string occurrences in your project. The search can be case-sensitive or use regular expression.
The Ports Side Bar lists all the ports opened by your app. Clicking on the port opens it in a new window. This Side Bar is displayed in the EngineBlock environment only.
The Firebase Side Bar allows you to deploy a production version of your project using Firebase Hosting. This Side Bar is displayed in the EngineBlock environment only.
The Settings Side Bar includes some project-level and user-level customization options. You can use it to configure your editor, set up snippets and freeze or delete the project.
In the EngineBlock environment the Settings Side Bar allows you to also customize the development server running your app:
- Reload mechanism – when the code updates, specify if the changes be applied without reloading the preview window ("Hot reload"), using the HMR mechanism or should the preview window be reloaded ("Page reload"). "Hot reload" usually offers a better development experience but keep in mind that if your app relies on global event handlers (like setting
setInterval), they may persist between the updates.
- Reload trigger, which specifies what triggers the app to update in the Preview. The "Edit (auto)" option picks up updates automatically whenever you stop typing in the editor for about one second, the "Save" option only updates when you save the file, and the "Keystroke" option updates whenever you press a key in the editor.
- Clear console on HMR – when the "Reload mechanism" is set to "Hot Reload", this option allows you to keep the Console messages between updates ("Disabled") or to automatically clear them ("Enabled") as if you have manually run
console.clear()in your code.
The Editor section of the IDE displays the content of the currently selected file. You can perform several actions in the Editor's top-right side such as format code with Prettier or manage the file tabs if you have several open.
The Terminal allows you to run commands, such as
node index.js, and others – the same way you would on your local machine. NOTE: the terminal is only available in the WebContainers projects.
In case you prefer to view your app in a separate window, you can use the "Open in New Window" button located above the Preview. It will close the Preview and open your app in a separate browser tab instead.
As an example see how the RxJS starter project uses it to display a "Hello, World!" message: https://stackblitz.com/edit/rxjs?devtoolsheight=60