Skip to main content
Layout defines the page templates Archie uses for the major sections of your app. Picking templates here keeps the generated frontend internally consistent and lets you change a layout once instead of editing every page.

The six template slots

  • Main Navigation — system-wide pages for authenticated users (admin, dashboard, settings). Pick a layout family: Header with Sidebar, Sidebar Only, Top Nav, Floating Top Nav.
  • Authentication — login, registration, password reset, and any other unauthenticated flows. Common patterns: Center Aligned, Framed, Half Screen, Third Screen.
  • Public Landing (Guest) — public-facing pages or marketing content for unauthenticated visitors. Patterns: Website, Marketplace / Catalog.
  • Onboarding / Wizard — multi-step flows for new-user setup and other guided experiences. Patterns: Stepper, Progress Bar, Prompt-First.
  • Minimal — specialized flows that need a clean, near-full-screen environment (e.g. preview mode, focus mode, AI consoles). Patterns: Minimal Left, Minimal Top.
  • Custom — a custom layout you describe in plain language. Archie generates the layout from your description.
Each pattern lives in the generated component library after code generation, so you can override it per page.

How layouts feed code

The chosen layout is the page chrome for that section — header, sidebar, footer, content area sizing. Archie generates the layout component once, then composes individual pages inside it. Switching a layout after generation regenerates the corresponding page chrome. Page-content components stay intact.

FAQ

Yes. The section-level layout is the default; individual pages can opt out and use a different layout in the generated code. Common case: the home page in Main Navigation often uses a different chrome than internal pages.
Custom takes a plain-language description of the layout you want and generates the layout component from it. Use this when none of the standard patterns fit. The result is editable like any other generated layout.
No. Navigation entries (links, sections, icons) are stored in your project config and re-applied to the new layout shape. The chrome changes; the contents migrate.
Yes — the Minimal templates are exactly this. Use Minimal for full-screen flows, embedded experiences, or any page where chrome would be a distraction.