TypeScript Canvas

Open-source TypeScript projects categorized as Canvas

Top 23 TypeScript Canva Projects

  1. excalidraw

    Virtual whiteboard for sketching hand-drawn like diagrams

    Project mention: Spain and Portugal Without Energy | news.ycombinator.com | 2025-04-28

    In my area, "buckets" of average load are prepared ahead of time in coordination between the transporter (who gives the order to shed), the distributer (who implements the shedding operation as close to consumers as possible), and representatives of the state (who define priority areas that can't be load-shed, or that should be load-shed last).

    When yhe time comes, you just shed enough "buckets" to stabilize. Load shedding is not a precise task, when you're at that point, you'd rather load a few more megawatt and be safe, than play with the limits and be sorry.

    > So how do grid operators know what amount of load will be cut if they disconnect point A123

    Opening a line within the grid isn't used to shed load, as the grid is mainly redundant. It's used 1) to protect the line itself (either by letting it trip, or by opening it preventively), or 2) to force power to flow differently through the network, by modifying its impedance. Opening a line from the transport network is not a way to load shed.

    In this totally random example [1], opening the line A-B increases impedance in part of the network, forcing power to re-route by another path, and reduces the load on a separate line that was overloaded.

    [1]: https://excalidraw.com/#json=5l8OS96Wdke6l9YEClQt8,NJ-r2PtiE...

  2. Civic Auth

    Auth in Less Than 5 Minutes. Civic Auth comes with multiple SSO options, optional embedded wallets, and user management — all implemented with just a few lines of code. Start building today.

    Civic Auth logo
  3. echarts

    Apache ECharts is a powerful, interactive charting and data visualization library for browser

    Project mention: Apache ECharts | news.ycombinator.com | 2025-04-08

    Note: a website may use more than one web server

    5 months using Apache Echarts and watch GitHub repository https://github.com/apache/echarts for all activities. The developer team enthusiasm and unity is impressive. It is flexible, powerful, constantly improved and plenty of examples.

  4. PixiJS

    The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.

    Project mention: Trying to Replace the DOM with Canvas — And Failing | dev.to | 2025-03-13

    To improve performance, another team built a POC replacing standard DOM elements with a canvas managed by a library called pixi.js. The idea was to boost rendering speed.

  5. tldraw

    very good whiteboard SDK / infinite canvas SDK

    Project mention: Tldraw Computer | news.ycombinator.com | 2024-12-20
  6. nivo

    nivo provides a rich set of dataviz components, built on top of the awesome d3 and React libraries

    Project mention: 10 of the Best Web Analytics Tools for React Websites | dev.to | 2025-03-20

    Nivo is an efficient React analytics library with server-side chart rendering capabilities. It can generate responsive bar, line, and pie charts using pure HTML, SVG, and Canvas.

  7. Konva

    Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.

    Project mention: Konva.js – Declarative 2D Canvas for React, Vue, and Svelte | news.ycombinator.com | 2025-03-19

    Konva at esm format https://www.npmjs.com/package/konva-es

    It's not a fork, just a different way to build the same project.

    ES2015 module is more efficient than the other formats and can facilitate the creation of smaller bundle size through tree-shaking technique.

    https://github.com/konvajs/konva/issues/1829

  8. G2

    📊 The concise and progressive visualization grammar.

  9. SurveyJS

    JavaScript Form Builder with No-Code UI & Built-In JSON Schema Editor. Add the SurveyJS white-label form builder to your JavaScript app (React/Angular/Vue3). Build complex JSON forms without coding. Fully customizable, works with any backend, perfect for data-heavy apps. Learn more.

    SurveyJS logo
  10. lightweight-charts

    Performant financial charts built with HTML5 canvas

    Project mention: Frontend resources! 🚀 | dev.to | 2024-05-25

    Trading view Charts: Power up your data visualization game with lightweight charts from TradingView

  11. signature_pad

    HTML5 canvas based smooth signature drawing

    Project mention: Adding Electronic Signatures to a Rails 8 App | dev.to | 2025-03-28

    Integrating an electronic signature feature can be a great addition when building applications that require document signing. In this tutorial, we will walk through how to add a signature pad to a Rails 8 app using Tailwind CSS, PostgreSQL, and Importmap. We'll leverage the signature_pad JavaScript library to enable users to draw their signatures directly within a form.

  12. react-diagrams

    a super simple, no-nonsense diagramming library written in react that just works

  13. tsParticles

    tsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.

    Project mention: How to Build a Portfolio Website with React | dev.to | 2025-03-13

    Also, to make your portfolio stand out to recruiters and clients, you can add some creative and interactive animations to it. The following libraries can help you easily do this: Framer Motion, tsParticles, and Three.js.

  14. html-to-image

    ✂️ Generates an image from a DOM node using HTML5 canvas and SVG.

    Project mention: Show HN: Latex.to – LaTeX to image converter running in the browser | news.ycombinator.com | 2024-10-29
  15. React Konva

    React + Canvas = Love. JavaScript library for drawing complex canvas graphics using React.

  16. pts

    A library for visualization and creative-coding

  17. planck.js

    2D JavaScript Physics Engine

  18. canvas-editor

    rich text editor by canvas/svg

    Project mention: Show HN: Rich Text Editor by Canvas/SVG | news.ycombinator.com | 2024-07-25
  19. refly

    🎨 Refly is an open-source AI-native creation engine. Its intuitive free-form canvas interface combines multi-threaded dialogues, artifacts, AI knowledge base integration, chrome extension clip & save, contextual memory, intelligent search, WYSIWYG AI editor and more, empowering you to effortlessly transform ideas into production-ready content.

    Project mention: We Believe Creation Shouldn't Be Linear: Introducing the Infinite Agentic Canvas | news.ycombinator.com | 2025-03-23
  20. canvg

    JavaScript SVG parser and renderer on Canvas

  21. paint-board

    🎨 A powerful multi-end drawing board that brings together a lot of creative brushes to experience a whole new range of drawing effects!

    Project mention: Exploring the Canvas Series: combined with Transformers.js to achieve intelligent image processing | dev.to | 2024-11-24

    The code logic is as follows, React + TS , see my project's source code for details, the source code is located in src/components/boardOperation/uploadImage/index.tsx

  22. node-vibrant

    🎨 Extract prominent colors from an image

  23. revezone

    A lightweight local-first graphic-centric productivity tool to build your second brain. Supporting Excalidraw/Tldraw whiteboard and notion-like note. 一款以图形为中心、轻量级、本地优先的用于构建第二大脑的效率工具。支持 Excalidraw、Tldraw 白板和类 Notion 笔记。

  24. grida

    Open Source Canvas Framework - with ⚡️ Supabase + Shadcn UI Built-in

    Project mention: Locating the canvas route in the Grida codebase. | dev.to | 2025-01-19

    I am contributing to an open source project, Grida. Grida provides forms for developers and has a canvas that can be used to design, like Figma. In this article, I wanted to share how I located the /canvas route in the large Grida codebase.

  25. S2

    ⚡️ A practical visualization library for tabular analysis. (by antvis)

  26. InfluxDB

    InfluxDB – Built for High-Performance Time Series Workloads. InfluxDB 3 OSS is now GA. Transform, enrich, and act on time series data directly in the database. Automate critical tasks and eliminate the need to move data externally. Download now.

    InfluxDB logo
