API reference
Exact names, types and defaults for everything in REALM. New to REALM? Start with the Docs.
All examples load REALM from the CDN:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.js"></script>Elements
| Element | Purpose |
|---|---|
<custom-element> |
Defines a component |
<import-element> |
Loads a file of component definitions |
<repeat-list> |
Repeats its content for each item of an array |
<is-visible> |
Mounts its content while a condition is true |
<is-hidden> |
Mounts its content while a condition is false |
| Value slots | <slot name="#…"> and <slot name="@…"> show a value |
Attributes
| Attribute | Purpose |
|---|---|
_name |
Binds an attribute, property or CSS variable to a reference |
on… |
Event handlers in component markup and on plain pages |
debounce, throttle |
Delay or rate-limit handlers and requests |
ref |
Names an element for refs and render |
repeat |
Repeats one element per item |
focusgroup |
Arrow-key focus navigation |
fetch, method, params, headers |
Send a request from markup |
trigger, poll |
When the request is sent |
into, into-mode, into-key |
Write the response into state |
render, render-mode, render-select |
Insert the response as HTML |
busy, timeout |
Track a request and set a time limit |
Script
Names available in every component <script> without importing. See Component script for how scripts run.
| Props and state | Element | Lifecycle |
|---|---|---|
defineProps |
host |
onConnected |
prop |
refs |
onDisconnected |
useState |
signal |
onFormReset |
observe |
internals |
onFormDisabled |
tick |
attrs |
onFormStateRestore |
defineStore |
useChildren |
|
defineMethods |
||
dispatch |
||
listen |
||
lookup |
||
| Timers |
Events, CSS and JavaScript
| Page | Covers |
|---|---|
| Request events | loadstart, load, error, abort, timeout, loadend from fetch attributes |
| Import events | load and error from <import-element> |
| Component events | Events your components send, and change from delegated controls |
| realm.css | The page and shadow root stylesheet |
--attr-* and --state-* |
Reactive CSS custom properties |
:state() |
Reactive custom states, including :state(loading) |
| Design tokens | The REALM UI theme variables |
| Entry points | realm.js, index.js, compiler.js and what each exports |
start, importDefinitions, defineComponent |
Start REALM and define components from JavaScript |
flush, toRaw, untrack |
Reactivity utilities |
| Compiler | compileDefinition and tokenize |
| Vite plugin | Assemble components at build time for a strict Content Security Policy |
References and durations covers the value syntax all attributes share. Console messages lists every warning REALM prints.