# Tutorial: a reading list
In this tutorial you build a reading list: add books, mark them as read, filter them, and keep them after a reload. Each step adds one idea. The demos on this page are live, and each step uses a numbered tag name (`reading-list-2`, `reading-list-3`, …) so they can sit on one page. In your own project, call it `reading-list`.
You need a text editor, a browser and one HTML file. Load REALM and REALM UI from the CDN in its ``, as in the [Quick start](/docs/quick-start/):
```html
```
Then import the components at the top of the ``:
```html
```
## Step 1: markup and style
Start with a component that has no script at all. It is still a custom element with a shadow root and scoped styles.
```html
Reading list
```
The style only applies inside the component. `ui-input` and `ui-button` come from [REALM UI](/components/).
## Step 2: state and a list
Add a `
```
Four things are new:
- **Handlers call script functions.** `onsubmit="add(event)"` is a native handler attribute, but `add` resolves to the function in the component's script. `event` and `this` work as in plain HTML.
- **Bindings.** `_value="#draft.title"` binds the input's current value to `draft.title`. `oninput` sends typed text back. REALM never writes state for you.
- **Lists.** `repeat="#books.items"` renders one `
` per item, with the item available as `book`. Inside `