Bolt illustration logo

Sveltron

Beta

Svelte Smart Doc

Your smart Svelte documentation to ship faster

What is page data?

A +page.svelte file can have a sibling +page.js that exports a load function, the return value of which is available to the page via the data prop:

/// file: src/routes/blog/[slug]/+page.js
/** @type {import('./$types').PageLoad} */
export function load({ params }) {
    return {
        post: {
            title: `Title for ${params.slug} goes here`,
            content: `Content for ${params.slug} goes here`
        }
    };
}
/// file: src/routes/blog/[slug]/+page.svelte
<script>
    /** @type {import('./$types').PageData} */
    export let data;
</script>

<h1>{data.post.title}</h1> <div>{@html data.post.content}</div>

Thanks to the generated $types module, we get full type safety.

Made with Svelte by Hugo