# Templates Where template files live, how a template is declared, and how a parent passes content into a child with slots. ## Files A page is a folder: ```text app/pages/home/ index.ts # route handler template.html # html templates and inline TS style.css # page styles ``` Start with a page's helpers, event handlers, and `@rpc` functions right in its `template.html`. As the file grows, move the `@rpc` functions and the shared interfaces to the sibling `services.ts`. Event handlers stay with the markup that fires them. ```text app/pages/home/ index.ts # route handler template.html # page template, event handlers, and reactive state services.ts # rpc functions (once the page grows) style.css test.ts ``` Move shared templates to `app/shared/templates/`. Shared rpc, channels, and LiveTables go in `app/shared/.ts`. ## Templates `` is a special reserved template name. Marking a template as `` makes it the default export of the file and turns it into an html page that automatically bundles its linked stylesheets and scripts across the reachable dependency graph. Other named templates are named exports. ```ts import html from "./template"; import html, { Footer } from "./template"; // page + named template ``` Import a template extensionless: `./template` resolves to `template.html`. Templates compose like function or class declarations: define them in one file or split across multiple files. ## Slots Slots are how a parent passes content into a child template. The child declares `` placeholders; the parent fills them. The syntax is standard html. ```html default content
footer content
 default footer ```