Skip to main content

Getting started

Discover how you can start using StackBlitz now!

Picking a starter project

Let’s go to the StackBlitz homepage. If you are not logged in yet, don’t worry, you can scroll down a bit to find a list of starter projects to choose from:

Project Starter Dashboard

If you are logged in, you should see your personal dashboard with a very similar list of starter projects:

Project Starter Dashboard

You can explore the different categories (“Popular”, “Frontend”, “Fullstack”, etc.) to find a technology stack that you’d like to try out.

Some frameworks also provide short URLs that you can use to create new StackBlitz projects. Check out the list of “.new domains” here.

Importing code

No starter project for your favorite framework? Or do you want to import your own code?

Read more on how to import projects from your own files, or from GitHub repositories.

Using the StackBlitz editor

Once you’ve clicked a starter project or imported a GitHub repository, you should see a fully working StackBlitz editor, which automatically compiles the project’s code to show a result on the right.

The StackBlitz editor showing the React TypeScript starter project

Learn more about the different parts of the editor.

You can now make code changes, and see live updates in the Preview on the right side!

If you’re not signed in yet, we recommend signing in with a GitHub account to make sure that you can save your changes and find them back later.

Using StackBlitz on your site

If you’re writing a blog, maintaining a documentation site or an open-source project, you can use StackBlitz to:

  1. Embed examples and demos.
  2. Add “Open in StackBlitz” buttons to your READMEs and docs.
  3. Generate custom projects on the fly with our JavaScript SDK.
  4. Recommend StackBlitz in GitHub issue templates to get better bug reproductions!