rnxJS Samples

Interactive demos showcasing the power of rnxJS - The Bootstrap-Native Framework

Zero Build Required 46+ Components ~10KB Gzipped Reactive State

Quick Start

                <!-- Include rnxJS -->
                <script src="https://cdn.jsdelivr.net/npm/@arnelirobles/rnxjs/dist/rnx.global.js"></script>

                <script>
                // Create reactive state
                const state = rnx.createReactiveState({ count: 0 });

                // Register components
                rnx.autoRegisterComponents();

                // Load components
                rnx.loadComponents(document.body, state);
                </script>
            

Standalone HTML Demos

Admin Dashboard

Real-time metrics, data tables, and interactive charts

StatCard DataTable TopAppBar

E-Commerce Shop

Product catalog with filtering, cart, and checkout

Card Modal Search

Form Validation

Built-in validation, reactive forms, and error handling

Input Validation FileUpload

Data Tables

Sorting, filtering, pagination, and row actions

DataTable Pagination Search

Task Manager

Todo app with status tracking and filtering

List FAB Chips

Chat Interface

Real-time messaging with reactive message list

List Input Toast

Settings Panel

Theme switching and preferences management

Tabs Switch Slider

Backend Integration Demos

Django Integration

Complete Django project with django-rnx template tags

                            {% load rnx %}
                            {% rnx_scripts cdn=True theme='bootstrap' %}
                            {% rnx_state user_data 'state' %}
                        

Template Tags Forms Plugins

Location: django-demo/

Express.js Integration

Complete Express app with express-rnx middleware

                            <%- rnx.scripts() %>
                            <%- rnx.state(userData, 'user') %>
                            <%- rnx.component('Button', { ... }) %>
                        

Middleware EJS Helpers

Location: express-demo/

Resources

rnxJS - The Bootstrap-Native Framework for Production Apps

Built with ❤️ by BaryoDev | Licensed under MPL-2.0