Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

svelte-translator Build Status NPM Version NPM License NPM Downloads

Use svelte v2 features inside svelte v3, and use svelte v3 features inside svelte v2. Because sometimes there's no amount of automated component rewriting that will make things work but you want to start a gradual transition.


Feature Svelte 3 in 2 Svelte 2 in 3
Components 💭
Rollup Bundling


  • feature exists and works
  • 🔧 feature in progress
  • 💭 feature is planned


$> npm install svelte-translator

You'll also need to use npm@6.9.0 or higher so that you can install svelte@2 and svelte@3 side-by-side.

$> npm install svelte2@npm:svelte@2
$> npm install svelte@latest

⚠️ Make sure you update any existing references to svelte to point to svelte2 now that svelte v3 is the default


Svelte v3 in Svelte v2


Wrap up a v3 component so it can be included within a svelte2 component.

<Wrapper {component} {props} />

import Component from "./svelte3-component.svelte";

export default {
    components : {
        Wrapper : "svelte-translator/3in2/component.html",

    data : () => ({
        component : Component,
        props     : {
            // any props for the component
Data Usage
component The v3 component to wrap
props Properties to set on the v3 component


A small svelte2 store that expects to be passed either a readable or writable svelte3 store and will make the value of the svelte3 store available to components using the standard APIs.

import { readable } from "svelte/store";
import Adapter from "svelte-translator/3in2/store.js";

const s3r = readable(0);

const s2r = new Adapter(s3r);

// Non-object values are mapped to the "value" key

s2r.get(); // { value : 0 }

const s3w = writable({ fooga : 1, booga : 0 });

const s2w = new Adapater(s3w);

// Object values are splatted into the store

s2w.get(); // { fooga : 1, booga : 0 }

s2w.set({ fooga : 2 });

s3w.subscribe((value) => {
    // { fooga : 2, booga : 0 }

Svelte v2 in Svelte v3


svelte-translator/2in3/store.js implements the v3 store contract (.set() is provided natively by v2 stores, it implements .subscribe() & .update()) in a class that extends svelte/store.js so it can be a drop-in replacement.

Here's an example of how to make v2 stores usable in v3 components.

- import { Store } from "svelte/store.js";
+ import { Store } from "svelte-translator/2in3/store.js";

The svelte-translator version is fully functional in v3 components. You can use its values directly within the template, within the component <script> block either staticly or in reactive statements, and it can also be used as an input to any derived stores.

It also remains a completely valid svelte v2 store that functions just as they always have in your v2 components.

// my-store.js
import { Store } from "svelte-translator/2in3/store.js";

const store = new Store({

export default store;
<!-- my-component.html -->



import store from "./my-store.js";
import { derived } from "svelte/store";

$: reactive = $ + "ey";

const dstore = derived(store, ($foo, set) => set(foo + "ey"));

Rollup bundling of Svelte v2 & Svelte v3

Loading Svelte2 Components

    // Optional preprocessor
    preprocess : { ... },

    // Options for the svelte compiler
    options : {
        dev : true

Loading Svelte3 Components

    // Optional preprocessors
    preprocess : [
        { ... },

    // Options for the svelte compiler
    options : {
        dev : true


Tools for helping svelte v2 & v3 work together








No packages published