Boilerplate Astro + Svelte

Boilerplate Astro + Svelte is an open-source starter kit that combines Astro.js, Svelte, TypeScript, and CSS Modules into a production-ready base for large, scalable web projects.

What is Boilerplate Astro + Svelte?

A starter repository for building complex, large-scale web applications with enforced code quality. It takes a fresh project scaffold and gives you a structured architecture based on Atomic Design — atoms, molecules, organisms, and templates — plus automated linting, type checking, testing, and commit validation. The project is maintained by Éverton Toffanetto and distributed under the MIT license.

What makes Boilerplate Astro + Svelte stand out?

• Atomic Design architecture — Global components are organized into atoms, molecules, organisms, and templates, making UI reusable and refactorable.
• Astro.js and Svelte — Astro.js handles static generation while Svelte provides interactive component behavior.
• TypeScript — The entire codebase is typed for better maintainability and refactoring.
• CSS Modules — Styling is scoped to each component preventing class name collisions.
• 100% test coverage — Unit tests run with Vitest and end-to-end tests use Playwright.
• Accessibility support — Detects prefers-reduced-motion and adapts animations accordingly.
• Quality enforcement — Husky hooks block commits with lint or TypeScript errors, and pushes only pass when all tests and builds succeed.
• Repository quality checks — Prettier formatting, BiomeJS linting, Commitlint for commit messages, and dependency update checking are all configured.

Who should use Boilerplate Astro + Svelte?

This boilerplate suits teams and developers who need a scalable, quality-oriented foundation for a new web app. Use it when you want a pre-configured toolchain and a consistent component structure.

• Development teams starting a large project — They get a standardized folder structure and coding conventions from day one.
• Astro or Svelte developers — Use the boilerplate as a reference for combining Astro with Svelte and TypeScript.
• Engineering managers focused on code quality — Enforce linting, type checking, and test coverage with minimal setup.
• Open source contributors — The repository is public and invites collaboration.

What can you do with Boilerplate Astro + Svelte?

The boilerplate is a working project, not just a template, so you can run it and build on top of it.

• Kickstart a production app — Clone the repository, run pnpm commands, and start building features instead of configuring tooling.
• Maintain a clean codebase — Use the built-in pnpm test, lint, typecheck, format, and update scripts.
• Extend the component library — Add new UI pieces following the Atomic Design pattern already in place.

How does Boilerplate Astro + Svelte work?

Clone the repository and run pnpm to install dependencies. The development server starts at localhost:3000 with pnpm dev, and a production build is generated with pnpm build. Testing is split between pnpm test for unit tests and pnpm test:w for watch mode, while linting and formatting are available through pnpm lint, pnpm typecheck, and pnpm format.

FAQ

Is Boilerplate Astro + Svelte free?

Yes, the project is open source and licensed under the MIT license, as indicated by the GitHub license badge shown in the repository README.

What are the prerequisites for using it?

You need Node.js latest LTS and pnpm latest LTS installed. The README explicitly lists both as required before setting up the project.

Does the boilerplate include tests?

Yes, it includes both unit tests with Vitest and end-to-end tests with Playwright, and claims 100% test coverage across the codebase.

Can I contribute to the repository?

Yes, contributions are welcome. The repository is public on GitHub and maintained by Éverton Toffanetto, with links to his LinkedIn and YouTube profiles.