🚀 Break Free from UI Freezes — Experience True Multithreading & Uncompromised Responsiveness.

💻 Neo.mjs v10 isn't an upgrade — it's a new operating system for the web. Where others optimize at the margins, we reinvented the engine.

Imagine web applications that never jank, no matter how complex the logic, how many real-time updates they handle, or how many browser windows they span. Neo.mjs is engineered from the ground up to deliver desktop-like fluidity and scalability. While it excels for Single Page Apps (SPAs), Neo.mjs is simply the best option for browser-based multi-window applications, operating fundamentally different from traditional frameworks.

By leveraging a pioneering Off-Main-Thread (OMT) architecture, Neo.mjs ensures your UI remains butter-smooth, even during computationally intensive tasks like complex data processing or advanced graphics rendering. The main thread is kept free for one purpose: flawless user interactions and seamless DOM updates.

Traditional single-threaded frontend frameworks often struggle with performance bottlenecks and UI freezes, especially for large-scale, data-intensive, or real-time applications. Neo.mjs offers a fundamentally different solution, designed for uncompromising performance, enhanced security, and superior developer experience.

1. Eliminate UI Freezes with True Multithreading:

   "The browser's main thread should be treated like a neurosurgeon: only perform precise, scheduled operations with zero distractions."
   
   — Neo.mjs Core Philosophy

   Neo.mjs's OMT architecture inherently prevents UI freezes. With v10's optimized rendering pipeline, your UI will remain even more consistently responsive, even during intense data processing or complex graphics rendering. It achieves an astonishing rate of over 40,000 delta updates per second in optimized environments. This translates to an engine with vast untapped potential, limited only by user interaction, not the framework.

2. Unmatched Developer Experience: Transpilation-Free ESM: Say goodbye to complex build steps for development. Neo.mjs apps run natively as ES Modules directly in the browser. This means zero builds or transpilations in dev mode, offering instant reloads and an unmatched debugging experience. You modify code, and your app updates in real-time.

3. Inherent Security by Design: By prioritizing direct DOM API manipulation over string-based methods (like innerHTML), Neo.mjs fundamentally reduces the attack surface for vulnerabilities like Cross-Site Scripting (XSS), building a more robust and secure application from the ground up.

4. Declarative, Consistent, & Reusable Architecture: Neo.mjs's unique unified class config system allows you to define components, layouts, and logic in a clean, declarative, and highly consistent way. This significantly reduces boilerplate, improves maintainability, and makes complex UI composition surprisingly straightforward.

5. Scalability for Enterprise & Beyond: Whether building sophisticated enterprise dashboards, data-intensive Gen AI interfaces, or desktop-like multi-window applications, Neo.mjs's modular, worker-driven architecture effortlessly scales. Components are persistent, stateful instances that can be unmounted, moved, and even remounted across browser windows without losing their logic or state. This is key to preventing the "re-rendering madness" common in other frameworks.

While other frameworks provide just the view layer, Neo.mjs delivers a complete, natively integrated ecosystem. You'll find a rich suite of high-performance UI components — from advanced data grids, forms, and trees, to versatile containers and specialized elements like a full calendar, carousels, and chart wrappers. All components are pre-built and optimized to work seamlessly within the multi-threaded architecture, significantly accelerating development and eliminating the complexity of integrating disparate external component libraries.

Imagine a developer building a stock trading app with live feeds updating every millisecond. Traditional frameworks often choke, freezing the UI under the data flood. With Neo.mjs, the heavy lifting happens in worker threads, keeping the main thread free. Traders get real-time updates with zero lag, and the app feels like a native desktop tool. Now, imagine extending this with multiple synchronized browser windows, each displaying different real-time views, all remaining butter-smooth. That’s Neo.mjs in action — solving problems others can’t touch.

• Persistent Component Instances: Components maintain their state and logic even when their DOM is removed or moved. No more wasteful re-creations – just surgical, efficient updates.

• Reactive State Management: Built-in reactivity ensures dynamic, efficient updates between components and state providers, all handled off the main thread.

