gitwtfhub

wtf is fre?

frejs/fre — explained in plain English

Analysis updated 2026-06-26

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

TL;DR

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

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

Why would anyone build with this?

REASON 1

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

REASON 2

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

REASON 3

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

REASON 4

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

What's in the stack?

TypeScriptJavaScriptJSXVite

How it stacks up

frejs/freartsy/eigenupstash/jstack
Stars3,7673,7683,769
LanguageTypeScriptTypeScriptTypeScript
Setup difficultyeasyhardmoderate
Complexity3/54/53/5
Audiencedeveloperdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you spin it up?

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.

Wtf does this do

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.

Yoink these 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.

Frequently asked questions

wtf is fre?

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.

What language is fre written in?

Mainly TypeScript. The stack also includes TypeScript, JavaScript, JSX.

What license does fre use?

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

How hard is fre to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is fre for?

Mainly developer.

View the repo → Decode another repo

This repo across BitVibe Labs

Don't trust strangers blindly. Verify against the repo.