Counter demo#

The "counter" is basically the "Hello World" demo of components. It is a simple demo of how to use Tetra components.

The component itself only provides a count attribute, and a public increment() method.

'nuff said, show me the code.

# counter/__init__.py
from tetra import Component, public


class Counter(Component):
    count: int = 0

    @public
    def increment(self):
        self.count += 1

Rendering is straightforward.

<!-- counter.html -->
<div class="border rounded p-3" {% ... attrs %}>
  <p>
    Count: <b>{{ count }}</b>,
    <button class="btn btn-sm btn-primary" @click="increment()">Increment</button>
  </p>
</div>

Note below in the demo how fast Tetra rendering is. Component updates almost feel as fast as native Javascript.

Demo