ViteStarter

qwik-boilerplate — Vite Starter Template

By RajaRakoto

A TypeScript fullstack starter template based on Qwik and QwikCity, built with Bun and Vite, with a built-in development toolchain including Tailwind CSS, Sass, Biome, ESLint, and Playwright.

Open Source Site Download Source ZIP

Explore the design

Compare the page layouts and mobile experience. Open any screenshot for a closer look.

1 previews

Author preview

View sourceOpens in a new tab

Author-provided preview

Preview provided in the project README.

One original preview is available. Open the full image to inspect the design.

Screenshots show visual appearance; interactive behavior may differ.

Recorded 2026-10-03View source

What stands out

A quick read of the recorded project description.

Qwik + QwikCity fullstack structure, using TypeScript strict mode with @/* and ~/* path aliases

Bun as the package manager and unit test runner, with Vite providing SSR and HMR builds

Built-in Tailwind CSS, Sass, and self-hosted Fontsource fonts

Integrated Biome, ESLint (eslint-plugin-qwik), Prettier, and EditorConfig code quality tools

Playwright end-to-end testing and Bun test unit testing

Provides a Dockerfile, and deployment adapters or SSG can be added via bun qwik add

Template Details

This is a TypeScript fullstack starter template for Qwik + QwikCity applications. The repository describes it as minimalistic, uses Bun as the package manager and unit test runner, and relies on Vite for SSR and HMR during builds. The template includes a fairly complete engineering setup: Biome, ESLint (with eslint-plugin-qwik), Prettier, and EditorConfig for code quality and formatting; Playwright for end-to-end testing and Bun test for unit testing; Tailwind CSS and Sass for styling, with self-hosted Fontsource fonts; icons from qwikest/icons.

The directory structure is organized by concern: src/routes uses QwikCity file-based routing, including the root layout, a prefetch service worker, and two demo applications, flower and todolist; src/components contains starter demo components; directories such as api, auth, data, extras, and pages are placeholder structures, each with a README explaining its purpose, waiting for users to fill in code. Entry files are separated into development (entry.dev.tsx), preview (entry.preview.tsx), and SSR (entry.ssr.tsx).

The template also provides a Dockerfile for containerized deployment, and adapters for Cloudflare, Netlify, Express, or static site generation can be added via bun qwik add. The README mentions an optional PLUM Sass mixins toolkit and recommends keeping Sass 1.77.6 for integration. The repository uses the MIT license, allowing free use, modification, commercial use, and distribution, but third-party assets such as demo images, fonts, and icons require separate license verification, and external services such as domains, hosting, and databases may incur additional charges.

ViteStarter

Is it right for your project?

Use Cases

Starting a TypeScript fullstack application with Qwik + QwikCity
Project prototypes that need SSR, file-based routing, and a prefetch service worker
Development workflows that want to use Bun directly as the package manager and test runner
Projects that need Docker containerization or later integration with Cloudflare, Netlify, or Express adapters

Suitable For

Developers familiar with TypeScript and Qwik/QwikCity
Teams that prefer the Bun toolchain and want to reduce initial configuration work
Fullstack projects that need end-to-end and unit testing scaffolding
Projects planning to use Tailwind CSS and Sass for styling

Getting started & customization

Use these recorded setup notes alongside the repository instructions for your chosen version.

1
Create a project with bun create github.com/RajaRakoto/qwik-boilerplate <project-name>, then run bun install and bun run dev
2
The Node version must meet the requirements stated in the README (≥ 20.19 or ≥ 22.12)
3
The MIT license uses the author's name/GitHub by default and must be updated or removed as needed
4
Each subdirectory under src has its own README; api, auth, data, extras, and pages are placeholder directories that require you to fill in code
5
If used with the PLUM Sass mixins toolkit, the README recommends keeping Sass 1.77.6

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This entry covers the free version under the MIT license in the public repository; the free scope applies to that version's code and does not mean external services or third-party assets are free.

Must comply with when using

Free use, modification, commercial use, and distribution of this version's code are permitted.
When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.

Additional costs & items to verify

PLUM is an optional external Sass mixins toolkit, not required by the template; if used together, the README recommends keeping the Sass version at 1.77.6 for smooth integration.
Deployment adapters (Cloudflare, Netlify, Express, etc.) or static site generation must be added yourself via bun qwik add; related hosting and external services may incur costs.
The MIT license attributes the author's name and GitHub by default; users must update or remove this attribution according to their own project.
Demo images, fonts, icons, and other third-party assets must be checked against their respective licenses and cannot be judged solely by the code's MIT license.
External services such as domains, hosting, databases, payments, or AI may incur additional charges.

View Original Text Basis

Permission is hereby granted, free of charge
Original License Text

Optionally pair with [PLUM](https://github.com/RajaRakoto/plum), a Sass mixins toolset. For smooth integration it is recommended to keep Sass `1.77.6`.
Original README

Use `bun qwik add` to add an adapter (Cloudflare, Netlify, Express…) or the [Static Site Generator (SSG)](https://qwik.dev/qwikcity/guides/static-site-generation/).
Original README

MIT license uses your name/GitHub — update or remove if needed.
Original README

https://github.com/RajaRakoto/qwik-boilerplate/blob/master/LICENSE https://github.com/RajaRakoto/qwik-boilerplate/blob/master/README.md

Compiled by DeepSeek based on repository license and README ·2026-10-03. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.

Project checks & description sources

Template Information

Source platforms: GitHub
Documentation and maintenance reference score: More documented · 75 / 100
Technologies: Vite
Website type: Starter

How this score is calculated

Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.

What to verify for this project

Repository update recorded: 2026-08-03
Screenshot last checked: 2026-10-03

No demo link is recorded. Use the repository instructions to evaluate the project locally; the screenshot alone cannot establish interactive behavior.

The catalog identifies Vite as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.

Use a selection guide →

How this description was prepared

AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.

Automatically checked against source and license rules; no manual editorial review.

Inspect the recorded source material

SHA-256: 6c210df97debd01b792b1def0a009ced75bba883fc9574270e0b8c2897b1e0b3

2026-10-03T02:50:28.047Z

Source file / repository

<div align="center">
<img src="https://rajarakoto.github.io/github-docs/boilerplate/qwik-boilerplate.jpg">
</div>

# qwik-boilerplate 🚀

[![forthebadge](https://forthebadge.com/images/badges/built-with-love.svg)](https://forthebadge.com) [![forthebadge](https://forthebadge.com/images/badges/for-you.svg)](https://forthebadge.com) [![forthebadge](https://forthebadge.com/images/badges/open-source.svg)](https://forthebadge.com) [![forthebadge](https://forthebadge.com/images/badges/uses-git.svg)](https://forthebadge.com) [![forthebadge](https://rajarakoto.github.io/github-docs/badge/build-by.svg)](https://forthebadge.com)

![Git](https://img.shields.io/badge/-Git-777?style=flat&logo=git&logoColor=F05032&labelColor=ffffff) ![Gitub](https://img.shields.io/badge/-Gitub-777?style=flat&logo=github&logoColor=777&labelColor=ffffff)

**Developer-ready, minimalistic fullstack boilerplate for building blazing-fast applications with [Qwik](https://qwik.dev) + [QwikCity](https://qwik.dev/qwikcity/overview/), powered by [Bun](https://bun.sh) & [Vite](https://vitejs.dev).**

- [Qwik Docs](https://qwik.dev/)
- [Discord](https://qwik.dev/chat)
- [Qwik GitHub](https://github.com/QwikDev/qwik)

## ✨ Features

| Area | Stack |
|------|-------|
| Framework | Qwik + QwikCity (resumability, zero hydration, fine-grained lazy loading) |
| Runtime | Bun (package manager + test runner), Node ≥ 20.19 or ≥ 22.12 |
| Build | Vite 7 SSR with HMR |
| Language | TypeScript (strict mode), path aliases `@/*` → `src/`, `~/*` → `public/` |
| Styling | Tailwind CSS 4, Sass (variables, mixins), self-hosted Fontsource fonts |
| Quality | Biome, ESLint (eslint-plugin-qwik), Prettier, EditorConfig |
| Testing | Playwright (e2e) + Bun test (unit) |
| Icons | qwikest/icons (180k+ icons) |
| Perf | Partytown (third-party scripts off main thread), service worker prefetching |
| Ops | Docker, Grunt backups, depcheck, npm-check-updates, ungit |

> 💡 Optionally pair with [PLUM](https://github.com/RajaRakoto/plum), a Sass mixins toolset. For smooth integration it is recommended to keep Sass `1.77.6`.

## 🚀 Quick Start

```bash
bun create github.com/RajaRakoto/qwik-boilerplate <project-name>
cd <project-name>
bun install
bun run dev
```

> 1. MIT license uses your name/GitHub — update or remove if needed.
> 2. Each subdirectory in `src` has its own `README.md` explaining its purpose.
> 3. Adjust `package.json` (name, description, author, etc.) to fit your project.

## 📁 Project Structure

```
src/
├── @types/          Global type declarations
├── api/             API clients & server communication
├── assets/          Static assets (images, logos)
├── auth/            Authentication logic
├── common/          Shared components (e.g. QwikLogo)
├── components/      UI components
│   └── starter/     Demo components (hero, counter, gauge, header, footer, …)
├── constants/       Shared constants (getting-started steps)
├── data/            Data sources / mocks
├── extras/          Optional add-ons
├── pages/           Page-level components
├── routes/          QwikCity file-based routing
│   ├── layout.tsx         Root layout (header/footer, cache headers, server time)
│   ├── service-worker.ts  Prefetching service worker
│   └── demo/              Demo apps (flower, todolist)
├── styles/          Global styles (Sass + Tailwind)
├── types/           Ambient type declarations (Partytown)
├── utils/           Utility functions
├── entry.dev.tsx    Dev-only entry point
├── entry.preview.tsx Vite preview entry point
├── entry.ssr.tsx    SSR entry point
└── root.tsx         QwikCityProvider root
```

`api/`, `auth/`, `data/`, `extras/`, `pages/` are placeholders that keep the structure ready for common concerns — drop your code in, each folder documents itself via its `README.md`.

## 🌐 Routes

- `/` — Landing page: hero, counter, getting-started walkthrough
- `/demo/flower` — Reactive flower generator (`useTask$`, `useStore`)
- `/demo/todolist` — Todo list demo (`routeLoader$` + `routeAction$` + Zod, works without JS)

## 📜 Scripts

All commands run with `bun run <script>`.

| Script | Description |
|--------|-------------|
| `dev` | Start dev server (SSR + HMR) |
| `dev:debug` | Start dev server with Node.js debugger |
| `start` | Start dev server and open the browser |
| `preview` | Build production and serve a preview |
| `build` | Production build (client + SSR) |
| `build.client` | Build client bundle only |
| `build.preview` | Build SSR preview bundle (`entry.preview.tsx`) |
| `build.types` | TypeScript type-check (no emit) |
| `clean` | Remove `server`, `build`, `dist`, `coverage`, `playwright-report` |
| `test:unit` / `test:unit:watch` | Unit tests (Bun), watch mode |
| `test:e2e` | End-to-end tests (Playwright) |
| `biome:fix` | Lint & format with Biome |
| `biome:unsafe` | Biome with unsafe fixes |
| `biome:start` / `biome:stop` | Manage the Biome daemon |
| `eslint` | Lint with ESLint (warnings fail the run) |
| `prettier` | Format with Prettier |
| `pkg-check` | Find unused dependencies (depcheck) |
| `pkg-upgrade` | Interactive dependency upgrade (npm-check-updates) |
| `backups` | Incremental backups with Grunt |
| `versioning` | Start ungit (Git GUI) |
| `npm-version:major/minor/patch` | Bump version via npm |
| `nvm` | Switch to the project's Node version |
| `script:sass-charset` | Prepend `@charset "UTF-8"` to all SCSS files |

## 🔌 Integrations & Deployment

Use `bun qwik add` to add an adapter (Cloudflare, Netlify, Express…) or the [Static Site Generator (SSG)](https://qwik.dev/qwikcity/guides/static-site-generation/). A base `Dockerfile` is included for containerized deployment.

## 🔗 Similar

Check out my other starter projects:

- 🚀 [bun-boilerplate](https://github.com/RajaRakoto/bun-boilerplate)
- 🚀 [node-boilerplate](https://github.com/RajaRakoto/node-boilerplate)
- 🚀 [react-boilerplate](https://github.com/RajaRakoto/react-boilerplate)
- 🚀 [next-boilerplate](https://github.com/RajaRakoto/next-boilerplate)
- 🚀 [vscode-boilerplate](https://github.com/RajaRakoto/vscode-boilerplate)
- 🚀 [cli-boilerplate](https://github.com/RajaRakoto/cli-boilerplate)

Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.

react-starter-kit

A full-stack SaaS monorepo starter built on Vite and React, with Bun, TypeScript, tRPC, Drizzle ORM, Better Auth, Stripe, and Cloudflare Workers. It includes email OTP, passkey, Google OAuth, organizations, subscription billing, Drizzle migrations, seed scripts, and Terraform infrastructure.

Vite · SaaS

cove

Cove is a minimal TanStack Start starter template maintained by mugnavo, integrating React, TanStack Router/Query, Tailwind CSS, shadcn/ui, Drizzle ORM with PostgreSQL, Better Auth, Vite Plus, and Nitro.

Vite · SaaS

vite-react-boilerplate

A production-ready Vite + React starter template with TypeScript, Tailwind CSS, TanStack Router/Query/Table, Storybook, React Hook Form + Zod, Vitest and Playwright testing, plus Husky/Commitizen/Commitlint commit conventions.

Vite · Starter

react-vite-admin

A backend management starter built on Vite and React, integrating Recoil, React Query, TypeScript, and Axios, with Ant Design-style interface screenshots. Suitable as a starting point for management-side projects, licensed under MIT, with Chinese documentation and common scripts.

Vite · Admin dashboard

typescript-react_best_practices-vite_template

A Vite + React + TypeScript starter template by CodelyTV, preconfigured with Jest and React Testing Library unit tests, Cypress end-to-end tests, ESLint and Prettier using Codely's shared configuration, GitHub Actions workflows, a Makefile, and Sass.

Vite · Starter

cloudflare-starter-kit

A Cloudflare Workers project scaffolding template maintained by kriasoft, using Vite and TypeScript, with three built-in workspaces: api, app, and edge, and preconfigured local testing, multiple environments, and a GitHub Actions deployment workflow.

Vite · Starter