{"id":50969558,"url":"https://github.com/matths/fastify-svelte-view","last_synced_at":"2026-06-19T00:32:17.302Z","repository":{"id":333031136,"uuid":"1135827734","full_name":"matths/fastify-svelte-view","owner":"matths","description":"A fastify plugin that brings Svelte CSR or SRR (with or without hydration) to your next route.","archived":false,"fork":false,"pushed_at":"2026-02-19T19:58:04.000Z","size":191,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-05-26T21:08:11.673Z","etag":null,"topics":["csr","fastify","fastify-plugin","hydration","runes","ssr","svelte","svelte5"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/matths.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-01-16T16:43:43.000Z","updated_at":"2026-02-23T15:58:04.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/matths/fastify-svelte-view","commit_stats":null,"previous_names":["matths/fastify-svelte-view"],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/matths/fastify-svelte-view","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matths%2Ffastify-svelte-view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matths%2Ffastify-svelte-view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matths%2Ffastify-svelte-view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matths%2Ffastify-svelte-view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/matths","download_url":"https://codeload.github.com/matths/fastify-svelte-view/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matths%2Ffastify-svelte-view/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34513020,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-18T02:00:06.871Z","response_time":128,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["csr","fastify","fastify-plugin","hydration","runes","ssr","svelte","svelte5"],"created_at":"2026-06-19T00:32:15.909Z","updated_at":"2026-06-19T00:32:17.282Z","avatar_url":"https://github.com/matths.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# fastify-svelte-view\n\nA Fastify plugin for rendering Svelte components with support for SSR (Server-Side Rendering), CSR (Client-Side Rendering), and SSR with hydration. This plugin makes it easy to integrate Svelte into your Fastify application, providing flexible rendering options for different use cases.\n\n## Note: Work in Progress\nThis is a quite new open-source project and still a work in progress. Ideas, feedback, and especially pull requests are very welcome!\n\n## Installation\n\n```bash\nnpm install @matths/fastify-svelte-view\n```\n\n## Registering the Plugin\n\nYou can register the plugin similar to all the other fastify plugins. Right now you should share the `templateDir` where your .svelte Files are as well as your `layoutTemplate`.\n\n```js\nconst path = require('path');\nconst fastify = require('fastify')();\nconst svelteView = require('fastify-svelte-view');\n\nawait fastify.register(svelteView, {\n  templateDir: path.join(__dirname, '../views'),\n  layoutTemplate: 'layout.html'\n});\n```\n\n## Layout template\n\nYou can specify a layout template (e.g., `layout.html`) to wrap your rendered Svelte components. The layout must include placeholders for the rendered HTML and scripts.\n\nIf you do not provide a `layoutTemplate` the plugin gracefully falls back to a default template.\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\" /\u003e\n    \u003ctitle\u003e{% title %}\u003c/title\u003e\n    {% head %}\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv id=\"app\"\u003e{% body %}\u003c/div\u003e\n    {% scripts %}\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n## API\n\n`fastify.renderSvelte(options)`  renders a Svelte component with the given options.\n\n### Options\n- `file`: Path to a Svelte component file (relative to `templateDir`).\n- `source`: Inline Svelte component source code (string).\n- `props`: Props to pass to the component.\n- `mode`: `'SSR'` (default) | `'CSR'`.\n- `hydrate`: Boolean, enables hydration (default) for SSR output.\n- `title`: Optional, sets the page title.\n\nYou can use either `file` or `source` to specify the Svelte component.\n\n## Usage Examples\n\n### Rendering a Svelte Component (SSR + Hydration)\n\nThe Svelte component is rendered at the server on request. You can use dynamic content within your props. The complete HTML is rendered by the browser and hydrated through client side Javascript to enable user interaction.\n\n```js\nfastify.get('/render', async (request, reply) =\u003e {\n  const html = await fastify.renderSvelte({\n    title: 'Svelte Page SSR',\n    props: { foo: 'bar' },\n    file: 'Example.svelte',\n    mode: 'SSR',\n    hydrate: true\n  });\n  reply.type('text/html').send(html);\n});\n```\n\n### Rendering a Svelte Component (CSR)\n\nThis time the Svelte code is provides as a string. Rendering mode is CSR, which means an almost empty HTML container is brought to life on the client side by JavaScript.\n\n```js\nfastify.get('/render', async (request, reply) =\u003e {\n  const html = await fastify.renderSvelte({\n    title: 'Svelte Page CSR', // page title\n    props: { a: 1, b: 2 }, // props\n    mode: 'CSR',\n    source: `\n      \u003cscript\u003e\n        import { onMount } from 'svelte';\n        let { a = 0, b = 0 } = $props();\n        let c = $derived(a + b);\n\n        let count = $state(0);\n        const getCount = async () =\u003e {\n          const result = await fetch('/count');\n          count = parseInt(await result.text());\n        };\n\n        onMount(getCount);\n      \u003c/script\u003e\n      \u003ch1\u003eDemo\u003c/h1\u003e\n      \u003cspan\u003ea + b = {c}\u003c/span\u003e\n      \u003cp\u003eThis page has been viewed {count} times.\u003c/p\u003e\n    `\n  });\n  reply.type('text/html').send(html);\n});\n```\n\n## Modes\n\nHere's an overview of the architectural differences between the modes to sharpen your mental model.\n\n- **SSR (Server-Side Rendering):**\n  - The server renders the Svelte component to HTML and sends it to the client.\n  - No interactivity unless hydrated; great for SEO and fast initial paint.\n\n- **SSR + Hydration:**\n  - The server renders HTML, then the client loads JavaScript to \"hydrate\" the page, making it interactive.\n  - Best of both worlds: fast initial load, SEO, and interactivity.\n\n- **CSR (Client-Side Rendering):**\n  - The server sends a minimal HTML shell and JavaScript bundle to the client.\n  - Svelte runs entirely in the browser, rendering the UI after page load.\n  - Less SEO, usually for highly interactive apps or SPA (single page applications).\n\n- **SSG (Server-Side Generation):** - not included\n  - SSG would happen at _**build time**_ (when the fastify server is started). Feel free to share your ideas about stuff like this with us.\n  - **fastify-svelte-view** currently does not provide any caching. We might add this later on. There are ideas for caching, cache-warmup and cache invalidation, but no implementation, yet.\n\n## Acknowledgements \u0026 Dependencies\n\nThis project is built on top of several important open-source packages, e.g.:\n\n- **fastify**: The core web framework providing the server and routing foundation.\n- **svelte**: The modern UI framework enabling both SSR and CSR rendering of components.\n- **rollup**: The module bundler used for compiling and bundling Svelte components and assets.\n- **@piscina/fastify**: For efficient worker thread management and performance.\n\nThanks to the great open source maintainers and communities, for their contributions and inspiration that make projects like this possible.\n\n## License\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatths%2Ffastify-svelte-view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmatths%2Ffastify-svelte-view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatths%2Ffastify-svelte-view/lists"}