Export functions and variables from a Svelte component

You can export functions and variables from a Svelte component by declaring them in a <script module> tag. Anything you export from there becomes a named export of the component file, and other components can import it.

Svelte 4 spelled this <script context="module">. Svelte 5 shortened the attribute to module, and still compiles the old form, so existing components keep working.

You know that you can import a Svelte component into another using this syntax:

<script>
import Button from './Button.svelte'
</script>

Button is the default export. Every Svelte file exports its component this way, automatically. But what if you want to export something more than the default export?

Why do we need a special script tag?

A Svelte component can have two kinds of script tags.

The normal <script> tag runs once for every instance of the component. Render 10 buttons, and it runs 10 times.

The <script module> tag runs once, when the module is first evaluated. It does not belong to any single instance.

That’s where your exports must live. You can’t export values from the normal script tag for other files to import, because export means something else there. In Svelte 4, and in Svelte 5 components that don’t use runes, export let declares a prop. In Svelte 5 with runes, props come from $props(), export let is a compile error, and an export function in the normal script becomes a method on the component instance, the one you reach through bind:this. Either way, it’s not an export of the file.

An example

Say you have a Button component in Button.svelte:

<button>A button</button>

and you want to provide other components a changeColor function.

You write and export it in the module-level script tag:

<script module>
export function changeColor() {
  //...add logic..
}
</script>

<button>A button</button>

Warning: I did not implement the actual functionality, but you get the idea.

Note that you can have another “normal” script tag in the same component. The two coexist just fine.

Now other components can import Button, which is the default export, and the changeColor function too:

<script>
import Button, { changeColor } from './Button.svelte'
</script>

Be careful with instance state

The module script has no access to the variables defined in the normal script tag. Those belong to each instance, and the module script runs before any instance exists.

So changeColor() cannot reach into a specific button on the page and update its state. If you try, you’ll get a reference error, because those variables don’t exist in the module scope.

If you need to control a single component instance, use props instead.

Exported module functions work best for logic that’s independent from any instance: shared helpers, constants, or state shared across all copies of the component.

Want me to talk about your product? You can sponsor this site.