Skip to main content
The compile() function converts your .svelte source code into a JavaScript module that exports a component.

​
Signature

function compile(
  source: string,
  options: CompileOptions
): CompileResult

​
Parameters

​
source
string
required
The component source code
​
options
CompileOptions
required
Compiler options. See Compiler Options for details.

​
Return Value

Returns a CompileResult object with the following properties:
​
js
object
The compiled JavaScript
​
js.code
string
The generated JavaScript code
​
js.map
SourceMap
A source map for the JavaScript
​
css
object | null
The compiled CSS (null if no styles)
​
css.code
string
The generated CSS code
​
css.map
SourceMap
A source map for the CSS
​
css.hasGlobal
boolean
Whether the CSS includes global rules
​
warnings
Warning[]
Array of warning objects generated during compilation. Each warning has:
  • code: A string identifying the category of warning
  • message: Human-readable description
  • start and end: Location objects with line, column, and character properties (if applicable)
​
metadata
object
Metadata about the compiled component
​
metadata.runes
boolean
Whether the file was compiled in runes mode, either because of an explicit option or inferred from usage
​
ast
AST.Root
The abstract syntax tree of the component

​
Usage Examples

​
Basic Usage

import { compile } from 'svelte/compiler';

const source = `
<script>
  let count = 0;
</script>

<button on:click={() => count++}>
  Clicked {count} {count === 1 ? 'time' : 'times'}
</button>
`;

const result = compile(source, {
  filename: 'App.svelte',
  dev: false,
  generate: 'client'
});

console.log(result.js.code);

​
With Vite Plugin

// vite.config.js
import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';

export default defineConfig({
  plugins: [
    svelte({
      compilerOptions: {
        dev: process.env.NODE_ENV === 'development',
        generate: 'client',
        hydratable: true,
        css: 'external'
      }
    })
  ]
});

​
With Rollup

// rollup.config.js
import svelte from 'rollup-plugin-svelte';

export default {
  input: 'src/main.js',
  output: {
    file: 'public/bundle.js',
    format: 'iife'
  },
  plugins: [
    svelte({
      compilerOptions: {
        dev: process.env.NODE_ENV === 'development',
        css: 'external',
        hydratable: true
      }
    })
  ]
};

​
Server-Side Rendering

import { compile } from 'svelte/compiler';
import fs from 'fs';

const source = fs.readFileSync('App.svelte', 'utf-8');

const result = compile(source, {
  filename: 'App.svelte',
  generate: 'server',
  dev: false
});

// Use result.js.code for SSR
const Component = eval(result.js.code);
const { html, css, head } = Component.render({ props: {} });

​
Custom Element

import { compile } from 'svelte/compiler';

const result = compile(source, {
  filename: 'MyElement.svelte',
  customElement: true,
  dev: false
});