@steav/steav
v1.4.2
Published
A lightweight reactive UI template library powered by JavaScript Proxies.
Maintainers
ghosttyReadme
Why steav.js?
| Feature | steav.js | React | Vue | |---|---|---|---| | Bundle Size | < 1 KB | ~130 KB | ~60 KB | | Build Step Required | No | Yes | Yes | | Reactive Data Binding | ✅ | ✅ | ✅ | | Virtual DOM | No | Yes | Yes | | Learning Curve | 5 minutes | Weeks | Days |
Get Started in 30 Seconds
Option 1 — Create a new app (recommended)
npx @steav/steav@latest my-app
cd my-appOpen index.html in your browser. Done. ✅
Option 2 — CDN (zero install)
<script src="https://cdn.jsdelivr.net/gh/Ghostty-HQ/steav.js/steav.js"></script>Option 3 — NPM
npm install @steav/steavUsage
<!DOCTYPE html>
<html>
<body>
<div id="app">
<h1>Hello, {{ name }}! 👋</h1>
<p>You clicked {{ count }} times.</p>
<button onclick="app.data.count++">Click me</button>
</div>
<script src="https://cdn.jsdelivr.net/gh/Ghostty-HQ/steav.js/steav.js"></script>
<script>
const app = new Steav({
el: '#app',
data: {
name: 'World',
count: 0
}
});
</script>
</body>
</html>When you click the button, the UI updates instantly with zero configuration.
How It Works
steav.js uses the native JavaScript Proxy API to intercept data changes. When you update app.data.count, the Proxy detects the change and automatically re-renders only the affected parts of the DOM.
app.data.count = 1
│
▼
Proxy intercepts the change
│
▼
steav finds {{ count }} in your HTML
│
▼
UI updates instantly ⚡API
new Steav(options)
| Option | Type | Description |
|---|---|---|
| el | string | CSS selector of the root element (e.g. '#app') |
| data | object | The reactive data object |
app.data
Access and mutate your reactive data directly. Any change triggers an automatic UI re-render.
app.data.name = 'steav'; // UI updates instantly
app.data.count++; // UI updates instantlyContributing
Pull requests are welcome! See CONTRIBUTING.md or open an issue on GitHub.