yarn add @meonode/uiThe Type-Safe Future of React UI
Build React without JSX using MeoNode UI - a type-safe component library that uses plain JavaScript functions instead of JSX syntax.
No JSX
Type Safe
RSC Ready
Standard React
// The Old Way (JSX)
<div style={{
padding: '24px',
background: theme.primary,
borderRadius: '12px'
}}>
<h1 style={{ fontSize: '2rem' }}>
Hello World
</h1>
</div>MeoNode UI
// The MeoNode Way
Div({
padding: '24px',
background: 'theme.primary',
borderRadius: '12px',
children: H1('Hello World', {
fontSize: '2rem'
})
})Everything You Need, Nothing You Don't
MeoNode UI is built for modern React development.
No JSX Required
Write UI with plain JavaScript functions. No build transforms, no syntax hacks. Just pure, composable code.
function App() {
return Div({
padding: '20px',
children: H1('Hello World')
})
}Type-Safe
Full TypeScript support for every prop, style, and theme token.
TS
Surgical Performance
Memoize at the node level. Skip re-renders without wrapping components.
Theming Engine
Context-based theming with automatic value resolution.
Why We Ditched JSX
It’s not just about syntax. It’s about the fundamental constraints of React development.
The Problem with JSX
JSX is a DSL that requires a build step. It mixes logic and markup in a way that often leads to "prop drilling" and complex conditional rendering patterns. It also masks the true nature of React elements: they are just objects.
The MeoNode Solution
By using plain functions, we unlock the full power of JavaScript. Composition becomes trivial. Type inference is automatic and robust. And because we control the node creation, we can optimize rendering at a granular level that JSX simply cannot match.
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" sx={{ padding: 2, width: '100%', backgroundColor: 'theme.base.deep', color: 'theme.base.content' }}>
<h1>Hello</h1>
<p style={{ color: '#555' }}>
Welcome to the jungle
</p>
<Button
style={{ marginBlockStart: 12 }}
variant={'contained'}
disabled={loading}
onClick={() => alert('hello')}
>
Click me
</Button>
</Card>MeoNode UI
Card({
variant: 'outlined',
sx: { padding: 2, width: '100%', backgroundColor: 'theme.base.deep', color: 'theme.base.content' },
children: [
H1('Hello', { fontSize: '2rem', margin: 0 }),
Text('Welcome to the jungle', {
color: 'theme.base.content',
marginBlock: 8,
}),
Button({
marginBlockStart: 12,
children: 'Click me',
variant: 'contained',
disabled: loading,
onClick: () => alert('hello'),
}),
],
})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:
yarn add @meonode/uiYour First Component
Start building UI using functions, not syntax:
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()
}
What People Say
“It feels elegant, like Flutter. It really simplifies working with React hooks.”
Fullstack Developer
“I am using it for the rest of our projects. It made my UI development way less of a headache.”
Fullstack Web Developer
“It makes developing React applications so much faster and easier.”
Fullstack Developer
Shape the Future of MeoNode
Have ideas? Want to contribute? Connect with us and help evolve UI development.