Examples

Each example is a complete page that runs on this site. Open one and use your browser's View Source to read it. Every example is plain HTML files plus a few small JavaScript modules, loaded with <import-element>. The source is in apps/examples on GitHub.

Apps

TodoA store persisted to localStorage, getters for filters and counts, keyed list rows, inline editing with tick() and focus.

Kanban boardColumns and cards in a persisted store, native drag and drop, keyboard moves with custom events, a card editor in a dialog.

ChessA full game with legal moves, check, mate and draws, a computer opponent, board flipping and a promotion dialog. Logic lives in an imported module.

DashboardA sidebar layout, breadcrumb, tabs, charts, a data table with pagination, a command palette and a dropdown menu, all from REALM UI.

WeatherCity search and a forecast from the Open-Meteo API through fetch attributes, with loading and error states, a chart and a unit switch.

ContactsCreate, read, update and delete over a JSON API (served by a service worker) with forms, fetch attributes, validation, dialogs and confirmations.

ChatConversations with message bubbles, attachments and a scroller that sticks to the newest message. Replies arrive through element-bound timers, with a typing indicator and unread badges.

ShopA product list, product pages and a cart as plain HTML pages without a router, sharing one persisted store. Checkout validates its form and confirms with a dialog.

NotesMarkdown notes with a live preview rendered through a sanitised html slot, search, pinning, keyboard shortcuts and a persisted store.

ExpensesAn expense form, a sortable and filterable table, monthly totals, a chart by category and a CSV export, all derived from one persisted store.

GitHub explorerThe public GitHub API through fetch attributes only: debounced search, profiles, sorted and paginated repositories, loading skeletons and rate-limit errors.

MinesweeperThree difficulty levels, replayable seeded boards, a timer bound to the element, keyboard play, best times saved in the browser and win or lose dialogs.

Blocks

Page sections built from REALM UI components. All of them are defined in one file, blocks.html.

LoginA centred sign-in card with email and password fields, validation and a toast on submit.

Login, splitThe same sign-in form beside a full-height panel, for wider screens.

Sign upA registration form with fields, a terms checkbox and native form validation.

One-time passwordA six-digit code with Input OTP, paste support and a handler for the complete event.

Smaller examples in the docs

Many docs pages include live demos you can read and change:

a counter with props and getters on the home page,
a reading list built step by step in the Tutorial,
a stopwatch with observe in State and reactivity,
a keyed, shuffled list in Lists and keys,
a filtered page index loaded with fetch attributes in Fetching data,
a form-associated quantity input in Forms,
reactive CSS variables and states in Styling.

Edit this page on GitHub · View as Markdown