Layouts

Share navigation, headers and footers across all pages with zero redundancy.

Basic Layout

A layout block wraps every page automatically. Use slot to mark where page content goes:

layout { nav { link "Home" href="/" link "About" href="/about" } slot footer { p "Made with NyxCode" } }

How It Works

The compiler finds the layout block and wraps every page with it. The slot element is replaced with each page's content. Layout CSS is compiled once and shared across all pages — no duplication.

Nested Slot

Slot works at any depth. Wrap it in a section for layout styling:

layout { Navbar section { style { margin-left 260px padding 3rem 4rem } slot } Footer }

Importing Layouts

Layouts can live in separate files and be imported:

use "./layout.nyx" page / { h1 "Home" } page /about { h1 "About" }

vs Next.js

Next.js layout.tsx: 15+ lines, separate file, needs imports and JSX boilerplate.

NyxCode layout: 3 lines, same file, zero imports.

// Next.js (layout.tsx) import Sidebar from '@/components/Sidebar' export default function Layout({ children }) { return ( <div className="flex"> <Sidebar /> <main>{children}</main> </div> ) } // NyxCode (3 lines) layout { Sidebar slot }