REALM turns a <custom-element> tag into a working web component in the browser. Write the script, style and markup in plain HTML, load REALM from a CDN and open the file. There is no build step.
A REALM component is one <custom-element> tag that holds a script, a style and markup. Values appear through native <slot> tags and events use plain onclick. The code on the left is the whole page.
useState returns a plain object. Change it and only the slots and attributes that read it update. Requests, forms and component files work through HTML attributes and tags.
repeat renders one row per item. Getters such as left recompute when the data they read changes.
fetch names the URL, into names the state that receives the JSON and busy tracks loading. The script only declares the state.
REALM components are form fields. They submit, reset and validate with their <form>, so FormData is all you need.
Keep each component in its own HTML file and load it with <import-element>. The file is fetched once and parsed, never run as a script. Open the profile-card.html tab to see it.
Your server sends the page as ordinary HTML, so titles, text, links and meta tags are all in the first response. Search engines and AI crawlers index it without running JavaScript, and REALM upgrades the custom tags into components in the browser. There is no hydration step and no JavaScript server to run.
Put content in compound parts and search engines index it. What a component draws inside its own shadow root is not in the HTML, because REALM does not output Declarative Shadow DOM.
REALM UI has about sixty accessible ui-* components: buttons, forms, dialogs, menus, tabs, tables and charts. Import one file and use the tags. Dark mode and theming come from CSS variables.
Unicons gives you 50,939 icons through <u-icon name="heart" set="tb">. Each page downloads only the icons it uses. Browse the catalog
The REALM runtime is 16 KB gzipped and depends on nothing. Each UI component wraps a feature the browser already ships, so focus, layering, keyboard and forms behave like built-in elements. Try them.
<ui-dialog><dialog>
Top layer, focus moves in, Escape closes.
<ui-popover>popover
The Popover API: no z-index fights, light dismiss.
<ui-input>ElementInternals
Submit it empty and the browser checks it.
<ui-select><select>
Plain <option> tags and the native picker.
<ui-toggle-group>focusgroup
Tab in once, then arrow keys move between buttons.
<ui-switch>:state(attr-checked)
CustomStateSet: style it like a native pseudo-class.
A REALM component is one HTML file with native tags, a script and a style. There is no JSX and no compiled output for a model to reason about, and the REALM Agent Skill gives your coding assistant the rules.
npx skills add realmorg/realm
installs the REALM Agent Skill from the realmorg/realm repository on GitHub, or download realm.zip
Add a pricing table with REALM UI to index.html
.md to any docs address. llms.txt and llms-full.txt list every page.The kind of file that comes back. It is plain HTML and it runs right here.
```html live splitComplete apps that run on this site. Each is a few HTML files and small JavaScript modules, so View Source shows the whole app.
Add these two tags to any page. There is no npm install, no bundler and no config file, and View Source shows the code you wrote.