Svelte Starter is a boilerplate template by The Pudding for building Svelte applications with hot module replacement and pre-rendered static HTML for fast, static hosting.
What is Svelte Starter?
Svelte Starter is a starter template created by The Pudding, a data journalism publication, for building fast Svelte-based websites. It takes Svelte source in src and public/assets and outputs an ssr directory with server-side rendered, static-hostable HTML that hydrates on load. The template runs on Svelte with Rollup as the bundler and includes pre-configured helpers, components, actions, stores, and utilities for interactive data storytelling.
Key Features
- Hot module replacement — Fast development via svelte-hmr that refreshes components in the browser without a full reload.
- Pre-rendered HTML —
npm run deploycreates anssrdirectory with server-side rendered static HTML that hydrates on the client, ready for any static host. - Feather Icons — Simple, easy-to-use SVG icons are integrated through the Feather Icons library.
- ArchieML micro-CMS — Content can be sourced from Google Docs and Sheets by pasting document IDs into
config.jsonand runningnpm run gdocto fetch the latest content. - LayerCake — The LayerCake charting library is enabled by default for data visualizations.
- Water.css default styling — Default styles come from Water.css and can be customized by editing CSS variables in
global.cssinsidetemplate.html. - Pre-loaded imports — CSV, JSON, and SVG imports work out of the box, so you can load data and vector assets directly.
- GitHub Pages deployment — The
make githubcommand deploys the generatedssrdirectory to GitHub Pages.
Who is it for?
Svelte Starter is aimed at developers and data journalists who want a ready-made Svelte environment without spending time on build configuration. It suits those building interactive stories, charts, or data-driven articles that need fast static hosting and a simple content pipeline from Google Docs. It is also useful for developers who want to learn Svelte with a structured, feature-rich starting point.
Use cases
- Data journalists: build interactive charts and scrollytelling pieces using the included LayerCake and chart helpers, with content updated from Google Docs.
- Front-end developers: prototype Svelte apps quickly with HMR and pre-configured imports for CSV, JSON, and SVG assets.
- Pudding-style storytellers: reuse the Header and Footer components and the slider/tap helpers to create swipe-friendly narrative experiences.
How does Svelte Starter work?
Install the template by clicking the "Use this template" button on GitHub or via npx degit the-pudding/svelte-starter my-project. Then run npm install to install dependencies, npm run dev for local development, or npm run deploy to generate the ssr static directory. For content from Google Docs/Sheets, run npm run gdoc to fetch the latest data.
FAQ
Can I use Svelte Starter with SCSS?
Yes. Install a preprocessor such as node-sass and add the module to the svelte-preprocess configuration in the rollup config files. The template includes global.css for Water.css variable overrides.
How do I fetch content from Google Docs?
Create a Google Doc or Sheet, set sharing to "Anyone with the link", copy the document ID from the URL, paste it into config.json along with the desired filepath, and run npm run gdoc. For Sheets, include the gid value from the URL.
Can I deploy Svelte Starter to GitHub Pages?
Yes, run npm run deploy then make github to generate and deploy the ssr directory to GitHub Pages. The template is configured for this workflow out of the box.
Are The Pudding logos and fonts included?
The template includes Pudding components like Header and Footer, but The Pudding's logos and fonts are not licensed for reproduction without written permission. You should replace these assets for your own projects.
Does Svelte Starter support static hosting only?
It is designed for static hosting—the build produces a server-side rendered static ssr directory that can be served from any static host. If you need dynamic server features, you might consider a different framework.
