Use React and CSS to build UI interfaces on canvas

Document | 中文文档 | Live DEMO | DEMO Code

• React 19.x (peer dependency)

$ pnpm add revas react@19

import React from 'react'
import {render, View, Text} from 'revas'

render(
  <View style={{ flex: 1 }}>
    <Text style={{ fontSize: 20 }}>Revas</Text>
  </View>,
  document.getElementById('container')
)

import React from 'react'
import {render, View, Text} from 'revas'

export class Widget extends React.Component {
  componentDidMount() {
    this.app = render(
      <View style={{ flex: 1 }}>
        <Text style={{ fontSize: 20 }}>Revas</Text>
      </View>,
      document.getElementById('container'),
      this
    )
  }
  componentDidUpdate() {
    this.app.update()
  }
  componentWillUnmount() {
    this.app.unmount()
  }
  render() {
    return <div id="container" />
  }
}

• https://github.com/pinqy520/revas-wxgame-example
• https://github.com/pinqy520/revas-bytegame-example

Revas 2.0 is a major upgrade with breaking changes:

1. Upgrade React to version 19.x:

   pnpm add react@19 react-dom@19

2. Update imports (if using /common export):

   // No changes needed - API is the same
   import { View, Text } from 'revas'
   import { View, Text } from 'revas/common'

The layout engine has been upgraded from yoga-layout-wasm to yoga-layout 3.x:

• For most users: No changes needed. The style API remains the same.
• Performance: Layout calculation is now synchronous (no async initialization).
• Bundle size: Slightly larger due to WASM being bundled differently.

Supported Flexbox properties (unchanged):

• Layout: flex, flexDirection, justifyContent, alignItems, alignSelf, flexWrap
• Sizing: width, height, minWidth, maxWidth, minHeight, maxHeight
• Spacing: padding, margin, borderWidth
• Positioning: position (relative, absolute, static), top, left, right, bottom

For full style reference, see style.ts.

If you're using Revas on custom platforms (WeChat mini-games, ByteDance games), the revas/common export now uses synchronous yoga-layout. Remove any async initialization code:

// v1.x (old)
import { initYoga } from 'revas/common'
await initYoga()  // ❌ No longer needed

// v2.x (new)
import { render } from 'revas/common'
render(...)  // ✅ Works immediately

• Vue - huruji/vuvas by @huruji