Svelte + Vite Seed Template

A modern Svelte project template with Vite, Tailwind CSS, Vitest, and Playwright pre-configured.

Features

• Svelte 4 - Fast, reactive component framework
• Vite - Lightning fast build tool with HMR
• Tailwind CSS - Utility-first CSS framework
• Vitest - Blazing fast unit test framework
• Playwright - Reliable end-to-end testing
• Prettier - Code formatting without semicolons
• ESLint - JavaScript and Svelte linting
• Husky + lint-staged - Automatic code formatting and linting on commit
• No TypeScript - Pure JavaScript for simplicity

Getting Started

Prerequisites

• Node.js (v18 or higher recommended)
• npm, yarn, or pnpm

Installation

# Install dependencies
npm install

# Start development server
npm run dev

Open http://localhost:5173 to view your app.

Available Scripts

Development

npm run dev          # Start dev server with HMR
npm run build        # Build for production
npm run preview      # Preview production build

Testing

# Unit tests with Vitest
npm run test              # Run tests in watch mode
npm run test:ui           # Run tests with UI
npm run test:coverage     # Generate coverage report

# E2E tests with Playwright
npm run test:e2e          # Run E2E tests
npm run test:e2e:ui       # Run E2E tests with UI

Code Quality

npm run format            # Format all files with Prettier
npm run format:check      # Check formatting without making changes
npm run lint              # Lint and fix issues with ESLint
npm run lint:check        # Check for linting issues without fixing

Project Structure

svelte-vite-seed/
├── public/              # Static assets
│   └── vite.svg
├── src/
│   ├── assets/          # Component assets
│   │   └── svelte.svg
│   ├── lib/             # Reusable components
│   │   ├── Counter.svelte
│   │   └── Counter.test.js
│   ├── App.svelte       # Root component
│   ├── app.css          # Global styles with Tailwind
│   └── main.js          # App entry point
├── tests/
│   └── e2e/             # Playwright tests
│       └── example.spec.js
├── index.html           # HTML entry point
├── vite.config.js       # Vite + Vitest config
├── svelte.config.js     # Svelte config
├── tailwind.config.js   # Tailwind config
├── postcss.config.js    # PostCSS config
└── playwright.config.js # Playwright config

Configuration

Prettier

Prettier is configured to format code without semicolons. Configuration is in .prettierrc:

• No semicolons
• Single quotes
• 2 space indentation
• Includes Svelte plugin for formatting .svelte files

ESLint

ESLint is configured with Svelte support using the flat config format. Configuration is in eslint.config.js.

Git Hooks

Pre-commit hooks are set up with Husky and lint-staged to automatically:

1. Run ESLint and auto-fix issues
2. Format code with Prettier
3. Re-stage fixed files

This ensures all committed code is properly formatted and linted.

Tailwind CSS

Tailwind is configured to scan all .svelte and .js files in src/. Customize in tailwind.config.js.

Vitest

Unit tests are configured to run with jsdom environment. Place tests alongside components with .test.js extension.

Playwright

E2E tests are in tests/e2e/. Playwright automatically starts the dev server before running tests.

To install Playwright browsers:

npx playwright install

Building for Production

npm run build

The build output will be in the dist/ directory, ready to deploy to any static hosting service.

Customization

This template is intentionally minimal. Add what you need:

• State management (e.g., Svelte stores)
• Routing (e.g., svelte-routing, SvelteKit)
• Additional UI libraries
• API clients
• Form validation

License

MIT