# counter.pyxl
 
# Count lives in Python. The @action
# mutates it on the server (sandboxed here).
count = 0
 
@server
async def load(request):
    return {"count": count}
 
@action
async def increment(request):
    global count
    count += 1
    return {"count": count}
 
 
import React, { useState } from 'react';
import { useAction } from 'pyxle/client';
 
export default function Counter({ data }) {
    const [count, setCount] = useState(data.count);
    const increment = useAction('increment');
 
    async function bump() {
        const res = await increment();
        if (res.ok) setCount(res.count);
    }
 
    return (
        <div className="card">
            <span className="tag">state lives in Python</span>
            <h1>{count}</h1>
            <p>Each click runs the @action — real Python.</p>
            <button onClick={bump} disabled={increment.pending}>
                {increment.pending ? 'Running…' : 'Increment +'}
            </button>
        </div>
    );
}