svelte-learning-project Svelte Themes

Svelte Learning Project

SvelteKit Learning Project

Small SvelteKit + TypeScript project created with pnpm for learning core Svelte concepts.

Install dependencies

pnpm install

Run it

pnpm dev

Then open the local URL shown in the terminal.

What to explore

  1. / overview and React/Angular to Svelte concept map
  2. /counter local state ($state) and derived values ($derived)
  3. /todos form binding (bind:value, bind:checked) and keyed list updates

Handy scripts

pnpm dev
pnpm check
pnpm build
pnpm preview

Theme export/import

  1. Switch to Custom theme and tweak colors.
  2. Click Download custom theme to save a JSON file.
  3. Click Import theme and choose a previously exported JSON file.

Theme files use this shape:

{
  "version": 1,
  "name": "custom",
  "custom": {
    "...": "#RRGGBB"
  }
}

How this project was scaffolded

pnpm dlx sv create . --template minimal --types ts --no-add-ons --install pnpm

Top categories

Loading Svelte Themes