Your First Component

Building a component in PyWire is as simple as writing HTML and adding a bit of Python for logic.

Let’s look at a classic counter example.

---
count = wire(0)

def increment():
    count.value += 1
---
<button @click={increment}>
    Increment
</button>

<h1>Current Count: {count}</h1>

<div $if={count > 10}>
    Wow, you're clicking fast!
</div>

Adding More Interactivity

You can use standard HTML attributes and even add conditional styling.

---
count = wire(0)
def increment():
    count.value += 1
---
<h1>Count: {count}</h1>

<button @click={increment} $disabled={count >= 10}> Increment (Max 10)</button>

<p $show={count > 5} style="color: red;"> High count alert!</p>

In the next sections, we’ll dive deeper into the .wire file format and how reactivity works.