explaingit

frejs/fre

★ 3,767TypeScriptAudience · developerComplexity · 3/5LicenseSetup · easy

TLDR

Fre is a tiny React-like JavaScript library for building browser UIs with JSX, hooks, and Suspense. Its standout feature is a concurrent renderer that keeps the page responsive during complex updates by processing work in small chunks instead of one big blocking operation.

Mindmap

mindmap
  root((fre))
    What it does
      UI component library
      Concurrent rendering
      Hooks API
    Tech Stack
      TypeScript
      JSX
      Vite compatible
    Use Cases
      Lightweight React alt
      Responsive UIs
      Lazy loading
    Audience
      Frontend developers
      Vibe coders
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Build a lightweight browser UI with React-like components and hooks when bundle size matters.

USE CASE 2

Drop Fre into a Vite project as a smaller alternative to React with the same JSX workflow.

USE CASE 3

Implement a UI that stays responsive during heavy re-renders using Fre's concurrent scheduler.

USE CASE 4

Use Fre's Suspense and ErrorBoundary support to lazily load components and catch rendering errors gracefully.

Tech stack

TypeScriptJavaScriptJSXVite

Getting it running

Difficulty · easy Time to first run · 5min

Install via npm and configure Vite's JSX options to point to Fre, no other dependencies required.

Use, modify, and distribute freely for any purpose including commercial use, as long as you keep the copyright notice. MIT license.

In plain English

Fre is a small JavaScript library for building user interfaces in the browser. It works similarly to React in that you build your UI out of components, use JSX syntax (an HTML-like shorthand embedded in JavaScript), and manage state through functions called hooks. The library is deliberately tiny, which means less code is sent to users' browsers. The library's main technical feature is a concurrent mode scheduler. This means Fre can pause and resume rendering work in small chunks rather than blocking the browser with one large update. The project describes this as a coroutine scheduler inside JavaScript, and it is also called time slicing. The result is a UI that can stay responsive even during complex updates. Fre implements this using a fiber-based internal structure, which is where its name comes from. Fre includes a hooks API that mirrors React's: useState, useEffect, useReducer, useLayout, useCallback, useMemo, useRef, and useContext are all available. It also supports Suspense (for lazily loading components that have not been fetched yet), ErrorBoundary (for catching rendering errors in one part of the page without crashing the whole UI), and Fragments (for grouping multiple elements without adding extra HTML wrapper elements). Installing Fre is done via npm or yarn. It supports JSX and can be configured for use with Vite by setting a few build options. The keyed reconciliation algorithm it uses for tracking changes to lists is described in the README as minimal and as supporting preprocess and offscreen rendering as well. The project is open source under the MIT license.

Copy-paste prompts

Prompt 1
I want to build a small todo app using Fre instead of React. Show me a component using useState and JSX that adds and removes items from a list.
Prompt 2
How do I configure Vite to use Fre as the JSX runtime so I can write Fre components without importing the library in every file?
Prompt 3
I have a Fre component that renders a large list and causes jank. How does Fre's concurrent scheduler help and how do I make sure I'm using keyed reconciliation correctly?
Prompt 4
Show me how to use useEffect and useContext in Fre to fetch data from an API and share it across multiple components.
Open on GitHub → Explain another repo

← frejs on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.