🧬 Nexus-JSX

Architecture is the realization that UI = f(State + Logic)
“Don’t write the component — describe the intent.”

Nexus-JSX is a high-performance, lightweight React engine that transforms logic-infused JSON schemas into fully functional, production-ready UI modules.

It is designed as a long-term, stable foundation for Server-Driven UI (SDUI), modular frontends, and orchestration-based architectures — without sacrificing React’s hook ecosystem or runtime performance.

🏗️ The Architectural Shift

Orchestration over Construction

Nexus-JSX introduces a new development culture that replaces the traditional component-per-file mindset with Schema-Driven Orchestration.

1️⃣ End of File Inflation

Instead of creating dozens of .jsx files for pages, cards, modals, and flows, you define what the UI should do, not how it should be constructed.

The engine becomes the constant.
Schemas become the variable.

2️⃣ Lego-Style Composition

Build your UI primitives once (Inputs, Buttons, Tables, Charts).
Inject them into the Nexus engine.

Schemas orchestrate these parts into complete modules at runtime.

No duplication.
No rewiring logic.

3️⃣ True Decoupling by Design

• UI → Defined inside the schema template
• Business Logic → Lives in customHooks or externalContext
• State Control → Centralized via the Bridge

Want to redesign a Product List?
Change the schema template — not Redux, not API services, not hooks.

⚡ The Nexus Advantage

| Capability | Legacy React | Nexus-JSX | |---|---|---| | UI Structure | One file per component | One engine + schemas | | Data Flow | Prop drilling / Context | Direct bridge access | | Logic Coupling | UI + logic intertwined | Fully decoupled | | Runtime Control | Fragmented | Centralized orchestration | | Performance | Re-render heavy | Turbo Engine | | Longevity | Refactor-heavy | Schema evolution |

✨ Core Features

• Logic Injection
  Use any React hook (useFormik, useQuery, custom hooks) directly inside schemas.

• Stable Logic Bridge
  A single, stable bridge reference for the lifetime of the component:

  • state access
  • state mutation
  • actions
  • events
  • hooks
  • injected components

• Unified Actions API
  One action system for JSX templates and HTML templates: bridge.actions.run("actionName")

• Turbo Engine (Default)

  • True shallow state comparison
  • Referentially stable bridge
  • Optional visibility-aware rendering

• Lifecycle Orchestration
  onMount, onUnmount, onUpdate, and watched state paths.

• Event Bus Built-In
  bridge.on / emit / off for cross-module communication.

• Safety & Longevity

  • Safe Mode for untrusted schemas
  • Schema validation & dev warnings
  • SSR-aware runtime guards

• Zero Runtime Dependencies
  Uses your existing React version via peerDependencies.

🚀 Installation

npm install nexus-jsx

🛠️ Basic Usage

Define intent via schema — Nexus assembles the component.

import NexusJSX from "nexus-jsx";

const schema = {
  name: "CounterModule",
  initialState: { count: 0 },

  template: (bridge) => (
    <div>
      <h1>Clicks: {bridge.state.count}</h1>
      <button onClick={() => bridge.merge({ count: bridge.state.count + 1 })}>
        Increment
      </button>
    </div>
  ),
};

const Counter = NexusJSX(schema);

// Use it in your App
export default function App() {
  return <Counter />;
}

🧬 Advanced Integration (Hooks & Form Logic)

Inject complex logic without coupling it to UI files.

import { useFormik } from "formik";
import * as Yup from "yup";

const Registration = NexusJSX(UserSchema, {
  components: { CustomInput, CustomButton },

  customHooks: {
    useFormik: () =>
      useFormik({
        initialValues: { email: "" },
        validationSchema: Yup.object({
          email: Yup.string().email().required(),
        }),
        onSubmit: (values) => console.log(values),
      }),
  },
});

Inside the schema template:

const formik = bridge.useFormik;

🏎️ Turbo Engine

Turbo mode is enabled by default.

It provides:

• Shallow state comparison
• Stable bridge reference
• Optional CSS-level visibility optimization
• Forced updates when explicitly required
• Designed for dashboards, SDUI, and large dynamic UIs.

📦 Examples

Production-grade usage scenarios are provided:

• Minimal Counter
• Formik Registration Flow
• Server-Driven UI (Remote Schema)
• Dashboard Layout DSL
• Plugin-Based UI Modules
• Performance Stress Test (Turbo)

👉 See /examples on GitHub and /docs.

🧠 Philosophy

UI is not a file. It is a projection of state, logic, and intent.

Nexus-JSX is built to last — enabling systems that evolve through schemas, not refactors.

📄 License

MIT License

Developed by Recep Yalcin — 2026