• Reactive State Management: Leveraging Neo.state.Provider, Neo.mjs offers natively integrated, hierarchical state management. Components declare their data needs via a concise bind config. These bind functions act as powerful inline formulas, allowing Components to automatically react to changes and combine data from multiple state providers within the component hierarchy. This ensures dynamic, efficient updates — from simple property changes to complex computed values — all handled off the main thread.

  // Example: A component binding its text to state
  static config = {
      bind: {
          // 'data' here represents the combined state from all parent providers
          myComputedText: data => `User: ${data.userName || 'Guest'} | Status: ${data.userStatus || 'Offline'}`
      }
  }

• Clean Architecture (MVVM-inspired): View controllers ensure a clear separation of concerns, isolating business logic from UI components for easier maintenance, testing, and team collaboration.

• Multi-Window & Single-Page Applications (SPAs)*: Beyond traditional SPAs, Neo.mjs excels at complex multi-window applications. Its unique architecture, powered by seamless cross-worker communication (enabled by Neo.worker.mixin.RemoteMethodAccess) and extensible Main Thread addons (Neo.main.addon.*), enables truly native-like, persistent experiences across browser windows, all without a native shell.

• No npm Dependency Hell: Neo.mjs apps run with zero runtime dependencies, just a few dev dependencies for tooling. This means smaller bundles, fewer conflicts, and a simpler dependency graph.

• Cutting-Edge Use Cases: Ideal for data-intensive applications, real-time dashboards, web-based IDEs, banking applications, and complex multi-window Gen AI interfaces where performance and responsiveness are non-negotiable.

• Unparalleled Debugging Experience: Benefit from Neo.mjs's built-in debugging capabilities. Easily inspect the full component tree across workers, live-modify component configurations directly in the browser console, and observe real-time UI updates, all without complex tooling setup.

Diagram: A high-level overview of Neo.mjs's multi-threaded architecture (Main Thread, App Worker, VDom Worker, Canvas Worker, Data Worker, Service Worker, Backend). Optional workers fade in on hover on neomjs.com.

Wondering how Neo.mjs stacks up against React, Angular, or Vue.js? Here’s the breakdown:

Neo.mjs Edge: True multithreading, a no-build development mode, and a scalable, secure architecture combine to deliver a framework that's faster to build with and fundamentally faster and more stable to run.

Neo.mjs’s class config system allows you to define and manage classes in a declarative and reusable way. This simplifies class creation, reduces boilerplate code, and improves maintainability.

import Component from '../../src/component/Base.mjs';

/**
 * Lives within the App Worker
 * @class MyComponent
 * @extends Neo.component.Base
 */
class MyComponent extends Component {
    static config = {
        className   : 'MyComponent',
        myConfig_   : 'defaultValue', // Reactive property
        domListeners: {               // Direct DOM event binding
            click: 'onClick'
        }
    }

    // Triggered automatically by the config setter when myConfig changes
    afterSetMyConfig(value, oldValue) {
       console.log('myConfig changed:', value, oldValue);
    }

    // Handled in the App Worker, main thread remains free
    onClick(data) {
        console.log('Clicked!', data);
    }
}

export default Neo.setupClass(MyComponent);

For each config property ending with an underscore (_), Neo.mjs automatically generates a getter and a setter on the class prototype. These setters ensure that changes trigger corresponding lifecycle hooks, providing a powerful, built-in reactive system:

• beforeGetMyConfig(value)
  (Optional) Called before the config value is returned via its getter, allowing for last-minute transformations.
• beforeSetMyConfig(value, oldValue)
  (Optional) Called before the config value is set, allowing you to intercept, validate, or modify the new value. Returning undefined will cancel the update.
• afterSetMyConfig(value, oldValue)
  (Optional) Called after the config value has been successfully set and a change has been detected, allowing for side effects or reactions to the new value.

For more details, check out the Class Config System documentation.

Run this command:

npx neo-app@latest

This one-liner sets up everything you need to start building with Neo.mjs, including:

• A new app workspace.
• A pre-configured app shell.
• A local development server.
• Launching your app in a new browser window — all in one go.

📖 More details? Check out our Getting Started Guide

🧑‍🎓 Make sure to dive into the Learning Section

Next steps:

• ⭐ Experience stunning Demos & Examples here: Neo.mjs Examples Portal
• Many more are included inside the repos apps & examples folders.
• 📘 All Blog Posts are listed here: Neo.mjs Blog

💬 Have questions? Join our Slack channel and connect with other developers.

🛠️ Want to contribute? Check out our Contributing Guide.

Copyright (c) 2015 - today, Tobias Uhlig