Getting Started
2026 Edition

In this first chapter, you will set up a brand new Qwik application using the official CLI, explore its folder structure, and understand the core architectural concept that makes Qwik unique: resumability.

🛠️ Create an app using the CLI

Qwik is built around a simple but powerful idea: ship as little JavaScript to the browser as possible. From the very beginning, your project is configured for server-side rendering and optimized for resumability. This means the application can continue exactly where the server left off, without re-executing everything in the browser.

Let’s create our first Qwik application using the official CLI.

Open your terminal, navigate to the directory where you want to create your project, and run the following command:

This course is built using Qwik 1.19 (the latest version at the time of recording). Minor differences may appear in future releases, but the core concepts remain the same.

The CLI will guide you through an interactive setup where you will:

• Choose a project directory, for example ./qwik-dashboard-2026
• Select a starter template
• Install npm dependencies
• Initialize a Git repository
• Optionally enjoy a small CLI joke

When prompted to select a starter, choose Empty App (Qwik City + Qwik).

We intentionally start with the Empty App so you can clearly understand how Qwik structures an application without additional UI libraries or abstractions.

When asked whether to install dependencies and initialize Git, select Yes for both.

The CLI will generate the project and prepare a clean Git repository. It even includes a small joke at the end, a nice touch from the Qwik team.

🔍 Exploring the project

After installation, navigate into your project directory:

Then open it in your code editor:

Unlike tutorials that have you write every file from scratch, much of the code for this course is already written for you. This better reflects real-world development, where you'll likely be working with existing codebases.

Our goal is to help you focus on learning the main features of Qwik, without having to write all the application code.

If npm install fails

During the CLI setup, dependencies are normally installed automatically. However, in some environments you may encounter an ERESOLVEerror when running npm install.

This is currently related to an ESLint peer dependency conflict. The starter template may include @eslint/js set to"latest", which installs ESLint v10. However, Qwik 1.19 depends on ESLint v9.

If you see an error similar to:

Open your package.json file and replace the existing@eslint/js version (often set to "latest") inside devDependencies with:

Then run:

This aligns ESLint versions correctly and resolves the conflict.

Related GitHub issue: ESLint v10 peer dependency conflict | Qwik issue #8308

Happy coding 🎉

Let's spend some time exploring the project.

Folder structure

You'll notice that the project has the following folder structure:

qwik-dashboard-2026├── README.md├── package.json├── package-lock.json├── eslint.config.js├── tsconfig.json├── vite.config.ts├── qwik.env.d.ts├── public│ ├── favicon.svg│ ├── manifest.json│ └── robots.txt└── src ├── components │ └── router-head │  └── router-head.tsx ├── routes │ └── index.tsx ├── entry.dev.tsx ├── entry.preview.tsx ├── entry.ssr.tsx ├── global.css └── root.tsx

• src/routes/: Special directory used by Qwik City. Files and folders inside this directory are automatically mapped to routes in your application.
• src/routes/index.tsx: The homepage of your application.

Refer to the docs Routing section for more information.

• src/components/: Directory for reusable components. These are not routes, but building blocks that can be used inside routes or layouts.

  For example, a Button component could live inside src/components/button/button.tsx.

• public/: Contains static assets such as images, fonts, icons, manifest.json and robots.txt. These files are served from the root of your application.
• src/root.tsx: The root component of your application. It defines the top-level structure of your app and connects Qwik City routing to your UI.
• src/global.css: Global styles shared across the application. This file is imported by root.tsx.
• src/entry.ssr.tsx: Entry point for server-side rendering. This file is responsible for rendering the application on the server.
• src/entry.dev.tsx: Development mode entry point used when running the dev server.
• src/entry.preview.tsx: Entry used when running a production preview build.
• eslint.config.js: ESLint configuration for maintaining code quality.
• qwik.env.d.ts: Type definitions for environment variables used by Qwik.
• tsconfig.json: TypeScript configuration for the project.
• vite.config.ts: Configuration file for Vite, the build tool used by Qwik.

The exact structure may evolve between Qwik versions, but the core concepts remain the same.

Don't worry if everything is not fully clear yet. We will explore these files progressively throughout the course.

🧠 Understanding Qwik’s Mental Model

Most modern frameworks make a page interactive by re-executing the application in the browser. After the HTML is rendered, JavaScript runs again on the client to “hydrate” the component tree.

Qwik takes a different approach.

Instead of replaying the entire application in the browser, Qwik serializes the application state during server-side rendering and allows the browser to resume execution from that exact point. This concept is called resumability.

When the page loads, the browser does not need to execute all components again. It only downloads and runs the specific pieces of JavaScript required for the interaction that just occurred.

By default, a Qwik City project is configured for server-side rendering. However, Qwik can also generate fully static sites. The key idea is that its architecture always supports resumability, regardless of how the application is deployed.

Files like entry.ssr.tsx are part of this rendering pipeline. They enable the server-side rendering process that makes resumability possible.

Throughout this course, you’ll progressively see how routing, loaders, and streaming build on this model to keep JavaScript delivery minimal and performance predictable.

🚀 Running the development server

Run npm run start to start the development server.

Your browser will automatically open at http://localhost:5173/. Your home page should look like this:

Source code

You can find the source code for chapter 1 2026 edition on GitHub.