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.

Practice

1. What is the main purpose of a +layout.svelte file in a SvelteKit project?

easy

A. To style individual components only.

B. To create a standalone page without any shared content.

C. To define a shared wrapper for multiple pages using a <slot />.

D. To write backend server code for the app.

Solution

1. Step 1: Understand the role of +layout.svelte

   The +layout.svelte file is used to wrap multiple pages with shared content like headers or footers.

2. Step 2: Recognize the use of <slot />

   The <slot /> inside +layout.svelte marks where the page content will appear inside the layout.

3. Final Answer:

   To define a shared wrapper for multiple pages using a <slot />. -> Option C

4. Quick Check:

   Layout files wrap pages with shared parts = D [OK]

Hint: Layouts wrap pages with to share content [OK]

Common Mistakes:

• Thinking layout files are for backend code
• Confusing layout with individual page components
• Not using inside layout files

2. Which of the following is the correct way to include page content inside a +layout.svelte file?

easy

A. <slot />

B. <div>Content</div>

C. <script>export let content;</script>

D. <page />

Solution

1. Step 1: Recall how layouts insert page content

   Layouts use the <slot /> element to mark where child page content appears.

2. Step 2: Check each option

   Only <slot /> correctly inserts page content inside a layout.

3. Final Answer:

   <slot /> -> Option A

4. Quick Check:

   Page content goes inside in layouts = A [OK]

Hint: Use to insert page content in layouts [OK]

Common Mistakes:

• Using <div> instead of for page content
• Trying to pass content via script props
• Using non-existent tag

3. Given this +layout.svelte file:

<header>Site Header</header>
<slot />
<footer>Site Footer</footer>

And a page with content:

<h1>Welcome</h1>

What will the rendered output be?

medium

A. Site HeaderWelcomeSite Footer

B. WelcomeSite HeaderSite Footer

C. Site HeaderSite Footer

D. Welcome

Solution

1. Step 1: Understand layout structure

   The layout wraps content with header and footer, placing page content where <slot /> is.

2. Step 2: Insert page content at slot

   The page's <h1>Welcome</h1> replaces the <slot /> in the layout.

3. Final Answer:

   <header>Site Header</header><h1>Welcome</h1><footer>Site Footer</footer> -> Option A

4. Quick Check:

   Layout header + page content + footer = B [OK]

Hint: Page content replaces in layout output [OK]

Common Mistakes:

• Ignoring and missing page content
• Placing page content before header
• Only showing page content without layout parts

4. You created a +layout.svelte file but your pages show no content. What is the most likely cause?

medium

A. You used <slot></slot> instead of <slot />.

B. You forgot to include <slot /> in the layout file.

C. You named the file layout.svelte instead of +layout.svelte.

D. You placed the layout file inside the src/routes folder.

Solution

1. Step 1: Check layout file structure

   If <slot /> is missing, page content has no place to render inside the layout.

2. Step 2: Verify other options

   File naming and placement are important but missing <slot /> directly causes no page content to show.

3. Final Answer:

   You forgot to include <slot /> in the layout file. -> Option B

4. Quick Check:

   No means no page content shown = C [OK]

Hint: Always include in layouts to show page content [OK]

Common Mistakes:

• Using wrong file name but still expecting content
• Thinking is invalid (it's valid)
• Placing layout outside routes folder (usually okay if nested)

5. You want to create a layout that adds a navigation bar only for pages inside src/routes/dashboard. Where should you place the +layout.svelte file to achieve this?

hard

A. Inside src/routes/dashboard/dashboard.svelte as a layout.

B. Inside src/routes/+layout.svelte to affect all pages.

C. Inside src/+layout.svelte to affect all routes including dashboard.

D. Inside src/routes/dashboard/+layout.svelte to affect only dashboard pages.

Solution

1. Step 1: Understand layout file scope

   A +layout.svelte file affects all pages in its folder and subfolders.

2. Step 2: Choose folder for dashboard-only layout

   Placing +layout.svelte inside src/routes/dashboard limits the layout to dashboard pages only.

3. Final Answer:

   Inside src/routes/dashboard/+layout.svelte to affect only dashboard pages. -> Option D

4. Quick Check:

   Layout location controls which pages it wraps = A [OK]

Hint: Put +layout.svelte in folder to scope layout to that folder [OK]

Common Mistakes:

• Putting layout in root folder affects all pages
• Naming a page file as layout
• Placing layout outside routes folder