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 →
Top 23 TypeScript Canva Projects
-
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...
-
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.
-
echarts
Apache ECharts is a powerful, interactive charting and data visualization library for browser
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.
-
PixiJS
The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.
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.
-
-
nivo
nivo provides a rich set of dataviz components, built on top of the awesome d3 and React libraries
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.
-
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-19Konva 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
-
-
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.
-
Trading view Charts: Power up your data visualization game with lightweight charts from TradingView
-
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.
-
-
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.
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.
-
Project mention: Show HN: Latex.to – LaTeX to image converter running in the browser | news.ycombinator.com | 2024-10-29
-
React Konva
React + Canvas = Love. JavaScript library for drawing complex canvas graphics using React.
-
-
-
-
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 -
-
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-24The 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
-
-
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 笔记。
-
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.
-
-
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.
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
TypeScript Canvas related posts
-
React Three Ecosystem
-
I made my own pixel-art tool!!
-
Found a simple tool for database modeling: dbdiagram.io
-
Looking Ahead: maxGraph in 2025
-
Adding Electronic Signatures to a Rails 8 App
-
Konva.js – Declarative 2D Canvas for React, Vue, and Svelte
-
Ask HN: What do you use to create diagrams?
-
A note from our sponsor - SurveyJS
surveyjs.io | 15 May 2025
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