# 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 ``. The source is in [apps/examples](https://github.com/realmorg/realm/tree/main/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](/docs/tutorial/), - a stopwatch with `observe` in [State and reactivity](/docs/state/), - a keyed, shuffled list in [Lists and keys](/docs/lists/), - a filtered page index loaded with fetch attributes in [Fetching data](/docs/fetching/), - a form-associated quantity input in [Forms](/docs/forms/), - reactive CSS variables and states in [Styling](/docs/styling/).