https://github.com/alibaba/canvas-ui
UI Renderer runs on top of the HTML5 Canvas
https://github.com/alibaba/canvas-ui
canvas react typescript
Last synced: 8 months ago
JSON representation
UI Renderer runs on top of the HTML5 Canvas
- Host: GitHub
- URL: https://github.com/alibaba/canvas-ui
- Owner: alibaba
- License: mit
- Created: 2021-12-20T10:57:34.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2025-10-09T14:15:05.000Z (9 months ago)
- Last Synced: 2025-10-10T21:10:01.917Z (9 months ago)
- Topics: canvas, react, typescript
- Language: TypeScript
- Homepage: https://alibaba.github.io/canvas-ui/
- Size: 6.21 MB
- Stars: 185
- Watchers: 7
- Forks: 20
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Canvas UI is a general UI renderer runs on HTML Canvas. https://alibaba.github.io/canvas-ui/
It provides a series of React components, allowing developers to quickly build Canvas-based applications using their existing knowledge.
It also features a DOM-like scene tree, enabling developers to manipulate elements drawn in Canvas just like they would manipulate DOM elements.
```tsx
import React from 'react'
import { Canvas, Text, Flex } from '@canvas-ui/react'
export default () => {
const containerStyle = {
width: 250,
flexDirection: 'column'
}
const textStyle = {
maxWidth: containerStyle.width,
maxLines: 1,
}
return (
私はガラスを食べられます。それは私を傷つけません。
The quick brown fox jumps over the lazy dog.
)
}
```
# Demo
https://stackblitz.com/github/alibaba/canvas-ui/tree/main/examples/kanban
# Features
- Manipulate elements in Canvas just like DOM elements
- Seamlessly integrating with React applications
- Flex layout
- Animation based on [motion](https://motion.dev/)
- Basic text typography capabilities: automatic word wrapping, alignment, text overflow
- CSS styles through the style attribute
- Interaction events: PointerEvents and WheelEvent
- Convenient layering capabilities
- Fully written in TypeScript with complete type definitions
- Rendering in WebWorker (WIP)
# Project Structure
- packages/core
The core of the renderer, providing capabilities such as createElement, events, rendering pipeline, etc.
- packages/react
Canvas UI's official React binding, providing components like ``, ``, etc.
- packages/examples
Component development and testing environment based on Storybook
- tools/
scripts
# Development
```
# Start development mode for core and react
$ pnpm dev
# Start Storybook
$ pnpm dev:storybook
# Run unit tests
$ pnpm test
# Build umd, esm versions
$ pnpm build
```