DOCSEARCHbyAlgolia
Submit Docs

MeoNode UI Documentation

website·Indexed 29 days ago

https://ui.meonode.com

Technical documentation and machine-readable index for MeoNode UI, providing product snapshots and primary documentation routes.

Tokens
382
Snippets
1
Records
4
Agent score
0%

What's inside MeoNode UI

  1. Overview of MeoNode UI function-based composition

    MeoNode UI is a type-safe React UI library that uses function-based composition instead of JSX. It allows developers to build interfaces using node factories (e.g., Div(), Row(), Column(), Button()) and compose existing React components using the Node(Component, props) utility. It supports modern React environments including Vite and the Next.js App Router.

  2. Build and compose UI components with MeoNode UI

    To create UI in MeoNode, use node factories for layout and basic elements. To integrate standard React components into the MeoNode composition tree, use the Node function. Styling is handled directly via props, and theme tokens are resolved using string paths (e.g., theme.primary).
    import { Column, H1, Button, Node } from '@meonode/ui'
import SomeReactComponent from './SomeReactComponent'

function App() {
  return Column({
    gap: 12,
    children: [
      H1('Hello MeoNode', { color: 'theme.primary' }),
      Button('Click me', { backgroundColor: 'theme.secondary' }),
      Node(SomeReactComponent, { value: 42 }),
    ],
  }).render()
}

  3. Handle styling and data props in MeoNode UI

    Props in MeoNode UI that match CSS property names (such as columns, height, width, gap, and content) are treated as styles. If you need to pass a prop with one of these names as data rather than a style, wrap it within the props object to ensure it reaches the component untouched.

  4. Understand the role of @meonode/compiler

    The @meonode/compiler is an optional tool. It does not change the runtime behavior of the code; therefore, it is safe to add or remove, and the application must function correctly without it.