Shared Data Across Layouts
Load data in a parent layout and access it in child pages and layouts.
Shared Data Across Layouts is a free Sveltejs Academy lesson on CoddyKit — lesson 4 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.
Layout Loads
A +layout.js or +layout.server.js can load data shared by all pages under it.
Accessing Data
The page receives data merged from all ancestor layouts and the page itself.
export let data;
// data has both layout and page propertiesInheriting in Components
Use $page.data to access the merged data anywhere in the layout tree.
import { page } from "$app/stores";
<p>User: {$page.data.user?.name}</p>Top-Level Auth
Load the current user in the root layout; every page can access it via $page.data.
Avoid Duplication
Loading data at the highest layout that needs it prevents repeated fetches in each page.
Server-Only Data
For sensitive data, load it in +layout.server.js so it never reaches the client unless rendered.
Streaming
Layout loads can stream Promises just like page loads.
Conflicts Resolution
Page data overrides layout data with the same key.
TypeScript Inheritance
Page data types include ancestor layout data automatically via generated types.
Invalidation
Use invalidate to re-run specific layout loads on demand.
import { invalidate } from "$app/navigation";
invalidate("app:user");Hierarchy
Treat layouts as a data hierarchy: root for global, sections for section-specific, pages for page-specific.
Quick Check
How do you access layout data in a page?
Recap
Layout loads contribute to a merged data object available to descendants via the data prop and $page.data.
Frequently asked questions
Is the “Shared Data Across Layouts” lesson free?
Yes — the full text of “Shared Data Across Layouts” 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 “Shared Data Across Layouts”?
Load data in a parent layout and access it in child pages and layouts. 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 4 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Shared Data Across Layouts” 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
- Layout Groups with (group)
- Route-Level Layouts
- Breaking Out of a Layout with +page@route
- Shared Data Across Layouts