A modern JavaScript framework that makes building reactive user interfaces simple, predictable, and performant. Experience the power of optical composition and automatic state management.
See how simple reactive components can be:
import { createComponent, createApp } from "refract";
const Counter = createComponent(({ lens }) => {
const count = lens.useRefraction(0);
return (
<div>
<h2>Count: {count.value}</h2>
<button onClick={() => count.set(count.value + 1)}>
Increment
</button>
</div>
);
});
const app = createApp(Counter);
app.mount("#root");
Everything you need to build modern reactive applications
Reactive state that automatically updates your UI when data changes. No manual subscriptions or complex state management.
Scoped access to reactive features with proper isolation. Each component gets its own lens for clean separation.
Reusable logic patterns that can be composed together. Build complex behaviors from simple, testable pieces.
Refract combines the best ideas from modern frameworks with innovative optical composition patterns to create something truly unique.
State changes automatically propagate through your application. No manual subscriptions or complex state management needed.
Create reusable logic patterns with optics. Compose complex behaviors from simple, testable building blocks.
Just ~5KB gzipped with zero dependencies. Get all the power without the bloat.
TypeScript-first design with excellent tooling support. Build with confidence and speed.
Join thousands of developers building the future with Refract. Get up and running in minutes with our comprehensive documentation.