```
---
### Infinite Scroll List
Uses Core's built-in pagination directives (`get-trigger="scroll"`, `get-insert`, `get-page`) instead of manual JavaScript. The framework handles IntersectionObserver, page tracking, and end-of-data detection automatically.
```html
Loading more...
No items found.
```
For cursor-based APIs, replace `get-page` with `get-cursor`:
```html
```
> **How it works:** `get-trigger="scroll"` creates an IntersectionObserver on a sentinel element. When the sentinel enters the viewport (controlled by `get-threshold`), the next page is fetched and appended. Pagination stops automatically when the server returns an empty response.
---
## 2. Common Patterns
### Authentication Flow (login, store token, protected routes)
```html
```
---
### Theme Switcher (dark/light mode via store)
```html
```
---
### Search with Debounce
```html
No results for ""
Type at least 2 characters to search.
Searching...
```
---
### Master-Detail Layout
```html
Select an item to view details.
Loading details...
```
---
### Tabs Component
```html
Overview
Overview content here.
Details
Detail content here.
Reviews
Review content here.
```
---
### Accordion
```html
```
**Multi-open variant** (tracks open state per item):
```html
```
---
### Toast Notifications
```html
```
---
### Sortable Table with Headers
```html
Name
Email
Role
```
**Alternate with `foreach` sort direction:**
```html
```
---
### Pagination Component
```html
```
---
## 3. Route Transition Patterns
### Basic Route Transition (View Transition API)
The recommended way to add transitions between routes. Just add `transition` to the `route-view` outlet:
```html
```
No additional CSS or configuration needed -- built-in presets handle everything.
### Custom View Transition CSS
Override the built-in presets with custom animations using `::view-transition-*` pseudo-elements:
```css
/* Custom cross-fade with blur effect */
::view-transition-old(route-content) {
animation: blur-fade-out 0.4s ease-out;
}
::view-transition-new(route-content) {
animation: blur-fade-in 0.4s ease-in;
}
@keyframes blur-fade-out {
from { opacity: 1; filter: blur(0); }
to { opacity: 0; filter: blur(4px); }
}
@keyframes blur-fade-in {
from { opacity: 0; filter: blur(4px); }
to { opacity: 1; filter: blur(0); }
}
```
### Direction-Aware Slide Transition
The `slide` preset automatically handles direction. To customize the directional behavior:
```css
:active-view-transition-type(forward) {
&::view-transition-old(route-content) {
animation: slide-out-left 0.3s ease;
}
&::view-transition-new(route-content) {
animation: slide-in-right 0.3s ease;
}
}
:active-view-transition-type(backward) {
&::view-transition-old(route-content) {
animation: slide-out-right 0.3s ease;
}
&::view-transition-new(route-content) {
animation: slide-in-left 0.3s ease;
}
}
@keyframes slide-out-left {
to { transform: translateX(-100%); opacity: 0; }
}
@keyframes slide-in-right {
from { transform: translateX(100%); opacity: 0; }
}
@keyframes slide-out-right {
to { transform: translateX(100%); opacity: 0; }
}
@keyframes slide-in-left {
from { transform: translateX(-100%); opacity: 0; }
}
```
### Full SPA with Route Transitions
```html
Home
Welcome to our site.
About
Learn more about us.
Contact
Get in touch.
```
### Disabling Transitions for Specific Outlets
Use `transition="none"` on outlets that should not animate:
```html
```
### Opting Out of View Transition API
Fall back to legacy class-based transitions:
```html
```
```css
.fade-enter-active, .fade-leave-active {
transition: opacity 0.3s ease;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
```
---
## 4. Best Practices
### State Scoping: Local vs Global
**Use `state` (local)** for UI-only concerns:
- Form field values
- Toggle states (expanded, visible, active tab)
- Temporary data that does not need to survive navigation
**Use `store` (global)** for cross-component, cross-route data:
- Auth/user session
- Shopping cart
- Theme/locale preferences
- Data that multiple routes read
```html
Content
```
**Rule of thumb:** If only one DOM subtree cares about the value, use `state`. If two or more unrelated sections need it, use `store`.
---
### Template Organization for Large Apps
Use file-based routing with remote templates to keep things modular:
```
project/
index.html
components/
header.tpl
sidebar.tpl
footer.tpl
pages/
index.tpl <- /
dashboard.tpl <- /dashboard
users.tpl <- /users
settings.tpl <- /settings
locales/
en.json
es.json
```
```html
```
Each `.tpl` file is a self-contained piece of HTML. No.JS fetches and caches them automatically.
---
### Performance Tips
| Tip | Why |
|-----|-----|
| Prefer `show`/`hide` over `if` for frequently toggled content | `show` toggles CSS display; `if` destroys and recreates DOM nodes |
| Always add `key` on loops | Enables efficient DOM diffing so only changed items re-render |
| Use `cached` on GET requests for static data | Avoids redundant network requests; supports memory, localStorage, sessionStorage |
| Use `debounce` on reactive URLs driven by user input | Prevents rapid re-fetches while typing |
| Use `lazy="ondemand"` on heavy route templates | Templates are only fetched the first time the user navigates there |
| Use `template` attribute on loops instead of inline content | Named templates are cloned more efficiently and are reusable |
| Keep expressions simple | Complex logic in attribute values is hard to read; use `computed` for derived state |
| Use `foreach`/`each`/`for` with `limit`/`offset` for large lists | Renders only a subset; combine with pagination for virtual-scroll-like behavior |
---
### Form Validation Patterns
**Progressive validation** -- show errors only after the user interacts:
```html
```
**Conditional fields:**
```html
```
**Custom validators:**
```html
```
**Per-field state display:**
```html
```
---
### Error Handling Strategies
**Per-request error templates:**
```html
```
**Error boundaries** for isolating failures:
```html
Something went wrong
```
**Global error handler** for logging and 401 redirects:
```html
```
---
### Live Search with Debounced GET
Uses `watch` + `debounce` on a reactive URL to fire requests 300ms after typing stops:
```html
No results for
```
---
### Live Polling Dashboard
Auto-refreshes every 5 seconds using `refresh`. Polling stops when the element disconnects from the DOM:
```html
```
---
### Request + Response Interceptors (JWT Auth)
Pair a request interceptor (stamps tokens) with a response interceptor (revokes on 401):
```html
```
---
### `into` -- Write Fetch Response to a Global Store
Use `into` to write API responses directly into a named global store, making the data available across the entire page:
```html
```
---
### Full SPA Example
Login + JWT interceptors + dashboard + validation -- all integrated:
```html
Welcome to MyApp
Loading dashboard...
```
---
## 5. Resource Hints
No.JS automatically injects resource hints into `` for performance:
- **`preload`** — for static `get=` URLs (API requests started before JS renders the component)
- **`preconnect`** — for cross-origin `get=` URLs (DNS + TLS handshake resolved early)
- **`prefetch`** — for `` entries (route files loaded in background)
All hints are deduplicated — no duplicates if the same URL already has a hint.
**Build-time injection** (recommended for LCP):
```sh
node scripts/inject-resource-hints.js "dist/**/*.html"
```
Add to `package.json`:
```json
{ "scripts": { "build": "your-bundler && node scripts/inject-resource-hints.js" } }
```
The build-time script injects the same hints into static HTML before the browser executes any JavaScript, maximizing LCP improvement. Dynamic URLs with `{interpolation}` are skipped.
**Note on `crossorigin`:** All hints use `crossorigin="anonymous"`. For APIs that require cookies or an `Authorization` header, write the hint manually with `crossorigin="use-credentials"`.
---
## 6. CLS Prevention with `skeleton=`
The `skeleton=` attribute keeps a pre-rendered placeholder visible while a request is in flight, preventing Cumulative Layout Shift (CLS). Unlike `loading=` (which clones a template via JS), the skeleton is already in the DOM — no layout shift.
```html
```
The skeleton is hidden automatically when the response arrives (success, cache hit, empty, or error). Start the skeleton **visible** — No.JS controls its `display` via inline style.