Breaking Out of a Layout with +page@route
Reset the layout chain for a specific page using the @ segment notation.
Breaking Out of a Layout with +page@route is a free Sveltejs Academy lesson on CoddyKit — lesson 3 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 Reset Syntax
Use the @ syntax in a file name to break out of layouts up to a named ancestor.
Example: Reset to Root
Name your file +page@.svelte to break out of all layouts.
src/routes/admin/login/+page@.svelte // skips admin layoutReset to Named Layout
Specify a parent name after @ to reset to that level.
+page@(marketing).svelte // resets to the (marketing) layoutWhy Reset
Login pages, full-screen experiences, and embeds often need to skip the global chrome.
No URL Change
The reset only affects the layout chain; URL stays the same.
Applies to Layouts Too
Layouts can also use the @ syntax to reset themselves.
Common Pattern
Marketing site has a chrome layout, but the signup page wants no chrome.
Combining With Groups
The @ syntax works hand in hand with layout groups for total control.
Error Pages
Error pages can also break out to render without inherited UI when desired.
Documentation Hint
Comment in your code when using @, since the convention is easy to miss.
Refactoring
Add an @ reset before promoting a route to its own layout group.
Quick Check
How do you break out of all layouts?
Recap
Use the @ syntax in file names to break out of layouts up to root or a specific named ancestor.
Frequently asked questions
Is the “Breaking Out of a Layout with +page@route” lesson free?
Yes — the full text of “Breaking Out of a Layout with +page@route” 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 “Breaking Out of a Layout with +page@route”?
Reset the layout chain for a specific page using the @ segment notation. 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 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Breaking Out of a Layout with +page@route” 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