# Quick start
This page builds a working component in one HTML file, then moves it into its own file. You need a text editor and a web browser. There is nothing to install. REALM loads from a CDN.
## 1. One HTML file
Create `index.html`. The two tags in the `` load REALM from the jsDelivr CDN:
```html
My first REALM page
Type your name.
```
Open the file in your browser and type a name. The live version:
```html live
Your name
Type your name.
```
How it works:
- `useState` returned a reactive object. Writing `greeting.name` updates everything that reads it.
- `message` is a getter, so it works as a cached derived value.
- `` shows the value as text. While the value is empty, the slot shows its own content, "Type your name.", like a native slot's fallback content.
- `_value="#greeting.name"` binds the input's current value to state. `oninput="updateName(this)"` sends changes back. There is no hidden two-way binding.
- In a page, the script and style use `type="realm"`. The browser ignores those types, so the script does not run in the page's global scope and the style does not leak into the page. REALM picks them up and runs them per component instance.
## 2. Move the component into its own file
In an app, each component usually lives in its own file. Create `greeting-form.html` with the same definition, using a plain `
Type your name.
```
Then load it from the page:
```html
```
`` fetches the file once, defines every `` in it, and fires `load` or `error`. Because files are loaded with `fetch`, open the page through any static file server rather than from disk, for example your editor's live preview or `python3 -m http.server`. There is still nothing to build.
## 3. Use ready-made components
Add the REALM UI theme and bundle to get buttons, inputs, dialogs and more:
```html
Click me
```
```html live
Click me
```
## Next
- The [Tutorial](/docs/tutorial/) builds a small app with lists, props, persistence and styling.
- [Component anatomy](/docs/components/) explains the rules of the three parts.