# canvas-ui

**Repository Path**: alibaba/canvas-ui

## Basic Information

- **Project Name**: canvas-ui
- **Description**: UI Renderer runs on top of the HTML5 Canvas
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-10-31
- **Last Updated**: 2026-01-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<img width="248" alt="canvas-ui-logo" src="https://user-images.githubusercontent.com/180445/147241118-4fb09f35-8bc0-449b-8ab1-045caa9eb726.png">

Canvas UI is a general UI renderer runs on HTML Canvas. https://alibaba.github.io/canvas-ui/

<hr>

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 (
    <div style={{ height: '100px' }}>
      <Canvas>
        <Flex style={ containerStyle }>
          <Text style={ textStyle }>私はガラスを食べられます。それは私を傷つけません。</Text>
          <Text style={ textStyle }>The quick brown fox jumps over the lazy dog.</Text>
        </Flex>
      </Canvas>
    </div>
  )
}
```

# Demo

https://stackblitz.com/github/alibaba/canvas-ui/tree/main/examples/kanban

![canvas-ui-kanban-demo](https://alibaba.github.io/canvas-ui/assets/images/stackblitz-aa46daf95c93384d7fee39a81805f909.png)


# 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 `<View />`, `<Text />`, 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

```