Single File, Scoped styles.
Avenx components unify state declaration, calculated attributes, and markup handlers in a single `.component.js` structure. Global themes and isolated scoped styles sit cleanly in custom tag headers with preprocessor support (SASS, SCSS, Less).
The dev bundle parses these components offline to generate lightweight standard ES modules running natively in the client.
<state title="Wireless Headphones" price=299 inCart="false" />
<computed name="formattedPrice" value="'$' + price" />
<action name="toggleCart">
state.inCart = !state.inCart;
</action>
<div class="product-card">
<h3>{{ title }}</h3>
<p>Price: {{ formattedPrice }}</p>
<button @click="toggleCart()">
{{ inCart ? 'Remove from Cart' : 'Add to Cart' }}
</button>
</div><@global>
@def primary-accent #646cff;
</@global>
<@css>
.product-card {
padding: 1.5rem;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
button {
background: var(--primary-accent);
color: #ffffff;
}
</@css>Why Developers Choose Avenx.js
Direct DOM Patching
No Virtual DOM overhead. Changing a property on the proxy state triggers targeted microtask updates directly against the real DOM using the high-speed DomPatcher engine.
Static Subtree Optimization
The offline compiler analyzes component markup to tag static HTML branches (`data-ax-static`). Re-renders automatically bypass static trees for zero-waste performance.
Scoped CSS & Preprocessors
Styles are hashed and scoped automatically per component. Write standard CSS, SASS, SCSS, or PostCSS directly inside `.component.css` files with `@def` theme tokens.
Global Reactive Bridges
Zero-boilerplate shared state. Bridges allow components anywhere in the tree to subscribe to global state without prop-drilling or external stores like Redux or Pinia.
Built-in Routing & Guards
Scale effortlessly to Single Page Applications. The built-in `AvenxRouter` supports hash URLs, dynamic params (`:id`), and async security guards (`AvenxGuard`).
Zero Runtime Dependencies
Avenx runs entirely on standard native Web APIs. Ship ultra-light production bundles (< 5 kB core footprint) without bringing along heavy vendor framework runtimes.
Feel the Reactivity Live
Interact with the compiled widget on the right and watch state values trigger instant updates in the template view and active proxy observer.
<state count="0" title="Counter" />
<computed name="doubleCount" value="count * 2" />
<action name="increment">
state.count++;
</action>
<div class="counter-card">
<h2>{{ title }}</h2>
<p>Count: {{ count }} (Double: 0)</p>
<button @click="increment()">+1 Increment</button>
</div>{
"count": 0,
"title": "Counter"
}Shared State with Reactive Bridges
Share reactive values across components instantly. No Redux, no boilerplate, just pure reactive synchronization.
import { AvenxBridge } from 'avenx-core/runtime';
export default class AuthBridge extends AvenxBridge {
constructor() {
super();
this.isLoggedIn = false;
this.user = { name: 'Guest', role: 'user' };
}
}<nav>
<span>Welcome, {{ AuthBridge.user.name }}</span>
<button @click="AuthBridge.isLoggedIn = true">Login</button>
</nav>
No more prop-drilling or complex state models. Global Bridges are shared, reactive objects. Any
component referencing AuthBridge
automatically re-renders when another component updates a bridge value.
Built-in Routing & Async Guards
Scale seamlessly from single components to complex Single Page Applications with zero-dependency hash routing, dynamic params, and security guards.
import { AvenxApp } from 'avenx-core/runtime';
import AuthGuard from './guards/auth.guard.js';
const app = new AvenxApp({ target: '#app' });
// Register top-level pages and guards
app.initRouter({
'': 'Home',
'#/': 'Home',
'#/dashboard': { page: 'Dashboard', guards: [AuthGuard] },
'#/profile/:userId': 'Profile'
});import { AvenxGuard } from 'avenx-core/runtime';
import AuthBridge from '../global/auth.bridge.js';
export default class AuthGuard extends AvenxGuard {
async canActivate(to, from) {
// Protect sensitive pages asynchronously
if (!AuthBridge.isLoggedIn) {
window.location.hash = '#/';
return false;
}
return true;
}
}CLI Reference & Workflow
Run commands directly in our mock terminal below to experience the generator workflow in action.
-
1
Scaffold Project
Initialize project template, directories, and main app entry.
-
2
Generate Component
Generate single-file component template automatically.
-
3
Generate Page & Route
Scaffold a page component inside `src/pages/` for routing.
-
4
Generate Shared Bridge
Generate a global reactive state bridge class.
-
5
Run Dev Server
Start dev server with file watcher and live reload.
How Avenx.js Compares
See how Avenx.js stacks up against established frontend frameworks in architectural metrics and developer experience.
| Feature / Metric | Avenx.js | React 18 | Vue 3 | Svelte 5 |
|---|---|---|---|---|
| Reactivity Engine | JavaScript Proxies | Virtual DOM Diffing | Proxy Observers | Compile-time Signals |
| DOM Rendering Strategy | Direct Patching (No VDOM) | Virtual DOM Tree | Virtual DOM Tree | Direct DOM Operations |
| Global Shared State | Reactive Bridges (Built-in) | External (Redux/Zustand) | External (Pinia) | Built-in Stores |
| Runtime Core Footprint | < 5 kB | ~130 kB (React+DOM) | ~50 kB | 0 kB (Compiled) |
| CLI Scaffolding | Built-in Generators | Third-party | Vite / Vue CLI | SvelteKit CLI |