Why Layout files (+layout.svelte)? - Purpose & Use Cases

The Big Idea

What if you could change your website's header once and see it update everywhere instantly?

The Scenario

Imagine building a website where every page needs the same header, footer, and navigation menu. You have to copy and paste this code into every single page file.

The Problem

Manually repeating layout code is tiring and risky. If you want to change the header, you must update every page separately. This wastes time and can cause mistakes or inconsistencies.

The Solution

Layout files like +layout.svelte let you write shared page structure once. All pages inside that folder automatically use this layout, so updates happen in one place and apply everywhere.

Before vs After

✗ Before

<header>Site header</header>
<nav>Menu</nav>
<main>Page content</main>
<footer>Site footer</footer>

✓ After

<!-- +layout.svelte -->
<header>Site header</header>
<nav>Menu</nav>
<slot></slot>
<footer>Site footer</footer>

What It Enables

This makes building consistent, maintainable websites easy and fast by sharing common page parts automatically.

Real Life Example

Think of a blog where every post has the same top menu and footer. Using +layout.svelte, you write that once and focus only on the unique post content for each page.

Key Takeaways

Layout files avoid repeating shared page code.

They let you update common parts in one place.

This saves time and reduces errors in your site.