jthegedus / integrations

Ways to incorporate Svelte into your stack

Svelte integrations

Templates (boilerplates)

• template (official)
  • Template for building basic applications with Svelte
• component-template (official)
  • A base for building shareable Svelte components
• svelte-component-template
  • A base for building shareable Svelte 3 components
• svelte-pwa-template
  • A starter template for PWAs based in the official Template
• svelte-redux-toolkit
  • A starter template integrating Redux-Toolkit with Svelte.
• svelte-ts-eslint-tailwind
  • Starter template and tutorial for adding ESLint, Jest and Tailwind CSS to the official TypeScript template.
• svelte-ts-eslint-prettier-template
  • Starter template with TS activated, and ESLint and Prettier working together.
• svelte-bulma-template
  • Starter template with Bulma configured.
• svelte-tailwind-i18n-template
  • Starter with Tailwind CSS, PostCSS and i18n internationalization preconfigured.
• svelte-flask
  • A template for building with svelte, and using the flask webserver and routes.
• svelte-vite-ssr
  • A project template demonstrating usage of the svelte-pilot router with Vite. svelte-pilot uses a config file based approach (like vue-router)
• svelte-scrolly
  • A component-based rich media / scrollytelling template

SvelteKit Adders

• Svelte Adders
  • Easily add PostCSS, Tailwind CSS, Firebase, GraphQL, mdsvex, Bulma, and more to your new SvelteKit project

SvelteKit Templates

Please note that we recommend adders instead of templates in most cases. Adders make it easy to mix and match libraries and stay more up-to-date with the official SvelteKit template. However, since SvelteKit is new and adders don't exist for all libraries yet, these templates may provide helpful examples for some libraries.

• Sveltetron 9000
  • SvelteKit template with TailwindCSS, Storybook, TypeScript and Sass.
• Sveltekit Starter
  • SvelteKit Starter template with Typescript, Postcss, scss, TailwindCSS, Storybook, husky, and eslint.
• SvelteKit Koa
  • SvelteKit boilerplate with Koa for building backend API, Typescript support, Docker support
• SvelteKit Stripe
  • SvelteKit template with Stripe Checkout and Typescript.
• SvelteKit MDsveX Blog
  • A minimalistic blog template built with SvelteKit and MDsveX

Sapper

• sapper-template#rollup (official)
  • The default Sapper template, available for Rollup.
• sapper-template#webpack (official)
  • The default Sapper template, available for webpack.
• sapper-firebase-typescript-graphql-tailwindcss-actions-template
  • Template that includes Sapper, Firebase functions and hosting, TypeScript and TypeGraphQL, Tailwind CSS, ESLint, and automatic building and deployment with GitHub Actions.
• sapper-mdsvex-template
  • The default Sapper template with mdsvex.
• sapper-mdsvex-template-webpack
  • The default Sapper template with mdsvex for webpack.
• sapper-postcss-template
  • Template that includes Sapper and PostCSS preprocessing with Tailwind CSS.
• sapper-tailwindcss-template
  • The default Sapper template with Tailwind CSS.
• sapper-template-firebase
  • Starter Rollup template for Sapper apps with Firebase functions, PostCSS, PurgeCSS, CSSNano, Tailwind CSS, and svelte-preprocess.
• sapper-template-rollup
  • Starter Rollup template for Sapper apps using PostCSS, PurgeCSS, CSSNano, Tailwind CSS, and svelte-preprocess.
• sapper-typescript-graphql-template
  • Template that includes Sapper, TypeScript preprocessing, and a GraphQL server through TypeGraphQL.
• SENT-template
  • A small sub-framework with tools for full development flow like tests, Docker, linting, component library, security, TypeScript, etc.
• sapper-typescript-esbuild-template
  • Starter template with Sapper, ESBuild and TypeScript.
• sapper-typescript-tailwindcss-template
  • Template that includes Sapper, TypeScript preprocessing and Tailwind CSS.

Bundler plugins

• rollup-plugin-svelte (official)
• svelte-loader (official)
• svite
  • Svelte + Vite = Sweet!
• esbuild-svelte
  • esbuild plugin
• rollup-plugin-svelte-hot
  • Rollup plugin
  • HMR
• parcel-plugin-svelte
  • Parcel plugin
• sveltify
  • Browserify transform
• gulp-svelte
  • gulp plugin
• meteor-svelte
  • Meteor plugin
• sveltejs-brunch
  • Brunch plugin
• rules_svelte
  • Bazel Rules

Preprocessors

• svelte-preprocess (official)
  • Supports PostCSS, SCSS, Less, Stylus, Coffeescript, TypeScript, and Pug.
• Less
• modular-css
• Sass
• svelte-preprocess-css-hash
  • Provides a mechanism to suffix css class names with a hash to avoid conflicts.
• svelte-preprocess-html-asset

Linting and formatting

• eslint-plugin-svelte3 (official)
• prettier-plugin-svelte (official)
  • Syntax formatting for Svelte
• svelte-check (official)
  • Detects unused css
  • Adds Svelte A11y hints
  • Provides JavaScript/TypeScript diagnostics

Editor extensions

• svelte-vscode (official)
• evanleck/vim-svelte
  • Supports Pre-processors
• vim-svelte-plugin
  • Vim syntax and indent plugin for .svelte files
  • Supports Less/Sass/Scss, Pug, Coffee, TypeScript.
  • A builtin foldexpr fold method.
  • emmet-vim HTML/CSS/JavaScript filetype detection.
• coc-svelte
  • All of the above, also utilises the svelte language server
• web-mode.el
  • Emacs major mode including support for Svelte
• IntelliJ (WebStorm)
• Sublime Text: Svelte Syntax Highlighting
• SvelteNova
  • Svelte language support for Nova Editor by Panic.

Communities

• svelte discord (official)
• svelte-society
• russian community