Rollup Plugin Svelte Ssr

Rollup plugin that injects SSR-ed markup and/or styles in custom html-template


Server-side rendering of Svelte app at build-time using Rollup plugin

Basic example

Let's assume that we have basic svelte component src/App.svelte:

  export let name;


  div {
    color: red;

Let's use rollup-plugin-svelte-ssr in rollup.config.js:

// ... other imports

import ssr from "rollup-plugin-svelte-ssr";

export default {
  input: "src/App.svelte",
  output: {
    format: "cjs",
    file: "dist/ssr.js"
  plugins: [
      generate: "ssr"

    // ... other plugins

      fileName: 'ssr.html',
      props: {
        name: 'Hello',

In dist directory we get ssr.html that contains SSR-ed app:

<style>div.svelte-6xs8g3{color:red}</style><div class="svelte-6xs8g3">Hello</div>


  // allow to set output file name
  fileName: 'ssr.html',
  // or
  // where entry is Rollup entry
  fileName: function(entry) {
    return "ssr.html"
  // root component props
  props: {
    name: 'Hello',
  // allow to skip emit of js file
  skipEmit: false,
  // allow to preprocess html
  preprocessHtml: function(html) {
    return html;
  // allow to preprocess css
  preprocessCss: function(css) {
    return css;
  // customize output
  configureExport: function(html, css) {
    return `<style>${css}</style>${html}`;

Top categories

Loading Svelte Themes