Refract | The Lightweight Virtual DOM Library

The Lightweight
Virtual DOM Library

A minimal, React-like library with fiber-based reconciliation. Keep your bundles tiny while keeping the API you love.

npm install @ipxjs/refract

Tiny Bundle Size

Significantly smaller footprint than React. Ideal for performance-critical applications and micro-frontends.

Modular Entrypoints

Choose between @ipxjs/refract/core for basics or @ipxjs/refract/full for the complete API. Be purposeful with your bundle size.

Familiar Hooks API

Standard Hooks like useState, useEffect, useMemo, and useContext work exactly as you expect.

Counter.js

import { render, useState } from '@ipxjs/refract';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

render(<Counter />, document.getElementById('app'));

Live Preview

Loading interactive demo...

Rendered with @ipxjs/refract

Fiber-based reconciliation ensures minimal DOM patches.

Built for Modern Apps

Context API: Built-in dependency injection for complex state management.
Automatic Batching: Updates are batched via microtasks for performance.
SVG Support: Full namespace support for vector graphics.
Security First: Sanitized dangerouslySetInnerHTML by default.

API Surface

createElement render useState useEffect useMemo useCallback useReducer createContext memo createRef