Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality. Learn more →
Top 23 Canva Open-Source Projects
-
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
-
echarts
Apache ECharts is a powerful, interactive charting and data visualization library for browser
-
PixiJS
The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.
-
phaser
Phaser is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering.
-
WorkOS
The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.
-
-
-
x-spreadsheet
The project has been migrated to @wolf-table/table https://github.com/wolf-table/table
-
-
nivo
nivo provides a rich set of dataviz components, built on top of the awesome d3 and React libraries
-
-
-
Konva
Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.
-
-
-
-
-
InfluxDB
Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
Regarding the optimization of the effect, I found an issue on the three.js GitHub repository: https://github.com/mrdoob/three.js/issues/14104 The alpha channel issue seems to be a difficult problem, which has been present since 2018. At the end of the discussion, a solution proposed by a contributor is not to modify the UnrealBloomPass but to blend the source texture and target texture in the shader.
ExcaliDraw - https://excalidraw.com/
ChartsJS for inspiring me with the pie chart.
Project mention: A web crawler program for crawling Echarts official website examples implemented by Puppeter | dev.to | 2024-04-12import puppeteer from "puppeteer"; import fs from "node:fs"; import { storiesTpl, storiesArgs, generOptions, generOptionsWithFn, } from "./template.mjs"; const ECHARTS_BASE_URL = "https://echarts.apache.org/examples/en/index.html"; function capitalizeFirstLetter(str) { if (!str || str.length === 0) { return ""; } str = str.toLowerCase(); return str.charAt(0).toUpperCase() + str.slice(1); } (async function () { const browser = await puppeteer.launch(); const page = await browser.newPage(); // Navigate the page to a URL await page.goto(ECHARTS_BASE_URL); // Set screen size await page.setViewport({ width: 1080, height: 1024 }); // Type into search box // const examples = await page.type([".example-list-panel"]); const searchResultSelector = ".example-list-panel > div"; const results = await page.$$(searchResultSelector); for (const element of results) { // gener namespace const ele = await element.$(".chart-type-head"); const title = await ele.evaluate((el) => el.textContent); let namespace = title.split(" ").filter(Boolean); namespace = namespace.slice(0, namespace.length - 1); namespace = namespace .map((item) => item.replace("\n", "").replace("/", "")) .filter(Boolean) .join(""); console.log(`${namespace} start`); const instances = await element.$$(".row .example-list-item"); const components = []; for (const instance of instances) { // title const titleElement = await instance.$(".example-title"); const subTitle = await titleElement.evaluate((el) => el.textContent); const titles = subTitle .split(" ") .filter(Boolean) .map((item) => item .replace(/\+/g, "") .replace(/\(/g, "") .replace(/\)/g, "") .replace(/-/g, "") ); const title = titles.map((item) => capitalizeFirstLetter(item)).join(""); const link = await instance.$(".example-link"); const newPagePromise = new Promise((resolve) => { browser.on("targetcreated", async (target) => { if (target.type() === "page") { const targetPage = await target.page(); const url = await targetPage.url(); if (url.includes("editor")) { resolve(targetPage); } } }); }); await link.click(); const newPage = await newPagePromise; await newPage.setViewport({ width: 40000, height: 20000 }); await newPage.waitForSelector(".ace_text-layer"); await new Promise((resolve) => { setTimeout(() => { resolve(); }, 3000); }); let content = await newPage.evaluate( () => document.querySelector(".ace_text-layer").innerText ); content = content .replace(/\[\]/g, "[] as any") .replace(//g, "") .replace(/var/g, "let"); let options; if (content.includes("myChart")) { options = generOptionsWithFn({ options: content }); } else { options = generOptions({ options: content }); } components.push({ options, title }); await newPage.close(); } const args = components .filter(({ options }) => { if (options.includes("$")) return false; return true; }) .map(({ options, title }) => storiesArgs({ options: options, name: title }) ) .join("\r\n"); const scripts = storiesTpl({ namespace: `Charts/${namespace}`, components: args, }); fs.writeFileSync(`./bots/assests/${namespace}.stories.ts`, scripts); console.log(`${namespace} end`); } })();
Anime.js is celebrated for its simplicity, speed, and versatility. This compact library simplifies the animation process, enabling developers to craft visually striking animations with minimal effort. Anime.js supports a wide array of effects like scaling, morphing, and rotating, offering developers the tools to create complex timelines and animations with ease.
If you're into video game dev, then PixiJS is something you need to know about. It's a HTML5 game engine that provides a lightweight 2D library across all devices. This latest update has a new package structure, custom builds, graphics API overhaul, and lots more. You can read about all these changes in the PixiJS Migration Guide. Also big congrats to PixiJS for being part of the open source community for ten years now! 😮.
Gold : GitHub, Phaser Studio, Arcadia
Project mention: Rough.js: Create graphics with a hand-drawn, sketchy, appearance | news.ycombinator.com | 2023-12-22
I looked at it seriously for content authoring but gave it up.
The big problem is you cannot import images, textures, 3-d models and such from ordinary tools. You have something like constructive solid geometry to work with but only so much and there is a slider you can use to set the number of players and the more players the less geometry you can use.
I want to make worlds based in photographs (particularly pano and stereo) and art. McDonalds needs to put a Coca-Cola logo on the side of the cup. Either way it is a non-starter.
HW supports collaboration (more than one person shares the world) but https://aframe.io/ lets me make the content I want. If I have to choose one or the other I am going to pick the second.
My take on Meta Quest is that it seems highly successful as a gaming environment based on an app store but is skews towards single-player experiences. Like a lot of AAA games, the excellent Asgard’s Wrath 2 has some multiplayer tacked on but it is all meaningless like leaderboards and the occasional ghost that shows up in a procedurally generated dungeon.
Of course, Meta wants to make multiplayer experiences but somehow they just can’t do it.
Do you think this worked so cleanly because there is a tutorial similar to this and its in the dataset?
https://github.com/liabru/matter-js/wiki/Tutorials
Project mention: Interview with Senior JavaScript Developer 2024 [video] | news.ycombinator.com | 2024-04-14> Building an accessible canvas-based UI with a React-like API would make a lot more sense for SPAs
https://github.com/Flipboard/react-canvas
React is the Simpsons of web tech.
Project mention: Level Up Your Web App with Stunning React Charts: Introducing the Top 10 React Charts Libraries | dev.to | 2023-07-31Nivo is a data visualization library built on top of D3.js and React. It offers a range of well-designed, customizable charts with great animations, making it suitable for creating visually impressive data visualizations.
Project mention: Show HN: Minard – Generate beautiful charts with natural language | news.ycombinator.com | 2024-04-18Hi HN – Excited to share a beta for Minard, a new data visualization toolkit we've been working on that lets you generate publication-quality charts with simple natural language (throw away your matplotlib docs and rejoice!).
Upload or import CSVs, Excel, and JSON, give it a spin, and please let us know what you think! (Long format data works best for now)
For those curious, the stack is a simple Django app with HTMX/Alpine and all of the charts are specified and rendered as Vega (https://vega.github.io/vega/). Lots of LLM function calling under the hood as well.
Based on this, I found that some of the libraries are dead and no longer have any support. Only two libraries are still alive and have significant amount of stars on GitHub and downloads on NPM. They are Fabric.js and Konva.js.
Project mention: react-diagrams VS rete - a user suggested alternative | libhunt.com/r/react-diagrams | 2023-06-09
Project mention: Show HN: A JavaScript library for data visualization in both SVG and Canvas | news.ycombinator.com | 2024-04-11> DOM-like event bubbling
This does sound very interesting. I started playing with https://two.js.org/ for a browser game but the event system proved a challange. The typescript focus also looks promising. Will give it a try.
link https://github.com/tradingview/lightweight-charts
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).
Canvas related posts
- How to align bar chart labels to the left and keep their styles consistent in @visactor/vchart?
- A useful front-end confetti animation library
- A New Era for Mixed Reality
- El Prado Museum in Unprecedented Detail with New 360º Gigapixel Virtual Tour
- Show HN: Minard – Generate beautiful charts with natural language
- Interview with Senior JavaScript Developer 2024 [video]
- Show HN: A JavaScript library for data visualization in both SVG and Canvas
-
A note from our sponsor - InfluxDB
www.influxdata.com | 26 Apr 2024
Index
What are some of the best open-source Canva projects? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | three.js | 98,873 |
| 2 | excalidraw | 72,707 |
| 3 | Chart.js | 63,425 |
| 4 | echarts | 58,944 |
| 5 | anime.js | 48,686 |
| 6 | PixiJS | 42,496 |
| 7 | phaser | 36,324 |
| 8 | rough | 19,421 |
| 9 | A-Frame | 16,192 |
| 10 | matter-js | 15,952 |
| 11 | x-spreadsheet | 13,763 |
| 12 | react-canvas | 13,126 |
| 13 | nivo | 12,643 |
| 14 | G2 | 11,955 |
| 15 | vega | 10,847 |
| 16 | Konva | 10,730 |
| 17 | piskel | 10,720 |
| 18 | zdog | 10,228 |
| 19 | signature_pad | 10,095 |
| 20 | dom-to-image | 10,088 |
| 21 | react-diagrams | 8,335 |
| 22 | two.js | 8,190 |
| 23 | lightweight-charts | 8,208 |
Sponsored
Power Real-Time Data Analytics at Scale
Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
www.influxdata.com