IDE: what’s on your screen
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, from left to right:
- The StackBlitz logo. If you are logged in, it links to your dashboard. Otherwise, it links to the StackBlitz home page.
- 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 sidebar from the available:
- Project - opens the Project sidebar
- Search - opens the Search sidebar
- Firebase - opens the Firebase sidebar (EngineBlock projects only)
- Ports in use - opens the Ports in Use sidebar (WebContainers projects only)
- Settings - opens the Settings sidebar
When you open a StackBlitz project, the Sidebar defaults to the Project icon's expanded view. You can open a different view by clicking on the icons in the Activity Bar.
The Project sidebar 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 sidebar also displays the project's npm dependencies list.
The Search sidebar allows you to find all the given string occurrences in your project. The search can be case-sensitive or use regular expression (regex).
Ports in use sidebar
The Ports sidebar lists all the ports opened by your app. Clicking on the port opens it in a new window. This sidebar is displayed in the EngineBlock environment only.
The Firebase sidebar allows you to deploy a production version of your project using Firebase Hosting. This sidebar is displayed in the EngineBlock environment only.
The Settings sidebar 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 sidebar allows you to also customize the development server running your app:
- Reload mechanism – when the code updates, it specifies 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 the global event handlers (like
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 reload – 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.
NOTE: the terminal is only available in the WebContainers projects.
The Terminal allows you to run commands, such as
node index.js, and others – the same way you would on your local machine.
If 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 the Console to display a "Hello, World!" message.