rnxJS

Reactive Bootstrap components with no build step. For Django, Rails and Laravel developers who want interactivity without standing up a separate single-page app.

npm install @arnelirobles/rnxjscopy

Open the component gallery ↗ Source and full docs on GitHub ↗npm v1.0.0 ↗

The problem

You have a perfectly good server-rendered app. You need one page to be interactive.

The modern answer is to stand up a whole front-end: a build step, a bundler, a second repository, a deployment pipeline, and a team conversation about state management. For an internal tool with fourteen users, that is an absurd amount of ceremony.

The old answer was jQuery, which still works but leaves you hand-wiring the DOM.

rnxJS is the middle. Reactivity and components, in a script tag.

What it does

const { createReactiveState, autoRegisterComponents, loadComponents } = rnx;

const state = createReactiveState({
    searchQuery: '',
    employees: [
        { id: 1, name: 'Alice Johnson', role: 'Engineer' },
        { id: 2, name: 'Bob Smith', role: 'Designer' },
    ],
});

autoRegisterComponents();
loadComponents(document.body, state);

<!-- Two-way binding, in the markup, with no build step -->
<Input data-bind="searchQuery" />

• Around 10KB gzipped with 34 components included. jQuery is roughly 30KB and React roughly 42KB, and neither ships you components.
• No build step. A CDN script tag is a supported way to use it.
• Component tags directly in HTML, plus data-bind for two-way binding.
• Built-in form validation, and an optional Material Design 3 layer over Bootstrap.

Try it

The component gallery is a real deployment, not a screenshot. There are working examples of a dashboard, a data table, forms, a chat view, a shop, a task list and a settings page. Open the source on any of them.

What it is not

It is not for a large, complex single-page application. If you are building one of those, use React or Vue. rnxJS is for the server-rendered app that needs to be a bit more alive, and for internal tools.

46 components, benchmarks, and the jQuery migration guide on GitHub →