Step 4 — Layouts
Shared page shells with application.what and directory inheritance.
What is a layout?
A layout is a component that wraps all pages in a directory. It provides the shared shell — navigation, sidebar, footer — while the page content is inserted via <slot/>. You set the layout in an application.what file.
<!-- site/tutorial/application.what -->
layout = "components/tutorial-layout.html"
Every page in site/tutorial/ now uses this layout. The welcome page at site/index.html does not — it has layout: none.
Directory inheritance
Layout config inherits from parent directories to children. You can override or disable it at any level.
Disabling the layout
To render a page without any layout — like a landing page or API response — use layout: none in the page's <what> block.
<what>
title: "Landing Page"
layout: none
</what>
<!-- Full HTML output, no wrapper -->
<!DOCTYPE html>
<html>...</html>Passing data to layouts
Layout components receive props from each page's <what> block. This tutorial layout uses active_step and title to highlight the correct sidebar item and set the browser tab title.
<!-- Page passes props to its layout -->
<what>
active_step: 4
title: "Step 4 — Layouts"
</what>
<!-- Layout declares them -->
<what>
props = "active_step, title"
defaults.active_step = "0"
</what>The slot
The <slot/> tag inside a layout is where page content goes. Without it, pages would render with no visible output.
<!-- components/tutorial-layout.html -->
<main>
<slot/> <!-- Page content goes here -->
</main>application.whatsets the layout for a directory and all children- Layout config inherits parent-to-child — override at any level
layout: nonein a page's<what>block disables the wrapper- Pages pass props to layouts via their
<what>block <slot/>in a layout marks where page content is inserted