June 2, 2025

Introducing Hyper — Crush React on every metric (Developer Preview)

Today I'm releasing Hyper: a simple markup language for building user interfaces. It enables developers (and AI models) to generate complex UIs with amazingly clean syntax. It aims to make frontend development an enjoyable experience.

Compare: React vs Hyper

Phase 1: Simple components
Phase 2: Complex components
Phase 3: Reusable components
Phase 4: Scalability

Backstory

Hyper is the new reactive library for Nue, eventually replacing the current Nue JS package. The sole purpose of this library is to embrace simplicity and minimalism. It stands against the complexity and bloat that pervade the current frontend ecosystem. This is particularly evident in modern React components where everything — logic, structure, and styling are mixed together. Hyper, however, is what React 1.0 originally envisioned: just a headless view layer focused on rendering, with clear separation from styling concerns.

Let's study the difference.

Phase 1: Simple components

We begin with the fundamentals: how to define basic UI elements. Below is a simple <table> component defined in three ways:

Modern React: ShadCN <Table> component and TypeScript. The extra boilerplate comes through React patterns and the custom <Table> syntax. Source • Demo
Old school React: JSX with decoupled CSS. More straightforward markup but still needs JavaScript wiring and JSX transformation. Source • Demo
Hyper: Clean, standards- compliant HTML. Table is a <table>. Source • Demo

While these differences might seem minor, they become apparent when we move to more complex components:

Phase 2: Complex components

Next we examine how these approaches handle increasing complexity. Here's the same table component, but now with sorting and filtering:

Modern React (Source • Demo) extends the ShadCN table with features from Tanstack Table. The difference to Hyper (Source • Demo) becomes apparent:

Excessive boilerplate: Through Radix UI, Tanstack Table, and TypeScript interfaces. This results in approximately 170 lines of code, versus 40 lines in Hyper. A 75% increase in code and congitive load.
Abstraction layers: Six layers of abstraction are in play: React, ShadCN, Radix, Tanstack, TypeScript, and Tailwind in 160MB Vite stack. The bundled JavaScript is **91.3KB**Hyper offres the same at 3.9KB (1.2KB + 2.7KB for hyper.js).
Multiple transpilers: ShadCN table requires six different transpilers: ESBuild, JSX Transform, Rollup, TypeScript, Tailwind, and PostCSS. AI models like Claude and ChatGPT cannot generate preview for this large dependency tree. Hyper runs in the browser without compilation, or with single compilation step for a production version.

Phase 3: Reusable components

Here's a simple dashboard assembled with Hyper:

Now, the same dashboard with a Ramsian look:

This transformation required zero changes to component code. Just a 30-line CSS file extending the base design system.

Design system switching is impossible with modern React. Lets see why:

The problem in React: hardcoded design

Modern React components aren't reusable across projects with varying design requirements because the design is hardcoded in the component. Even trivial typography changes (h2 and p) require edits to multiple files. In ShadCN, you need to modify alert-dialog.tsx, alert.tsx, card.tsx, dialog.tsx, drawer.tsx, and sheet.tsx. Each file requires understanding of several React idioms (data-slot, {...props}), utility functions (cn(), clsx(), twMerge()), and primitives like <AlertDialogPrimitive.Title> and <DrawerPrimitive.Description> until these constructs ultimately map to CSS. Here are the title and description elements in the ShadCN .tsx files:

This hardcoding creates a scalability issue. For example, ShadCN's New York theme duplicates their default theme, resulting in 40,000+ lines of additional TSX code. This is a problem that would have been easily solved with CSS inheritance and cascade.

Hyper's solution: decoupled design

By contrast, Hyper colocates your typography concerns into a single CSS file, acting as the single source of truth for your h2 an p element styling:

