Introducing Qwik starters - get up and running with Qwik now
Tags: qwik, javascript, frameworks, performance
Published: 2021-12-14 22:25:03

Nothing is more satisfying than playing with code and discovering new things! Yes, it is finally here, `npm init qwik` for you to try and discover a different way to build web apps that stay lean and performant no matter their size. It is the same technology that is powering [builder.io](https://www.builder.io) and gets [100/100 PageSpeed](https://www.builder.io/blog/how-we-cut-99-percent-js-with-qwik-and-partytown).

Qwik starter CLI is a simple starter for you to try experimenting with Qwik first hand and to get a better understanding of just how different it is.

The CLI consist of these four examples, that will be expanded in the near future:

- `starter`: A basic hello world.
- `starter-builder`: A basic hello world integrated with Builder's [Qwik API](https://www.builder.io/c/docs/qwik-api).
- `starter-partytown`: A basic hello world showing how expensive tasks can be run on web-worker with [Partytown](https://github.com/BuilderIO/partytown)
- `todo`: A classic [TodoMVC](https://todomvc.com/) application. 

# Basic starter

```
> npm init qwik
💫 Let's create a Qwik project 💫

✔ Project name … qwik-starter
✔ Select a starter › Starter
✔ Select a server › Express

⭐️ Success! Project saved in qwik-starter directory

📟 Next steps:
   cd qwik-starter
   npm install
   npm start

> (cd qwik-starter; npm install; npm start)
```

![qwik-starter](https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F17ab71fc12be4fbb9a8b19415998995f?format=webp&width=2000)

Try it in [StackBlitz](https://stackblitz.com/edit/qwik-starter).

## Starter with Builder Qwik API

```
> npm init qwik
💫 Let's create a Qwik project 💫

✔ Project name … qwik-builder
✔ Select a starter › Starter Builder
✔ Select a server › Express

⭐️ Success! Project saved in qwik-builder directory

📟 Next steps:
   cd qwik-builder
   npm install
   npm start

> (cd qwik-builder; npm install; npm start)
```
![qwik-builder](https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F8c4425a663a84a41a85555f53f2665fc?format=webp&width=2000)

Try it in [StackBlitz](https://stackblitz.com/edit/qwik-todo-builder).

## Starter with Partytown

```
> npm init qwik
💫 Let's create a Qwik project 💫

✔ Project name … qwik-partytown
✔ Select a starter › Starter Partytown
✔ Select a server › Express

⭐️ Success! Project saved in qwik-partytown directory

📟 Next steps:
   cd qwik-partytown
   npm install
   npm start

> (cd qwik-partytown; npm install; npm start) 
```
![qwik-partytown](https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F135effed7c724979b0fe246bd9cc20ac?format=webp&width=2000)

## Classic TodoMVC

```
> npm init qwik
💫 Let's create a Qwik project 💫

✔ Project name … qwik-todo
✔ Select a starter › Todo
✔ Select a server › Express

⭐️ Success! Project saved in qwik-todo directory

📟 Next steps:
   cd qwik-todo
   npm install
   npm start

> (cd qwik-todo; npm install; npm start)
```
![qwik-tobo](https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2Fc7c0ea671c4547ecb2cd7da50843b97f?format=webp&width=2000)

Try it now in [StackBlitz](https://stackblitz.com/edit/qwik-todo-demo).

## Profile away

We encourage you to open the dev tools and put all of the examples through the profiler to see how little time is spent on the main thread.

Happy coding and please provide feedback:
- Star us on [github.com/builderio/qwik](https://github.com/builderio/qwik)
- Follow us on [@QwikDev](https://twitter.com/QwikDev) and [@builderio](https://twitter.com/builderio)
- Chat us on [Discord](https://discord.gg/JHVpZmqSs4)
- Join [builder.io](https://builder-io.rippling-ats.com/)