Top AI Repos — open-source AI, indexed and scored
Top AI Repos tracks AI repositories on GitHub and answers two different questions about each one: is it moving right now, and would you bet a product on it.
Top AI Repos tracks AI repositories on GitHub and answers two different questions about each one: is it moving right now, and would you bet a product on it.
A tutorial on infinite canvas
| Date | Stars |
|---|---|
| 2026-07-24 | 1057 |
| 2026-07-25 | 1058 |
| 2026-07-28 | 1058 |
| 2026-07-30 | 1058 |
| 2026-08-06 | 1058 |
Today
— stars today
This week
— stars this week
This month
— stars this month
Momentum
0.0
growth rate 0.00%/day
# An Infinite Canvas Tutorial [](https://github.com/xiaoiver/infinite-canvas-tutorial/blob/master/LICENSE) [](https://docs.excalidraw.com/docs/introduction/contributing) [](https://github.com/xiaoiver/infinite-canvas-tutorial/actions/workflows/unit-ssr.yml) [](https://coveralls.io/github/xiaoiver/infinite-canvas-tutorial?branch=master) [Online App] | [Self-Deployment Guide] [My free course in Gumroad]. Feel free to rate! [](https://ko-fi.com/U7U71DK7IM) [](https://stackblitz.com/edit/vite-tvhpcpvl?file=main.js) What is an Infinite Canvas? The term "infinite" in [infinitecanvas] is described as follows: - High scalability. Users can freely organize content structures in a non-linear fashion. - Zooming. Emulates the "zoom in" to get an overview and "zoom out" to observe details as in the real world. - Direct manipulation. Provides intuitive editing capabilities for basic shapes, including moving, grouping, and modifying styles. The [infinitecanvas] showcases numerous examples ranging from design tools to creative boards, including some well-known products such as: [Figma], [Modyfi], [Motiff], [rnote], [tldraw], [excalidraw] and so on. As a front-end developer, I am very interested in the rendering technologies involved. Although tldraw, excalidraw, and others generally use more user-friendly technologies like Canvas2D/SVG, there are also many editors and design tools in the JS and Rust ecosystems that use more low-level rendering technologies for 2D graphics with GPU acceleration to achieve better performance and experience: - [Figma] uses a tile-based rendering engine written in C++, compiled into WASM and then calls WebGL and WebGPU for rendering. - [Motiff] also uses a tile-based rendering engine with WebGL. - [Modyfi] uses [wgpu] from the Rust ecosystem, also compiled into WASM and then calls WebGL2 for rendering. - [Zed] uses GPUI to render rectangles, shadows, text, images, and other UI elements. - [Vello] and [xilem] experimentally use Compute Shader for 2D rendering. Therefore, in this tutorial, I hope to implement the following features: - Use [@antv/g-device-api] as a hardware abstraction layer, supporting WebGL1/2 and WebGPU. - Use [Becsy] to implement high-performance, highly scalable systems based on the ECS architecture. - Use SDF (Signed Distance Field) rendering for circles, ellipses, rectangles, etc. - GPU-accelerated text and Bezier curve rendering. - Use [rough.js] to support hand-drawn styles. - Use CRDT (Conflict-free Replicated Data Type) to support collaborative [Yjs]. - Referencing [mapbox] and [Figma], attempt to use tile-based rendering. I hope to rewrite the rendering part of the canvas with Rust in the future, but the current project completion is still relatively low: - [wgpu] is a very reliable hardware abstraction layer, which can even implement the backend for [piet]. - Shaders can basically be reused. - Hand-drawn styles can use [rough-rs]. - [y-crdt] is the Rust implementation of [Yjs]. Let's get started! ## Getting Started The course project uses pnpm workspace, so you need to install pnpm first. ```bash pnpm i ``` After entering the course directory, run Vite devserver: ```bash cd packages/lesson_001 pnpm run dev ``` Or you can run the site locally: ```bash pnpm run build cd packages/site pnpm run dev ``` If you want to use it in your own project, you can refer to: - [@infinite-canvas-tutori
Excerpt of 28,461 characters
Read on GitHub
1.1k
50
15
3
1
1
1
1
Would you bet a product on this? Bounded 0–100 and slow moving.
matched fp:41bba568b682f54d, topic:tutorial, name:tutorial, desc:tutorial