Solid

Register the root component

import ResourcesWebGPU from '@uno.build/ui/ResourcesWebGPU'
import UI from '@uno.build/ui/UI'
import { registerRootComponent } from '@uno.build/ui/solid'
import App from './App.jsx'

const canvas = document.querySelector('canvas')
const resources = await ResourcesWebGPU.create({ canvas })
const { ui } = await UI.create({ resources })

// Solid
const solid = registerRootComponent(App, { ui })
solid.mount({})

Solid updates call ui.update() automatically after reactive changes settle. Keep the viewport setup and render loop from First Layout to draw the UI with ui.draw().

Use one registered root per UI and call solid.mount(props) once to mount it. Drive subsequent updates with signals; another mount() call creates a new root instead of updating the existing root's props.

Call solid.unmount() to remove the component tree and run its cleanup before destroying the UI. It does not destroy the UI or dispose shared resources; see Destroy.

Configure the compiler

The uno integration uses Solid 2. With Vite, pass compilerConfig to the Solid plugin:

// vite.config.js
import { defineConfig } from 'vite'
import solid from '@solidjs/vite-plugin'
import { compilerConfig } from '@uno.build/ui/solid/config'

export default defineConfig({
  plugins: [solid(compilerConfig)],
  resolve: {
    alias: {
      'uno-ui/solid': '@uno.build/ui/solid',
    },
  },
})

compilerConfig sets generate: 'universal' so JSX creates uno nodes. It generates imports from uno-ui/solid, which the alias above resolves to @uno.build/ui/solid.

The demo below compiles JSX directly in the browser with Babel Standalone and @dom-expressions/babel-plugin-jsx, using compilerConfig.solid.

Components

@uno.build/ui/solid exports five components: View, Text, Image, ScrollView, and Input. They render uno nodes and share the properties and event props below. Each component's section describes its additional props and behavior.

<View>

View is a container for layout, backgrounds, and child components. Rendering a View creates an uno node, equivalent to calling ui.create() in the imperative API. Solid adds the node to its parent and manages its updates and removal. Use Solid signals to update its styles in response to events. Read each signal by calling its getter inside JSX.

// SolidView.jsx
import { createSignal } from 'solid-js'
import { View } from '@uno.build/ui/solid'

export default function App() {
  const [isHovered, setHovered] = createSignal(false)

  return (
    <View
      style={{
        width: '100%',
        height: '100%',
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <View
        onPointerOver={() => setHovered(true)}
        onPointerOut={() => setHovered(false)}
        style={{
          width: '200px',
          height: '150px',
          backgroundColor: '#4377bb',
          opacity: isHovered() ? '0.5' : '1',
        }}
      />
    </View>
  )
}

<Text>

Use Text for all text content. Follow Texts & Fonts to load and register a font before rendering the examples below.

import { View, Text } from '@uno.build/ui/solid'

export default function App() {
  return (
    <View style={{ padding: '16px', gap: '8px' }}>
      <Text style={{ color: '#ffffff' }}>Hello from Solid.</Text>
    </View>
  )
}

A string directly inside View, such as <View>Hello</View>, is invalid. Text is a leaf node: it accepts strings, numbers, reactive expressions, and fragments containing only text, but cannot contain uno nodes. To use different styles within a line, place sibling Text components inside a View with flexDirection: 'row'.

<Image>

Image displays a registered image resource. It does not download the image from src. Follow Images to load and register the asset before calling solid.mount({}).

With neither dimension set, the component uses the registered image size. Dimensions in style take precedence over the width and height props.

Use the same identifier as the component's src:

import { Image, View } from '@uno.build/ui/solid'

export default function App() {
  return (
    <View style={{ flexDirection: 'row', gap: '16px' }}>
      <Image src="assets/coin.png" width="128px" />
      <Image src="assets/coin.png" width="160px" height="100px" style={{ objectFit: 'contain' }} />
    </View>
  )
}

<ScrollView>

ScrollView clips its children and provides vertical scrolling by default.

Give it a limited height so that content can overflow the viewport:

import { For } from 'solid-js'
import { ScrollView, Text, View } from '@uno.build/ui/solid'

const ITEMS = Array.from({ length: 20 }, (_, index) => index + 1)

export default function App() {
  return (
    <ScrollView style={{ width: '240px', height: '200px' }}>
      <For each={ITEMS}>
        {(item) => (
          <View style={{ padding: '12px', flexShrink: '0', backgroundColor: '#4377bb' }}>
            <Text style={{ color: '#ffffff' }}>Item {item}</Text>
          </View>
        )}
      </For>
    </ScrollView>
  )
}

Set horizontal to arrange the content in a row and enable horizontal scrolling:

<ScrollView horizontal style={{ width: '240px', height: '80px' }}>
  <For each={ITEMS}>
    {(item) => (
      <View style={{ width: '120px', padding: '12px', flexShrink: '0' }}>
        <Text style={{ color: '#ffffff' }}>Item {item}</Text>
      </View>
    )}
  </For>
</ScrollView>

The style prop applies to the viewport. Use the onScroll event to respond to scrolling.

<Input>

Input is a visual component controlled by value. It displays text, a placeholder, and a blinking caret while focused.

Pass the displayed text through value:

import { Input } from '@uno.build/ui/solid'

export default function App(props) {
  return (
    <Input
      value={props.value ?? ''}
      placeholder="Your name"
      style={{ width: '240px', height: '40px', padding: '8px', color: '#111827' }}
    />
  )
}

Input does not create a DOM input or handle IME, selection, or clipboard input. To support typing in a browser, connect a native <input> outside the uno component tree, synchronize its value with a Solid signal, and manage its focus through onFocus and onBlur. See the demo below for a complete example.

Event props

All five components accept the following event props. Pass a handler function to subscribe; omit the prop or set it to null or undefined to remove your handler. Solid manages the listener registration and cleanup.

Handlers receive uno events rather than DOM events. Each event includes these common members:

Events bubble through the uno node tree, so a component's handler can receive events from its descendants. Event-specific data, such as pointer coordinates, wheel deltas, scroll offsets, and focus transitions, is documented in Events.

Refs and handles

In Solid, refs on View, Text, and Image receive the uno node directly: use node.layout or node.focus(), without nodes.main. ScrollView and Input instead expose compound handles. Import ScrollViewHandle and InputHandle from @uno.build/ui/solid when using TypeScript.

nodes.caret is null when the input is unfocused. focus() and blur() change uno focus; they do not open a platform keyboard or provide text input.

useUI()

useUI() returns the UI passed to registerRootComponent. Call it during component initialization inside that registered component tree. For example, a component can read the original dimensions of the registered assets/coin.png image:

import { Text, useUI } from '@uno.build/ui/solid'

export function ImageSize() {
  const ui = useUI()
  const { width, height } = ui.resources.getImageSize('assets/coin.png')

  return (
    <Text style={{ color: '#ffffff' }}>
      Image size: {width} × {height}
    </Text>
  )
}

Demo