venx.jsSingle 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.
The dev bundle parses these components offline to generate lightweight standard ES modules running natively in the client.
<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: {{ doubleCount }})</p>
<button @click="increment()">+1</button>
</div><@global>
@def primary-color #ffffff;
</@global>
<@css>
.counter-card {
padding: 1.5rem;
border: 1px solid rgba(255, 255, 255, 0.1);
}
button {
background: var(--primary-color);
color: #000000;
}
</@css>Why Developers Choose Avenx-JS
Proxy-Based Reactivity
State management is built directly into the core. Changing a property on the state object automatically triggers a re-render of only the affected DOM nodes without virtual DOM overhead.
Compiler-Driven Components
Logic, local state, and template sit in a single unified component file. The compiler pre-parses it, generating highly optimized runtime JS classes.
Scoped Component Styling
Custom CSS is scoped automatically using unique hashed classes. Define global themes with <@global> and component styles inside <@css>.
Global Reactive Bridges
Share reactive states seamlessly between non-parent-child components. Any subscriber component automatically updates when a Bridge state changes.
CLI-First Workflow
Scaffold code in seconds. The built-in developer CLI handles application initiation, scaffolding of components/pages, and starts hot-reloading dev servers.
Zero Runtime Dependencies
Avenx runs entirely on standard native browser APIs. Ship extremely small production bundles without dragging along heavy runtime vendor frameworks.
Code Explorer & Core Concepts
<state count="0" title="My Component" />Defining Local State
Define initial properties directly inside the <state> tag. The compiler parses this tag to initialize the component's internal proxy handler automatically. No useState() hook or custom getters are needed.
Feel the Reactivity Live
Interact with the compiled widget on the right and watch the state values trigger updates in the mock code block on the left.
<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</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.
export default {
isLoggedIn: false,
user: { name: 'Guest' }
}<nav>
<span>Welcome, {{ AuthBridge.user.name }}</span>
</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.
CLI Reference & Setup
Run commands directly in our mock terminal below to see the developer experience in action.
-
1
Install Avenx-JS
Configure the local library in your node workspace.
-
2
Scaffold a Project
Initialize directory templates, routing structure, and files.
-
3
Generate Components
Scaffold a new single-file component template automatically.
-
4
Run the Server
Start dev server with file compilers and live reload enabled.