https://github.com/pinqy520/revas

Use React and CSS to build UI interfaces on canvas
https://github.com/pinqy520/revas

canvas flutter react react-canvas react-native reactjs yoga yoga-layout

Last synced: about 2 months ago
JSON representation

Use React and CSS to build UI interfaces on canvas

• Host: GitHub
• URL: https://github.com/pinqy520/revas
• Owner: pinqy520
• License: mit
• Created: 2020-02-14T19:48:06.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2025-05-13T13:55:47.000Z (5 months ago)
• Last Synced: 2025-07-18T04:13:02.208Z (3 months ago)
• Topics: canvas, flutter, react, react-canvas, react-native, reactjs, yoga, yoga-layout
• Language: TypeScript
• Homepage: https://pinqy520.github.io/demo/revas-pwa/
• Size: 44.4 MB
• Stars: 127
• Watchers: 5
• Forks: 15
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-github-star - revas

README

          


  

  


  

    

  





  Use React and CSS to build UI interfaces on canvas





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



## Install

``` bash

$ yarn add revas react

```

## Usage

### Render to a DOM

```jsx

import React from 'react'

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

render(

  

    Revas

  ,

  document.getElementById('container')

)

```

[![Edit purple-browser-h56ht](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/purple-browser-h56ht?fontsize=14&hidenavigation=1&theme=dark)

### Render to a DOM rendered by React

```jsx

import React from 'react'

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

export class Widget extends React.Component {

  componentDidMount() {

    this.app = render(

      

        Revas

      ,

      document.getElementById('container'),

      this

    )

  }

  componentDidUpdate() {

    this.app.update()

  }

  componentWillUnmount() {

    this.app.unmount()

  }

  render() {

    return 


  }

}

```

[![Edit reverent-river-vbypp](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/reverent-river-vbypp?fontsize=14&hidenavigation=1&theme=dark)


### Render to a custom canvas api

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

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

## DEMO



  



## Other Framework

- Vue - [huruji/vuvas](https://github.com/huruji/vuvas) by [@huruji](https://github.com/huruji)