Layout files (+layout.svelte) - Step-by-Step Execution

Concept Flow - Layout files (+layout.svelte)

Start App

↓

Load +layout.svelte

↓

Render layout HTML

↓

Insert child page content

↓

Display full page

↓

User navigates

↓

Reuse layout, update child content

↓

Display updated page

The app loads the +layout.svelte file first, renders its HTML, then inserts the child page content inside it. On navigation, the layout stays, only child content changes.

Execution Sample

Svelte

<script>
  export let data;
</script>
<header>Site Header</header>
<main>
  <slot />
</main>
<footer>Site Footer</footer>

This layout file wraps every page with a header, main content area, and footer. The <slot /> shows the child page content.

Execution Table

Step	Action	Layout Rendered	Child Content Inserted	Page Displayed
1	App starts, load +layout.svelte	Header, main, footer HTML created	No	Layout visible, no child content yet
2	Child page content loaded	Layout remains	Child page HTML inserted in <slot />	Full page visible with layout and child
3	User navigates to new page	Layout reused, no re-render	New child page HTML inserted	Page updates with new child content
4	User refreshes page	Layout re-rendered	Child content inserted again	Full page visible again
5	Exit	N/A	N/A	App running with layout and child content

💡 App runs continuously; layout stays loaded while child content updates on navigation.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
layoutHTML	undefined	Rendered header, main, footer	Reused same layout HTML	Re-rendered layout HTML	Rendered layout HTML
childContent	undefined	Page 1 content inserted	Page 2 content inserted	Page 2 content inserted	Current page content

Key Moments - 2 Insights

Why does the layout not re-render on every page navigation?

Because the layout file (+layout.svelte) is designed to wrap pages and stays mounted. Only the child content inside <slot /> changes, as shown in execution_table step 3.

What does the <slot /> tag do inside +layout.svelte?

<slot /> is a placeholder where the child page content is inserted. This is why in step 2 and 3 the child content appears inside the layout.

Visual Quiz - 3 Questions

Look at the execution table, what is inserted into the layout at step 2?

A Child page content inside <slot />

B A new layout file

C Nothing, layout is empty

D Only header and footer

💡 Hint

Check the 'Child Content Inserted' column at step 2 in the execution_table.

At which step does the layout get re-rendered after navigation?

A Step 3

B Step 4

C Step 1

D Layout never re-renders

💡 Hint

Look at the 'Layout Rendered' column in the execution_table for step 4.

If the <slot /> tag was removed from +layout.svelte, what would happen?

A Layout would not render at all

B Child content would appear twice

C Child page content would not appear inside the layout

D Nothing changes

💡 Hint

Refer to the key_moments about the role of in inserting child content.

Concept Snapshot

Layout files (+layout.svelte) wrap pages with shared UI.
Use <slot /> to insert child page content.
Layout loads once and stays mounted.
Child content changes on navigation inside <slot />.
This improves performance and UI consistency.

Full Transcript

In Svelte, the +layout.svelte file acts as a wrapper for all pages in a folder. When the app starts, it loads the layout first, rendering shared parts like header and footer. The child page content is inserted inside the <slot /> tag in the layout. When the user navigates, the layout stays loaded and only the child content changes inside the slot. This means the layout does not re-render on every navigation, improving speed and keeping UI consistent. Removing the slot would prevent child pages from showing inside the layout. This visual trace shows how the layout and child content load and update step-by-step.