revas

Use React and CSS to build UI interfaces on canvas

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

Requirements

• React 19.x (peer dependency)

Install

$ pnpm add revas react@19

Usage

Render to a DOM

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')
)

Render to a DOM rendered by React

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" />
  }
}

Render to a custom canvas api

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

DEMO

Upgrading from v1.x to v2.x

Revas 2.0 is a major upgrade with breaking changes:

Breaking Changes

Change	v1.x	v2.x
React version	React 17.x	React 19.x (required)
Layout engine	yoga-layout-wasm (async)	yoga-layout 3.x (sync)
Module format	CJS + ESM	ESM-first with CJS fallback

What You Need to Do

• Upgrade React to version 19.x:

  pnpm add react@19 react-dom@19
  

• Update imports (if using /common export):

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

Layout Engine Changes

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.

For Custom Canvas Platforms

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

Other Framework

• Vue - huruji/vuvas by @huruji