The No-Build Revolution StrideJS" width=

A zero-dependency JavaScript library for real programmers. No node_modules. No compilation steps. True Separation of Concerns.

Plays Well with the Whole Neighborhood

You don't have to quit your current stack. StrideJS is incrementally adoptable. Use it to power a isolated marketing page, a fast dashboard widget, or a legacy backend template. It operates entirely within its own scoped DOM target, meaning it can run safely alongside React, Vue, Angular, or traditional server-rendered applications without stepping on any toes.

Pure HTML Views

UI/UX designers work in raw HTML. No JSX abstractions, no hidden logic gates. If you change a layout, you don't break the application runtime.

Native JS Controllers

Engineers write standard JavaScript objects using standard browser APIs. Stride leverages native Proxies for reactive data synchronization.

Zero Build Debt

Bypass Vite, Webpack, and npm entirely. Drop Stride in via a single native ES module import link. It will never break on a tooling update.

Lightweight Footprint

Under 100 lines of highly optimized core engine code. It loads instantly and updates the DOM using explicit, direct pathways rather than a heavy Virtual DOM overhead.

Example 1: The Core Foundation

Basic reactivity and event mapping with clean separation.

The View (HTML)

<!-- Pure semantic HTML -->
<div id="app-core">
  <h1 s-text="title"></h1>
  <button s-click="increment">Clicks: <span s-text="count"></span></button>
</div>

The Controller (JavaScript)

// Standard browser runtime. No bundle step required.
import Stride from 'https://cdn.stridejs.com/v1/stride.min.js';

Stride.create('#app-core', {
  state: {
    title: "Hello World",
    count: 0
  },
  methods: {
    increment() {
      this.state.count++;
    }
  }
});

Example 2: Two-Way Data Binding & Array Collections

How real applications handle user inputs and repeat loops without injecting ugly inline string logic inside the template.

The View (HTML)

<div id="app-list">
  <!-- Two-Way binding updates the data model automatically as the user types -->
  <input type="text" s-model="newItemText" placeholder="Add a developer requirement...">
  <button s-click="addItem">Add Item</button>

  <!-- Clearest iteration mechanism: The engine clones the inner block for each array element -->
  <ul s-loop="items">
    <li s-text="item.name"></li>
  </ul>
</div>

The Controller (JavaScript)

import Stride from 'https://cdn.stridejs.com/v1/stride.min.js';

Stride.create('#app-list', {
  state: {
    newItemText: "",
    items: [
      { name: "Zero build configurations" },
      { name: "Zero legacy package fatigue" }
    ]
  },
  methods: {
    addItem() {
      if (this.state.newItemText.trim() === "") return;
      
      // Arrays are wrapped in Proxies too, making mutation trigger automatic UI rendering
      this.state.items.push({ name: this.state.newItemText });
      this.state.newItemText = ""; // Clears input field natively
    }
  }
});