Svelte Starter

A Svelte starter template for projects.

svelte logo

Want a Svelte site built?

Hire a Svelte developer

Svelte Starter

This starter template aims for fast and easy web development with HMR, and pre-rendered HTML for optimal static hosting.

Please note: do not use or reproduce The Pudding logos or fonts without written permission.

Features

Quickstart

New school: just click the Use this template button above.

Old school:

npx degit the-pudding/svelte-starter my-project

Then in your local repo:

npm install
npm run build

Development

To start the dev server:

npm run dev

Modify content in src and public/assets.

Deploy

npm run deploy

This generates a directory called ssr with the server-side rendered static-hostable app.

If deploying to github pages:

make github

Style

There are a few stylesheets included by default in template.html. Modify global.css variables to make changes to water.css defaults.

You can use SCSS or another CSS preprocessor by installing the module (eg. node-sass) and including the property in the svelte-preprocess in the rollup config files.

Google Docs and Sheets

Running npm run gdoc at any point (even in new tab while server is running) will fetch the latest from all Docs and Sheets.

Pre-loaded helpers

Helper Components

Located in src/components/helpers.

Pudding Components

Located in src/components/pudding.

Actions

Located in src/actions.

Utils

Located in src/utils/.

Preset Stores

These are located in src/stores, to include them do this (replacing name):

import name from "../stores/name.js";

Utils

transformSvg.js: this custom transition lets you apply an svg transform property with the in/out svelte transition. Parameters (with defaults):

{
    target: "", // string: transform properties [required]
    delay: 0, // number: ms
    duration: 250, // number: in ms
    easing: linear, // function: svelte easing function
    relative: false, // boolean: adds target onto pre-existing transform
    opacity: false // boolean: to fade in/out as well
}

Usage

<g out:transformSvg={{ target: "translate(50, 50)" }}>

Notes

Any @html tags, e.g., {@html user} must be the child of a dom element so they can be properly hydrated.

Get New Themes & Resources

Loading Svelte Themes