Layout Groups with (group)
Group routes under a shared layout without adding a URL segment using parentheses.
Layout Groups with (group) is a free Sveltejs Academy lesson on CoddyKit — lesson 1 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.
Why Layout Groups
Sometimes you want a layout that applies to many routes without adding a URL segment.
Folder Convention
Wrap folder names in parentheses to create a layout group: (marketing).
src/routes/(marketing)/+layout.svelte
src/routes/(marketing)/about/+page.svelte
src/routes/(marketing)/pricing/+page.svelteURLs Stay Clean
The parentheses do not appear in the URL. /about and /pricing stay as-is but share the layout.
Multiple Groups
You can have separate (marketing) and (app) groups with different layouts.
Use Case
Marketing pages (header, hero) vs app pages (sidebar, dashboard nav) sharing the same domain.
Without Groups
Without groups, you would need to add subfolders to the URL or repeat the layout markup.
Group-Level Hooks
Groups can have +layout.js and +layout.server.js just like normal layouts.
Nesting Groups
Groups can nest inside other groups for further specialization.
Error Pages Per Group
Each group can have its own +error.svelte for tailored failure UI.
Refactoring
Promote shared layouts to a group when you find yourself repeating layouts across siblings.
Migration
Moving a route into a group changes only the layout, not the URL.
Quick Check
What do parentheses do in folder names?
Recap
Wrap folders in parentheses for layout groups that share UI without adding URL segments.
Frequently asked questions
Is the “Layout Groups with (group)” lesson free?
Yes — the full text of “Layout Groups with (group)” 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 “Layout Groups with (group)”?
Group routes under a shared layout without adding a URL segment using parentheses. 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 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Layout Groups with (group)” 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