This page outlines how you can start using our StackBlitz editor.
If you wish to immediately embed your project on your page check a page on manual embeds and SDK embeds. If you wish to learn how to import your project from GitHub, check the the page on importing projects.
Picking a starter project
To start coding, navigate to the StackBlitz homepage. If you are not logged in, scroll down a bit to find a list of starter projects to choose from:
If you are logged in, you should see your personal dashboard with a very similar list of starter projects:
You can explore the different categories (for instance, “Popular”, “Frontend”, “Fullstack”) 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.
No starter project for your favorite framework? Or maybe you'd like to import your own code?
Worry not! With StackBlitz, you can import projects from your own files or from GitHub repositories.
Using the StackBlitz editor
Once you’ve chosen or uploaded a project, you should see a StackBlitz editor, which automatically compiles the project’s code to show a result on in the Preview panel on the right. Now, make some changes to the code and see live updates in the Preview!
Intrigued by all the things you see on your screen? Take a tour of the different parts of the editor.
Tip: sign in to save your work
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 continue your work 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:
- Embed examples and demos on your page or in your blog posts.
- Add “Open in StackBlitz” buttons to your READMEs and docs.
- Use StackBlitz reproductions in GitHub bug issue templates!