Description #
Sapper is a framework for building high-performance web apps with Svelte. It provides server-side rendering, routing, and code-splitting, enabling fast, modern web applications with minimal configuration.
History #
Sapper was introduced by Rich Harris in 2018 as the official Svelte app framework before the advent of SvelteKit. It leverages Svelte’s reactive features and compiles to efficient JavaScript for improved user experience.
Hello World Code #
<script>
let name = "World";
</script>
<h1>Hello {name}!</h1>How to Run #
Option 1: Online
Try Svelte REPL at Svelte.dev.
Option 2: Local
- Install Node.js and npm
- Create new Sapper project:
npx degit "sveltejs/sapper-template#rollup" my-app
cd my-app
npm install
npm run devKey Concepts #
- Built on top of Svelte compiler
- Supports server-side rendering and client-side hydration
- File-based routing system
- Code splitting for performance
- Pre-fetching of linked pages
- Hot module reloading for fast development
- Supports static export and server mode
- Uses Rollup or Webpack for bundling
- Extensible with middleware and plugins
- Smaller bundle sizes compared to React/Vue frameworks
Try It Online #
Fun Facts #
- Sapper’s name is a pun on “Svelte app maker.”
- It inspired SvelteKit, which is the official modern successor.
- Sapper apps are known for their small bundle sizes and fast performance.
- The framework simplifies routing with filesystem conventions.
- Rich Harris, creator of Svelte and Sapper, is a well-known open-source advocate.