^{// typography.css}
@layer globals {
  h2 {
    font-size: 1.125em;
    font-weight: 500;
  }
  p {
    color: var(--base-500);
    text-wrap: balance;
    line-height: 1.5;
  }

  ^{// all typography rules "colocated" here}
}

This solves three major issues in modern React:

Reusable components across projects and contexts
Central design system easily maintainable from the same place
Zero boilerplate due to strict separation of concerns

Nue actually enforces you to build simple, reusable components. Tight coupling in any form: CSS-in-JS, class name abuse, component-specific <style> elements, inline style attributes, or cryptic utility classes like dark:bg-lime-400/10 size-[max(100%,2.75rem)]—is systematically eliminated.

These simple units are the secret to truly scalable apps:

Phase 4: Scalability

Here's how simplicity scales: a full-scale app lighter than a single React button:

Hyper establishes an entirely different paradigm, centered around simplicity:

Note

The above app is still written with Nue JS, but when converted to Hyper, the app becomes even smaller with virtually zero boilerplate.

Get started with Hyper

First, install Bun:

^{# Install Bun}
curl -fsSL https://bun.sh/install | bash

Hyper uses Bun for its superior web standards support, built-in JavaScript bundler, minifier, and crushing performance. Check details on why we prefer Bun over Node in our FAQ.

Install Hyper

^{# Install Hyper}
bun install nue-hyper

Learn Hyper

Check examples, API docs, and language syntax from Hyper documentation

FAQ

What is Nue?

Nue is the framework (think Next.js + Astro, but simpler) and Hyper is the language (think React, but simpler). Both are developed under the same monorepo. Here's how the product hierarchy will eventually look like:

Hyperlink is the upcoming router solution. The shield icon represents the close connection to web standards

What's next in line?

We make Hyper more easily accessible to everyone including backend developers, beginners, and AI models in two phases:

Full-stack applications

A demonstration to what Hyper and Nue are capable of:

Intuitive routing and navigation system
Simple cross-component communication
Backend server & database integrations
Three swappable design systems
Deployment to the cloud (runtime agnostic)

Estimate: 3 months.

Generative UIs

A way for you and AI's to generate UIs with minimal effort:

Basic HTML and CSS building blocks
Higher-level compositions
Built-in accessibility and responsivity
Self-documenting API and patterns
Base design system (headless, grid only)

Estimate: 4-5 months.

Isn't this just another framework?

Hyper is quite the opposite of what this question suggests. It ditches hundreds of frameworks/tools/languages/idioms/libraries/practises that attempt to solve problems they introduced within the idiomatic React stack. Hyper puts you on a whole new trajectory where the need for endless frameworks (and this question itself) becomes obsolete. The answer is: simplicity scales. Less is More. KISS.

Why are standards so important?

Standards offer two invaluable benefits:

You'll learn skills that last forever
Your products will last forever

Think of all React-specific technologies that are no longer hot and will eventually turn into technical debt. Class components, Higher Order Components, createClass. Redux/Context/Zustand/Jotai, Webpack, Styled Components/Emotion, Material UI/Chakra... It's an endless cycle to keep your skills and products fresh.

Standards are forever.

What do you mean by generative?

The idea of generative HTML assembly unveils once Hyper, and the core UI primitives are ready. After that, both you and AI models can rapidly generate user interfaces with simple, minimal syntax. No unnecessary junk in your way.

Can Hyper actually challenge the status quo?

Absolutely. To succeed, we need to address two things:

Developer perception: Frontend developers view layers of abstraction as essential. As Hyper demonstrates how professional UIs can be generated without them, this perception will shift.
Finish the product: Several critical pieces remain in development, particularly the generative approach and design systems.

But once these challenges are addressed, Hyper becomes unstoppable.

Isn't the name already in use?

Yes, Hyper a Rust HTTP library, an Electron terminal emulator, and now a HTML-based language syntax. Each serving a unique purpose in different contexts.

Can I contribute?

Yes. Especially ideas that don't interfere with the core architecture. If you have 20+ years of experience with CSS and no wasted years in React, I'd particularly love to connect with you!

Can I give feedback?

Definitely! Join our mailing list to be notified when Hyper officially launches. You can provide feedback as you join.