NOTE: The open source projects on this list are ordered by number of github stars. The number of mentions indicates repo mentiontions in the last 12 Months or since we started tracking (Dec 2020).

TypeScript Canvas discussion

Log in or Post with

TypeScript Canvas related posts

  • React Three Ecosystem

    8 projects | news.ycombinator.com | 10 May 2025
  • I made my own pixel-art tool!!

    2 projects | dev.to | 3 May 2025
  • Found a simple tool for database modeling: dbdiagram.io

    5 projects | news.ycombinator.com | 27 Apr 2025
  • Looking Ahead: maxGraph in 2025

    2 projects | dev.to | 2 Apr 2025
  • Adding Electronic Signatures to a Rails 8 App

    1 project | dev.to | 28 Mar 2025
  • Konva.js – Declarative 2D Canvas for React, Vue, and Svelte

    2 projects | news.ycombinator.com | 19 Mar 2025
  • Ask HN: What do you use to create diagrams?

    10 projects | news.ycombinator.com | 12 Mar 2025
  • A note from our sponsor - SurveyJS
    surveyjs.io | 15 May 2025
    Add the SurveyJS white-label form builder to your JavaScript app (React/Angular/Vue3). Build complex JSON forms without coding. Fully customizable, works with any backend, perfect for data-heavy apps. Learn more. Learn more →

Index

What are some of the best open-source Canva projects in TypeScript? This list will help you:

# Project Stars
1 excalidraw 99,445
2 echarts 63,458
3 PixiJS 45,078
4 tldraw 40,025
5 nivo 13,536
6 Konva 12,852
7 G2 12,299
8 lightweight-charts 11,403
9 signature_pad 11,335
10 react-diagrams 8,922
11 tsParticles 8,211
12 html-to-image 6,324
13 React Konva 5,977
14 pts 5,253
15 planck.js 5,080
16 canvas-editor 4,150
17 refly 3,833
18 canvg 3,741
19 paint-board 2,344
20 node-vibrant 2,229
21 revezone 2,172
22 grida 2,037
23 S2 1,570

Sponsored
Auth in Less Than 5 Minutes
Civic Auth comes with multiple SSO options, optional embedded wallets, and user management — all implemented with just a few lines of code. Start building today.
www.civic.com

Did you know that TypeScript is
the 1st most popular programming language
based on number of references?