Rollup Plugin Svelte Ssr

Rollup plugin that injects SSR-ed markup and/or styles in custom html-template
Alternatives To Rollup Plugin Svelte Ssr
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Awesome Vite10,372
a day ago41mitJavaScript
⚡️ A curated list of awesome things related to Vite.js
Wmr4,8424a month ago16September 19, 202188mitJavaScript
👩‍🚀 The tiny all-in-one development tool for modern web apps.
Plugins3,2484826,29720 hours ago37September 12, 202236mitJavaScript
🍣 The one-stop shop for official Rollup plugins
a month ago24gpl-3.0TypeScript
Generate responsive pages and apps on HTML, Tailwind, Flutter and SwiftUI.
2 months ago7mit
⚡️ Delightful Rollup Plugins, Packages, and Resources
Chimee2,10618203 years ago68June 15, 202030mitJavaScript
a video player framework aims to bring wonderful experience on browser
Awesome F2e Libs1,465
a year ago2
🎉 整理我平时关注的前端库。
Vue I18n Next1,3353,6172,2959 hours ago258July 12, 202294mitTypeScript
Vue I18n for Vue 3
Rollup Plugin Visualizer1,3348511,40320 days ago94July 15, 202210mitTypeScript
📈⚖️ Visuallize your bundle
Rollup Plugin Typescript27816,38816,25517 days ago73June 06, 202225mitTypeScript
Rollup plugin for typescript with compiler errors.
Alternatives To Rollup Plugin Svelte Ssr
Select To Compare

Alternative Project Comparisons


Build Status semantic-release Commitizen friendly

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}`;
Popular Plugin Projects
Popular Rollup Projects
Popular Libraries Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Server Side Rendering