# Quick start
Source: https://signy.dev/documentation/1/overview/quick-start/
A component, a signal and one line to mount it.
## Starter page
Save this as an `.html` file and open it in a browser.
```html
Hello Signy!
```
## A counter
State lives in a `Signal`. The template binds a function, `${() => this.count.value}`, so that text updates when the signal changes. The button never renders again.
```js
const { Component, Signal, application, html } = Signy;
class Counter extends Component {
count = new Signal(0);
render() {
return html`
`;
}
}
application(Counter).mount("#quick-counter");
```
## Key ideas
- **Signals hold state**: Read with `.value`, write with `.value = x` or `.set(prev => next)`.
- **render() runs once**: It builds the DOM a single time. Signy never calls it again when state changes.
- **Only functions update**: `${() => count.value}` is live. `${count.value}` is the value at render time and stays frozen.
- **Control flow is explicit**: Conditionals and lists go through `Show`, `For`, `Switch` and `Match`.
- **Components own what they create**: Bindings, effects and child components are disposed on unmount. There is nothing to clean up by hand.
## Next steps
- [How Signy works](https://signy.dev/documentation/1/overview/how-signy-works/index.html.md) explains the model behind these rules.
- [Signals](https://signy.dev/documentation/1/reactivity/signals/index.html.md) and [components](https://signy.dev/documentation/1/components/components/index.html.md) cover what you will use most.
- [Examples](https://signy.dev/examples/index.html.md) show whole apps you can copy.