Skip to main content

RefractFramework

A simple JavaScript tool that makes building websites easier. Your website updates automatically when things change.

Fast
Super Quick
Auto
Updates Itself
Easy
Simple to Use
Start NowLearn HowAll Features
Counter.jsx
import { createApp, createComponent } from 'refract';

const Counter = createComponent(({ lens }) => {
  const count = lens.useRefraction(0);
  const theme = lens.useRefraction('light');
  
  const increment = () => count.set(prev => prev + 1);
  const toggleTheme = () => theme.set(
    prev => prev === 'light' ? 'dark' : 'light'
  );
  
  return (
    <div className={`counter ${theme.value}`}>
      <h2>Count: {count.value}</h2>
      <button onClick={increment}>
        Add One
      </button>
      <button onClick={toggleTheme}>
        {theme.value === 'light' ? 'Dark Mode' : 'Light Mode'}
      </button>
    </div>
  );
});

createApp(Counter).mount('#root');

Why Use Refract?

Simple tools that make building websites fun and easy

Updates Automatically

When you change something in your code, your website updates by itself. No need to refresh the page or write extra code to make things work. It just happens automatically.

Learn How It Works →

Easy to Build With

Make pieces of code that you can use again and again. Build websites with small parts that work together. Keep your code organized and easy to understand.

See Examples →

Beginner Friendly

Uses simple JavaScript that looks familiar. Comes with helpful error messages when something goes wrong. Great tools to help you learn and build faster.

Start Learning →

What Makes It Great

Fast, small, and works with all your favorite tools

SIZE
Very Small
File Size
SPEED
Super Fast
Speed
TYPE
Built In
TypeScript
COMPAT
Everything
Works With

Ready to build something cool?

Start BuildingSee Examples