yarn add @meonode/ui

Build React UIs with Type-Safe Fluency

Without JSX Syntax

A structured approach to component composition with built-in theming, prop separation, and dynamic children handling.

Discord Get Started

Why Use MeoNode

No JSX Required

Write UI with plain JavaScript functions — no build transforms or syntax hacks.

Type-Safe UI

Static typing for layouts, props, and structure. Safer refactors, better DX.

Composable by Design

Build UIs as function trees — easily reusable, abstractable, and intuitive.

CSS-First Prop Styling

Define visual styles like `padding`, `gap`, or `color` directly through intuitive props.

Powered by @emotion/react

Leverages the power of Emotion for fast, flexible, and dynamic styling in React apps.

Theme-Aware by Design

Style with your own semantic tokens like `theme.primary` or `theme.spacing.md`. Define your theme object — MeoNode integrates it seamlessly.

Optimized for React

MeoNode UI is designed exclusively for React — ensuring seamless integration in tools like Vite, Next.js, and more.

No JSX? Here’s Why

JSX is Great — But Optional

JSX is convenient, but it comes with a cost — you need build steps, transforms, and special tooling to parse it.

MeoNode UI skips the JSX layer entirely. You build components using plain JavaScript functions — with full type safety, no syntax extensions, and no magic.

Compare Side by Side

JSX

<Card variant="outlined" style={{ padding: 16 }}>
  <h1>Hello</h1>
  <p style={{ color: '#555' }}>
    Welcome to the jungle
  </p>
  <button
    disabled={loading}
    onClick={() => handleClick('hello')}
    style={{ marginBlockStart: 12 }}
  >
    Click me
  </button>
</Card>

MeoNode UI

Card({
  variant: 'outlined',
  padding: 16,
  children: [
    H1('Hello'),
    Text('Welcome to the jungle', {
      color: '#555'
    }),
    Button('Click me', {
      disabled: loading,
      onClick: () => handleClick('hello'),
      marginBlockStart: 12,
    }),
  ],
})

Both do the same thing. One needs JSX compilation. The other is just JavaScript.

No Babel. No TSX. No Build Surprises.

Because MeoNode is just function composition, there's no need for Babel, JSX transforms, or .tsx files. This leads to faster builds, simpler tooling, and less mental overhead.

Bonus: Code Generation and Meta UI

Since UIs are defined as data (not syntax), you can dynamically generate, serialize, or manipulate them just like any other object.

Live Playground

Getting Started

Install

Add MeoNode UI to your project using Yarn:

import { Root, H1, Column, Text } from '@meonode/ui'

export default function FirstComponent() {
  return Root({
    children: Column({
      gap: 20,
      children: [
        H1('Hello, MeoNode!'),
        Text('Built without JSX'),
      ],
    }),
  }).render()
}