https://nuejs.org/blog/standards-first-react-alternative/

Home Docs Blog Vision Hyper Standards first React alternative > Slack
8.5k [dots] Back May 8, 2025

Introducing Hyper -- Standards first React alternative (Developer
Preview)

[tero] Tero Piirainen @tipiirai

Hyper is a standards first markup language for building user
interfaces. It enables developers (and AI models) to generate complex
UIs with amazingly clean syntax.

[hyper-banner-dark-big]

 Project goals

 1. Standards first: User interfaces should be assembled with HTML,
    styled with CSS, and enhanced with JavaScript.

 2. Simplicity: UI composition should be easy and require as few
    idioms and abstractions as possible, both on client and server
    (SSR).

 3. Design Systems: Design should be a separate subsystem, easily
    accessible for developers who care about and understand design.

 4. Scalability: Complex UIs should retain simplicity as the
    application grows.

To understand how these goals are met, we use React as a
counter-example because it's the opposite of Hyper's
architecture and design goals. React embraces a monolithic
architecture where logic, structure, and styling are mixed together,
while Hyper is what React 1.0 (2013) originally envisioned: just a
headless view layer.

Let's study the difference in more detail:

 Compare: React vs Hyper

  * Simple components

  * Complex components

  * Design systems

  * Scalability

 Simple components

Below is a basic <table> component defined in three ways:

Modern ReactModern React Old school ReactOld school React HyperHyper

 1. Modern React Modern React represents a common approach to
    building user interfaces today using component libraries such as
    ShadCN/UI, Material UI, Chakra, or Tailwind Catalyst. In this
    example, we chose ShadCN as it&apos;s gained significant
    popularity in recent years and has strong AI tool support. For
    example, Claude and ChatGPT offer built-in support for ShadCN in
    their code previews. Source * Demo

 2. Old school React is how React components were built back in the
    days when styling was decoupled from the component code. Source *
    Demo

 3. Hyper demonstrates the standards-first approach. Source * Demo

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

 Complex components

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

Modern ReactModern React Vanilla TSXVanilla TSX HyperHyper

 1. Modern React is assembled according to ShadCN&apos;s data table
    documentation. The bundled JavaScript is 91.3KB. Source * Demo

 2. Vanilla TSX uses useState and useMemo to implement the added
    functionality, and the HTML is tagged the old school way with
    numerous class names.

 3. Hyper uses semantic HTML with minimal class names and two
    instance methods for sorting and filtering. The resulting JS is
    only 3.9KB minzipped (1.2KB + 2.7KB for hyper.js). Source * Demo

 Design systems

Here&apos;s an example dashboard assembled with Hyper:

[minimalist]

Source * Demo

Here is the same dashboard, but with `Ramsian' look and feel:

[ramsian-bi]

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

 Modern React: tightly coupled design

This kind of design swap becomes a large programming effort when
design choices are coupled into components via CSS-in-JS or Tailwind.
For example, in ShadCN, to change the typography of your headings,
you need to edit alert-dialog.tsx, alert.tsx, card.tsx, dialog.tsx,
drawer.tsx, and sheet.tsx. This requires understanding of idioms like
data-slot, {...props}, cn(), clsx(), and twMerge(). Here&apos;s the
code for the title and description elements:

[shadcn-typ]

Tight coupling can also create a maintenance issue. For example,
ShadCN&apos;s `New York' theme duplicates their default theme,
resulting in 40,000+ lines of additional TSX code to maintain.

While you definitely can decouple your styling from your React
components, this pattern is rarely seen in real-world applications.
Instead, the use of vanilla CSS is often discouraged due to concerns
about `global namespace pollution' or other reasons.

 Hyper: decoupled design system

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:

[copy]

^// 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 key issues in modern React:

 1. Truly reusable components across projects and styling contexts

 2. Central design system easily maintainable from the same place

 3. Zero boilerplate due to strict separation of concerns

Nue actually enforces you to external design system. Tight coupling
in any form: CSS-in-JS, class name abuse, component-specific <style>
elements, inline style attributes, or cryptic class name values like
size-[max(100%,2.75rem)] are systematically eliminated.

 Scalability

Here&apos;s how simplicity scales: a full-scale app lighter than a
React button:

Hyper&apos;s standard first approach establishes a different
paradigm, centered around simplicity:

[react-button-vs-nue-spa-big]

Your application starts simple, and remains simple as the project
grows. Source * Demo

 Note

The above app is written with Nue JS, which Hyper eventually
replaces. When converted to Hyper, the app is even smaller due to
smaller executable and smaller components.

---------------------------------------------------------------------

 Get started with Hyper

First, install Bun:

[copy]

^# Install Bun
curl -fsSL //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

[copy]

^# Install Hyper
bun install nue-hyper

 Learn Hyper

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

 FAQ

 How is this different from Svelte and Vue?

While Svelte and Vue both offer a more lightweight development
environment than React, they still diverge from Hyper&apos;s
standards-first vision. Though they provide better separation of
concerns with their component structure, many popular patterns in
these ecosystems still encourage coupling design with components
through scoped CSS, CSS-in-JS libraries, or Tailwind integration.

 What is Nue?

Nue is a website/webapp generator based on Nue JS templating. Hyper
is the next evolution of Nue JS, which it will replace. All Nue
projects reside under the same monorepo. Here&apos;s how the product
hierarchy will eventually look:

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

 Isn&apos;t this just another framework?

Hyper takes a different approach than what this question suggests.
Rather than adding to the ecosystem of tools and abstractions, Hyper
aims to reduce tooling and complexity by returning to web standards.
It eliminates the need for many specialized frameworks, libraries,
and practices that have emerged to solve challenges within the React
ecosystem. Our goal is to offer a simpler path reducing the need for
constantly learning new frameworks and tools.

 Why are standards so important?

Standards offer significant long-term benefits:

 1. Timeless skills: Knowledge of HTML, CSS, and JavaScript
    fundamentals remains valuable across decades, while
    framework-specific knowledge can become outdated.

 2. Sustainable products: Applications built primarily with web
    standards tend to require less frequent and less disruptive
    rewrites.

Consider how React&apos;s ecosystem has evolved over time: Class
components gave way to hooks, state management shifted from Redux to
Context to various alternatives like Zustand and Jotai, and styling
approaches continue to evolve from Styled Components to Emotion to
CSS Modules and beyond. Each shift requires developers to learn new
patterns and often refactor existing code.

 What&apos;s next in line?

We make Hyper 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&apos;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.

 How can a small library challenge React&apos;s dominance?

Gradually. To succeed, we need to address the following:

 1. Developer perception: Many frontend developers have come to view
    abstraction layers as essential. As Hyper demonstrates how
    professional UIs can be built without these complexities, this
    perception will shift.

 2. Product completion: Several critical pieces remain in
    development, particularly solid starter templates and
    comprehensive design systems.

Once these challenges are addressed, Hyper has the potential to gain
significant momentum.

 Isn&apos;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&apos;t interfere with the core
architecture. If you have deep CSS expertise, I&apos;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.

Ultimate goal

Our final goal is to build radically simpler stack. We&apos;re
proceeding in three major steps:

Nue roadmap

Join the mailing list to follow our progress and see how our vision
unfolds:

Nue logo

Why Nue FAQ Blog Vision [close] Home Docs Blog Vision GitHub