A tiny utility for SvelteKit that lets you change the `<html>`, `<head>`, and `<body>` tags from any page or layout—with full SSR support. Here's an example:
npm install @sveltekit-addons/documentA tiny utility for SvelteKit that lets you change the , , and tags from any page or layout—with full SSR support. Here's an example:
``svelte
`
The full list of features it offers is:
- Expands to work with attributes, not just event listeners (accessible in SSR via %ska.body.attributes% in app.html), which addresses this long-standing feature request
- Adds (ska = SvelteKit Addons), which forwards attributes and event listeners to the element (accessible in SSR via %ska.html.attributes% in app.html)
1. Grab the package from NPM:
`sh`
npm install @sveltekit-addons/document --save-dev
1. Include the preprocessor in your svelte.config.js file:
`diff
+ import { preprocessor as documentPreprocessor } from '@sveltekit-addons/document'
export default {
- preprocess: [vitePreprocess()]
+ preprocess: [vitePreprocess(), documentPreprocessor()] // Make sure it's at the very end
}
`
1. Add the handle to your src/hooks.server.js (create that file if it doesn't exist):
- If you don't have any other handles:
`diff`
+ export { handle } from '@sveltekit-addons/document/hooks'
- If you have a export already:
`diff
+ import { handle as documentHandle } from '@sveltekit-addons/document/hooks'
+ import { sequence } from '@sveltejs/kit/hooks'
- export const handle = ...
+ const handle = ...
+ export const handle = sequence(handle, documentHandle)
`
1. Add the SSR placeholders to your src/app.html:
- Manually:
`diff`
-
+
...
-
+
- Or by using the provided template (meaning you can delete yours):
`diff
// svelte.config.js
+ import { appTemplate } from '@sveltekit-addons/document'
export default {
// ...
+ kit: {
+ files: {
+ appTemplate
+ }
+ }
}
`
- 's event listeners don't get automatic types. Event listeners on the element are pretty rare, though, and most of the time
- [ ] Handle CSP
- [ ] Allow adding elements portal-style to body