Enhance existing HTML with reactive behavior without rewriting them. Zero build process, framework-agnostic integration, and enterprise-grade features for scalable applications.
600 static HTML divs enhanced into Conway's Game of Life with zero build process
Demonstration of progressive enhancement: Static HTML transformed into an interactive cellular automaton
This demonstrates progressive enhancement at a scale typically handled by compiled frameworks, but with the simplicity and accessibility of standard HTML and JavaScript.
JurisJS works alongside any existing framework or library - enhance what you already have
Enhance React components with progressive behavior. Add reactivity to existing JSX without refactoring.
Layer JurisJS on top of Vue applications. Perfect for migrating legacy components progressively.
Modernize jQuery applications without complete rewrites. Add reactive state to existing DOM manipulation.
Complement HTMX with client-side reactivity. Handle complex state while HTMX manages server communication.
Enhance Angular applications with progressive behavior. Add JurisJS to existing components without touching TypeScript.
Perfect companion for vanilla JavaScript projects. Add reactive state without framework complexity.
No build process changes, no configuration. Just include JurisJS and start enhancing.
Choose what to enhance. Legacy code stays unchanged, new features get reactive behavior.
JurisJS plays nice with all frameworks. No namespace collisions or interference.
Real working demo with the exact code that powers it
Working HTML that functions without JavaScript
<div class="count-display" id="simple-count">0</div>
<button class="count-button" id="increment-simple">
👆 Click Me
</button>Add reactivity with the enhance() API
const app = new Juris();
// Enhance the button with click behavior
app.enhance('#increment-simple', (props, { getState, setState }) => ({
onClick: () => {
const current = getState('counter', 0);
setState('counter', current + 1);
}
}));
// Enhance the display with reactive content
app.enhance('#simple-count', (props, { getState }) => ({
textContent: () => getState('counter', 0),
style: () => ({
color: getState('counter', 0) > 5 ? '#22c55e' : '#c4b5fd'
})
}));Measured performance characteristics compared to common approaches
Real-world measurements of different approaches to building interactive web applications.
These measurements show total time from initial request to full interactivity:
The key insight: By starting with working HTML and enhancing in place, we eliminate the overhead of virtual DOM reconciliation and hydration complexity.
Progressive enhancement eliminates framework tax by working with the browser's natural behavior rather than replacing it. The result is faster time to interactive with simpler architecture.
Start enhancing your existing HTML with reactive behavior without rewriting them. No build process required.