Returning Data and Using $page.data
Return data from load and access it in the page component via the data prop.
Returning Data and Using $page.data is a free Sveltejs Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Sveltejs Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
The data Prop
The page receives a special data prop populated from the load function return.
<!-- +page.svelte -->
<script>
export let data;
</script>
<ul>{#each data.items as it}<li>{it.name}</li>{/each}</ul>Type Safe
With TypeScript, SvelteKit generates types from load to data automatically.
<script lang="ts">
import type { PageData } from "./$types";
export let data: PageData;
</script>Multiple Properties
Return multiple keys; access each via data.key.
Reactivity
The data prop updates reactively on navigation. Bindings re-render.
$page Store
Access metadata anywhere via $page from $app/stores.
import { page } from "$app/stores";
<p>Current path: {$page.url.pathname}</p>Layout Data Merging
Layout load and page load merge into one data object accessible everywhere in the page tree.
Custom Props
You can pass any serializable values: arrays, objects, primitives, even Promises (for streaming).
Avoid Functions
Functions cannot be serialized; return only data, not behavior.
Defaults
If load returns nothing, data is {}.
Composing With Stores
You can populate stores from load data on mount for global access.
Page Errors
If load throws, the closest +error.svelte shows. data is not set.
Quick Check
How do you access the load return in a component?
Recap
Receive load data via the data prop. Use $page for URL, params, and route info.
Frequently asked questions
Is the “Returning Data and Using $page.data” lesson free?
Yes — the full text of “Returning Data and Using $page.data” is free to read here on the web, and the Sveltejs Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Sveltejs Academy course, upgrade to CoddyKit PRO.
What will I learn in “Returning Data and Using $page.data”?
Return data from load and access it in the page component via the data prop. You practise Sveltejs Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Sveltejs Academy?
No prior experience is required. Sveltejs Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Returning Data and Using $page.data” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Sveltejs Academy lesson?
Yes. Every Sveltejs Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- +page.js load Function
- Returning Data and Using $page.data
- Error Handling in load
- +page.server.js for Server-Only Logic