Skip to content
A base for building shareable Svelte 3 components
JavaScript HTML
Branch: master
Clone or download
Latest commit 2bd2a7b Aug 19, 2019

Psst — looking for an app template? Go here --> sveltejs/template

Svelte 3 Component Template

Known Vulnerabilities Build Status

Table of Contents

  1. Template Types
  2. Features
  3. Getting started
  4. Developing
  5. Consuming components
  6. Backward Compatibility
  7. Preprocessors
  8. Publishing to npm
  9. Credits & Inspiration


  • Autoprefixing
  • Formating
  • Linting
  • Preprocessing
  • Testing

Getting Started

  1. Choose your template (regular/monorepo)

  2. Clone it with degit:

The regular version:

npx degit YogliB/svelte-component-template my-new-component

The minimal version:

npx degit YogliB/svelte-component-template my-new-component#minimal

or the monorepo version:

npx degit YogliB/svelte-component-template#monorepo my-new-component-library
  1. cd into the folder and install the node_modules:
cd my-new-component
npm ci
git init

For monorepo:

npm run bootstrap
  • The ci command makes sure your packages match the one in the package-lock.json (See here).
  1. Run npm init, to configure the project.
  2. Replace this README with your own.

Your component's source code lives in src/components/[MyComponent].svelte or packages/* if you chose the monorepo option.


  1. Start Rollup:
npm run dev
  1. Edit a component file in src/components, save it, and reload the page to see your changes.

  2. Make sure your component is exported in src/components/components.module.js.

  3. Make sure your component is imported and nested in src/App.svelte.

  4. Navigate to localhost:5000 to see your components live.

Consuming Components

Your package.json has a "svelte" field pointing to src/components/components.module.js, which allows Svelte apps to import the source code directly, if they are using a bundler plugin like rollup-plugin-svelte or svelte-loader (where resolve.mainFields in your webpack config includes "svelte"). This is recommended.

For everyone else, npm run build will bundle your component's source code into a plain JavaScript module (index.mjs) and a UMD script (index.js), in the dist folder.
This will happen automatically when you publish your component to npm, courtesy of the prepublishOnly hook in package.json.

Backward Compatibility

This template uses svelte-preprocess in order to integrate PostCSS auto-prefixing capabilities into the build process.


PostCSS uses browserlist under the hood, in order to "know" what css to prefix.

The browserlist configuration is located inside the package.json.


This template comes with the svelte-preprocess by default, which simplifies the use of preprocessors in components.


  1. Install the required preprocessors.
  2. Enable the preprocessor in the component.

Publishing to npm


All contributions are welcome! 😊

Just make sure you read this before contributing.

Credits & Inspiration

You can’t perform that action at this time.