create-nodrix-ui

Scaffold a new Nodrix UI application with a modern, signal-based setup.

Nodrix UI is a lightweight UI framework focused on fine-grained reactivity, signals, and direct DOM updates — without React or a virtual DOM.

Getting Started

Create a new Nodrix app using npm:

npm create nodrix-ui@latest

Or specify a project name:

npm create nodrix-ui my-app

Then run:

cd my-app
npm install
npm run dev

Open your browser at:

http://localhost:5173

What You Get

• ⚡ Signal-based reactivity
• 🧩 JSX without React
• 🔄 Fine-grained updates (no re-renders)
• 🛠 Vite-powered dev server
• 🧼 Minimal project structure

Project Structure

A generated project looks like this:

my-app/
├─ index.html
├─ package.json
├─ tsconfig.json
├─ vite.config.ts
└─ src/
   ├─ env.d.ts
   ├─ main.ts
   ├─ App.tsx
   └─ components/

Example App

import { signal, effect } from "nodrix-ui";

export function App() {
  const count = signal(0);
  const time = signal(new Date().toLocaleTimeString());

  effect(() => {
    const id = setInterval(() => {
      time.set(new Date().toLocaleTimeString());
    }, 1000);

    return () => clearInterval(id);
  });

  return (
    <div>
      <h1>Welcome to Nodrix UI</h1>

      <p>Count: {count}</p>
      <button onClick={() => count.set(count.get() + 1)}>
        Increment
      </button>

      <p>Time: {time}</p>
    </div>
  );
}

JSX Configuration

Nodrix UI uses its own JSX runtime.

In tsconfig.json:

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "nodrix-ui"
  }
}

React is not required.

Requirements

• Node.js 18+
• npm 9+

Related Packages

• nodrix-ui — Core framework and runtime
• create-nodrix-ui — Project scaffolding CLI

License

MIT © Rohit Mengji