Creating Layouts and Pages
2026 Edition

So far, your application only contains a single page. But real-world applications are not isolated pages, they are structured systems made of layers.

In this chapter, you'll learn how Qwik structures applications using file-based routing, how layouts wrap pages, and how different layers of your app work together to create a stable and scalable architecture.

Instead of simply adding new pages, you will learn how Qwik thinks about application structure.

🗺️ How file-based routing works in Qwik

Qwik uses a file-based routing system. This means that your folder structure directly defines your application's URL structure.

Each directory inside src/routes represents a route segment that maps to a URL segment.

📂 Creating nested routes with folders

To create a new route in Qwik, you simply create a new folder insidesrc/routes.

For example, if you create a folder named dashboard, Qwik will automatically create a new route available at /dashboard.

📄 Building pages with index.tsx

Inside the dashboard folder, create a new file namedindex.tsx. This file defines the page that will be rendered when users visit /dashboard.

In Qwik, an index.tsx file must export a default component. That component becomes the UI for that route.

If your development server is running, visit http://localhost:5173/dashboard. You should now see the text "Dashboard Page".

Notice that you did not configure any router manually. Qwik automatically detects new routes based on the file system. This makes routing predictable and scalable as your application grows.

🧪 Practice: Creating additional dashboard pages

Let’s expand the dashboard by creating additional nested routes.

Inside the dashboard folder, create two new folders:

1. 1.Customers Page: Create a folder named customers inside src/routes/dashboard and add an index.tsx file that returns: <p>Customers Page</p>.
2. 2.Invoices Page: Create a folder named invoices inside src/routes/dashboard and add an index.tsx file that returns: <p>Invoices Page</p>.

Once created, the following routes should now be available:

• /dashboard/customers
• /dashboard/invoices

🏗️ Sharing UI with layout.tsx

As your application grows, multiple pages often share the same user interface. In dashboards, for example, the sidebar navigation should remain visible while only the main content changes.

Qwik solves this using a special file called layout.tsx. A layout allows you to share UI across multiple routes while keeping page content dynamic.

First, let’s create a reusable navigation component that defines the links displayed in the sidebar.

Next, we create a SideNav component that uses the navigation links and adds branding and a sign-out button.

Now that we have our layout components, we can connect everything together inside a layout.tsx file.

This file must be placed inside src/routes/dashboard. It will automatically wrap every route inside the dashboard segment.

The Slot component acts as a placeholder. It tells Qwik where the child route content should be rendered.

When a user visits /dashboard/customers, only the page inside the slot changes. The sidebar remains untouched.

Ensure everything is working correctly by saving your changes and checking your localhost. You should see the following:

One major advantage of layouts in Qwik is partial rendering.

During navigation, the layout does not re-render. Only the content inside the Slot updates.

This improves performance and makes your UI feel more stable.

🌍 Root layout with Qwik

At the very top of a Qwik application sits a special file calledroot.tsx. This file defines the global document structure of your entire application.

While route layouts such as dashboard/layout.tsx wrap specific route segments, root.tsx wraps everything.

It initializes routing, global styles, metadata handling, and application level configuration.

The QwikCityProvider enables file based routing across your application. It provides the routing context required by Qwik City.

The RouterOutlet renders the currently active route. Every layout and page you create will ultimately appear inside this outlet.

The conditional manifest loading using isDev ensures that the PWA manifest is only included in production builds.

This means your application hierarchy now looks like this:

• root.tsx global wrapper
• dashboard/layout.tsx route segment layout
• index.tsx or nested pages

The dashboard layout affects only routes inside the dashboard segment. The root layout affects the entire application.

Understanding this hierarchy allows you to separate global concerns from route specific concerns and build scalable architectures.

🧱 Understanding nested layouts

Layouts in Qwik are hierarchical. They do not replace each other, they stack.

When navigating to /dashboard/customers, Qwik composes the UI like this:

• root.tsx wraps the entire application
• dashboard/layout.tsx wraps the dashboard segment
• customers/index.tsx renders inside the layout’s Slot

Each layout defines its own Slot. That slot becomes the insertion point for the next level in the hierarchy.

This stacking mechanism allows you to combine global UI, segment specific UI, and page content in a predictable and scalable way.

You now understand how Qwik structures applications using file based routing, route segment layouts, and a global root layout.

With this architectural foundation in place, you are ready to explore navigation and build more advanced interactions between pages.

Recommended reading

If you would like to go deeper into routing and layout strategies, explore the official documentation below:

• Qwik Docs Routing
• Qwik Docs Advanced Routing

Source code

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