Skip to content

Layout pages and shared shells

Use Demo Projects HQ to understand layout pages, shared shells, and the content slot that routed pages fill.

In Demo Projects HQ, layout pages are the reusable shell above individual screens. They carry the persistent frame, then leave a content slot for the routed page that belongs inside it.

Layouts hold shared chrome like navigation and page framing.
Content pages provide the screen-specific body for a route.
Pages Manager lets you compare those roles with the real files side by side.

Pages Manager separates structure from editing. The tree on the left decides which folder you are reading, so it is the fastest way to understand whether you are looking at shared layouts or regular routed pages.

Tree selection changes the file list on the right.
Folders tell you the role of a page before you open it.
Layouts are easier to teach when you contrast them with normal pages.

Start from the real Pages (views) root so the story begins at the top of the project page structure. From there, the layouts folder reads as a special-purpose branch instead of just another random directory.

The layouts folder is where Demo Projects HQ keeps the reusable shells. Selecting it filters the template list so you can compare the shared frame files directly.

main.ejs is the broad application frame. It is the layout that carries navigation and the shared structure for the main signed-in experience, then leaves the page body to the routed content file.

Use this shell when pages should feel like part of the full app.
Keep shared navigation and structure here.
Let content pages handle the screen-specific data and controls.

auth.ejs exists because not every route should inherit the full application frame. Login-style screens usually need a smaller, quieter wrapper so the user can complete a focused access task first.

A separate auth shell keeps access flows simple.
It avoids pulling full app navigation into pre-login screens.
It still stays reusable because multiple auth-related pages can share it.

Opening the real main.ejs layout is the practical handoff from page organization into editing. That next view lets you inspect the shared shell and the dmx-view content slot that routed pages fill.

Layouts make more sense when you treat them as reusable shells, not destination pages. From here, opening the real layout in the HTML Editor is the right next step because that is where the shared structure and content slot become visible.

Use Pages Manager to identify the correct shell.
Keep shared frame decisions in the layout.
Inspect the actual layout file next in the HTML Editor.