/create-sva

Primary LanguageTypeScriptMIT LicenseMIT

Vibrant square icon with soft corners and the characters S and A.

create-sva

SVA reduces time spent on boilerplate and project setup.
It aims to be the fastest way to build interactive typesafe Svelte applications.

Get started by running npm create sva@latest

NPM version Downloads GitHub Repo stars

Table of contents

The SVA Stack

The "SVA Stack" is a web development stack focused on simplicity, consistency, and full-stack typesafety. It combines a collection of tools for interactive full-stack applications, and provides you with a CLI to scaffold your own project.

Package Usecase Options
Svelte V5 Framework 🚫 Required
SvelteKit Meta-Framework 🚫 Required
Typescript Type-Safety 🚫 Required
Prettier Code Formatter 🚧 Removable
ESLint Code Linter 🚧 Removable
Tailwind CSS Styling 💠 Recommended
Lucia Auth 💠 Recommended
Drizzle Database Adapter 💠 Recommended
Husky Auth 💠 Optional

Note

create-sva is heavily inspired by the t3stack, both in the methodology, and the CLI. The first version of this project used or learnt from many aspects of the t3 codebase, and we owe a lot to it's contributors.

What exactly is create-sva?

create-sva is an interactive CLI designed to quickly scaffold a Svelte application with sensible defaults tailored for interactive applications. Unlike the standard Svelte CLI (which is fantastic for basic websites) create-sva focuses on getting setup with more complex functionality like authentication and databases.

The goal of create-sva is to streamline the setup process, providing you with a modular structure that fits your specific needs. Each piece is optional, and the project is generated based on your choices during setup.

SVA aims to be as leightweight as possible while scaffolding projects that get you through boilerplate code as fast as possible. This means we may omit beloved packages like superforms as it does not require project configuration.

CLI Prompt Type Options Default
Project Name Text Text Input new-svelte-app
Styling Solution Select Post CSS / Tailwind Tailwind
Auth Solution Select None / Lucia Lucia
SvelteKit Adapter Select Auto / Node / Vercel / Netlify / Cloudflare Auto
Dev Tools Multi-Select Husky / CS Code Config [ ]

Axioms

This is an opinionated project inspired by the axioms of t3 stack, and the methodologies of Rich Harris.

1. Solve Problems

It's easy to fall into the trap of "adding everything" - we explicitly don't want to do that.

Everything added to create-sva should both address the mission, and benefit from pre-configuration. This means we won't add beloved packages like superforms as it does not require much setup... but we will add things like Lucia and integrate it into Drizzle for you.

2. Embrace Web Standards

We believe in making the most of native web features to reduce unnecessary complexity and improve performance. Modern web standards offer powerful capabilities that can simplify development and enhance the user experience. By using native browser APIs and built-in features, we minimize dependencies and overhead, resulting in faster, more efficient applications. This means we look forward to deleting code, and removing dependencies in favour of native capabilities.

3. Typesafety Isn't Optional

The stated goal of create-sva is to provide the quickest way to start a new full-stack, typesafe web application. We take typesafety seriously in these parts as it improves our productivity and helps us ship fewer bugs. Any decision that compromises the typesafe nature of create-sva is a decision that should be made in a different project.

Getting Started

To scaffold an app using create-t3-app, run any of the following four commands and answer the command prompt questions:

npm

npm create sva@latest

yarn

yarn create sva

pnpm

pnpm create sva@latest

bun

bun create sva@latest