How to Use StackBlitz

Getting started with StackBlitz

After reading this guide, you'll be able to create and run your first web application using StackBlitz, with instant live previews of your code changes.

Step 1: Sign up and set up

1. Go to stackblitz.com.
2. Click on the "Get Started" button on the homepage.
3. If prompted, sign up for a free account using your email or GitHub account. If you already have an account, just log in.
4. Once logged in, you’ll be taken to the StackBlitz dashboard where you can start a new project.

Step 2: Your first project

1. Click on the "Create New Project" button.
2. Choose a framework: Angular, React, or Vue.
3. After selecting a framework, a new project will open in the editor.
4. In the left sidebar, you’ll see your project files. Open src/app/app.component.ts (for Angular) or src/App.js (for React) to edit the main component.
5. Change the default text inside the component to something like “Hello, StackBlitz!”.
6. As you type, notice the live preview on the right side updating instantly. This is where you can see your changes in real-time.

Step 3: Get better results

1. Use the "Preview" button at the top right to open your project in a new tab for a full view.
2. Explore the "Dependencies" section in the left sidebar to add libraries or frameworks you might need. Click "Add Dependency" and type the package name.
3. To save your project, click on the "Save" icon at the top left. You can also share your project by clicking the "Share" button.

Pro tip

If you want to quickly test out code snippets without creating a full project, use the "New Sandbox" option in the dashboard. This allows you to experiment without the overhead of a complete project setup.

Common mistake to avoid

Avoid clicking away from your project too quickly; if you don’t save your changes, you may lose unsaved work. Always ensure you hit the "Save" icon before navigating away.