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.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello Signy!</title>
    <script src="https://cdn.jsdelivr.net/npm/signy@1/dist/signy.global.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script>
      const { Component, Signal, application, html } = Signy;

      class Hello extends Component {
        name = new Signal('world');

        render() {
          return html`<h1>Hello ${() => this.name.value}!</h1>`;
        }
      }

      application(Hello).mount('#app');
    </script>
  </body>
</html>

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.

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