Click to expand what's new inside Levelo JS! 🚀
The performance, stability, and developer experience update is here! We've dropped major architectural enhancements to make Levelo JS fully type-safe and production-ready:
- 🛡️ Restructured JSX Engine & Modular Typings: Fully restructured src/runtime/jsxarchitecture with nativejsx-runtime typing integrations. Enjoy zero-config global TSX auto-completion, seamless CSS side-effect imports, and error-free bundling across CJS, ESM, and DTS pipelines.
- ⚡ Optimized State Mutations via
batch(): Group multiple synchronized state updates seamlessly. Instead of triggering incremental DOM renders for every state change, mutations are queued and flushed in a single cycle. - 🧭 Enhanced Router & Dynamic Head Engine: Native support for component-level
<Pages />and<Page />routing paired with real-time reactive<head>management (title,meta,OG tags,scripts) for effortless single-page app SEO. - 📝 Form Controls & Value Synchronization: Fixed structural tracking in
dom.tswhere<input>,<textarea>, and<select>elements lost sync with active state atoms. Forms are now 100% reactive. - 📦 Ecosystem Modularity:
vite-plugin-levelojshas been completely modularized into a standalone independent workspace package for clean builds and rapid DX.
Levelo JS is a lightweight, ultra-fast reactive JavaScript framework built for speed and simplicity. No Virtual DOM. Direct Real DOM. Powered by Motion Mind.
Scaffold a complete Levelo JS project instantly:
npx create-levelo-app my-app
cd my-app
npm install
npm run devAdd Levelo JS to an existing project:
npm install levelojs import { render } from 'levelojs';
import Mind from './Mind.jsx';
render(Mind, document.getElementById('app'));import { state } from 'levelojs';
function Counter() {
const [count, setCount] = state(0);
return (
<div>
<h2>{count()}</h2>
<button onclick={() => setCount(count() + 1)}>
Level Up ➔
</button>
</div>
);
}
export default Counter;- Zero Virtual DOM Overhead - Bypasses VDOM diffing completely; updates the Real DOM nodes directly.
- Fine-grained Reactivity - Targeted structural updates via an independent runtime tracking graph.
- Hierarchical Ownership - Native tracking scopes ensure nested reactions dispose properly with zero memory leaks.
- TypeScript Powered - Complete internal codebase rewrite into strict, type-safe structures.
- JSX Support - Standard developer-friendly component structuring with seamless reactive attribute bindings.
- Vite-integrated - Pre-configured for instantaneous Hot Module Replacement (HMR) and optimized distribution builds.
| API | Type | Description |
|---|---|---|
state |
Primitive | Creates a reactive state atom with a getter/setter tuple. |
effect |
Side Effect | Tracks active reactive dependencies and re-executes automatically. |
computed |
Memoization | Derives stateful values efficiently using caching mechanics. |
cleanup |
Lifecycle | Registers disposal routines inside active tracking ownership contexts. |
mount |
Lifecycle | Schedules code execution precisely after layout nodes paint to the Real DOM. |
batch |
Performance | Groups multiple state mutations together into a single microtask to optimize DOM updates. |
head |
SEO Management | Dynamic, component-driven configuration for document metadata layers. |
render |
Bootstrapper | Injects and mounts the root structural component tree to a DOM container. |
h |
Factory | Real DOM internal hyperscript generator (compiler-targeted). |
| Package | Description | Version |
|---|---|---|
levelojs |
Core framework library |  |
create-levelo-app |
Official project scaffolding CLI |  |
vite-plugin-levelojs |
levelojs vite plugin |  |
This project is licensed under the MIT License © Motion Mind.
Built with ⚡ by Motion Mind