MATES Playground
import { html, atom, x, renderApp } from 'mates';

// Try editing this code — the preview updates live!

const Counter = () => {
const count = atom(0);

return () => html`
<div class="m-col m-items-center m-gap center">
<h1>${count()}</h1>
<div class="m-flex m-gap-sm">
<button class="btn-danger" @click=${() => count.set(n => n - 1)}>−</button>
<button class="btn-ghost" @click=${() => count.set(0)}>Reset</button>
<button class="btn-primary" @click=${() => count.set(n => n + 1)}>+</button>
</div>
</div>
`;
};

const App = () => {
return () => html`
<div class="m-col m-items-center m-gap-lg p-30 center">
<div>
<h1>Hello from Mates! 👋</h1>
<p class="muted">Edit this code — the preview updates live.</p>
</div>
${x(Counter)}
</div>
`;
};

renderApp(App, document.getElementById('app'));


Console
0 logs
No output yet — run your code to see logs here.