The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning. Learn more →
Top 23 TypeScript SVG Projects
-
echarts
Apache ECharts is a powerful, interactive charting and data visualization library for browser
Project mention: Show HN: Paisa – Open-Source Personal Finance Manager | news.ycombinator.com | 2023-09-22I want to know where my money goes. I like to look at stacked-area (or column) charts of the categories of spending. To make this work I have some software I made ~20 years ago that does double-entry book-keeping. At the end of the month, I import statements from financial service providers (eg: Wells Fargo, Chase, PayPal, Stripe, etc). Lots of stuff is repeat purchases (eg: Shell Gas) and my software automatically categorises. Some transactions I have to categorise manually. Each category / vendor becomes an expense-account and my banks and CCs exist as assets and liabilities.
Once the import and reconciliation is done I pull up a my column chart that shows where the money went -- and can compare over time -- see a full year of movement. I've been through various charting libraries with it and most recently moved to ECharts[0] -- so I'm planning to expand with Treemap and Sankey style visuals.
The import process, which I do monthly takes maybe an hour. I'm importing from like 5 bank accounts, 3 payment processors, 4 CC providers. The part that takes the longest is signing into their slow sites, navigating past pop-up/interstitial, getting to their download page and waiting for it to download. Loads of these sites (WF, Chase) have been "modernised" and have some real bullshit UI/UX going on -- lags, no keyboard, elements jump around, forms can't remember state, ctrl+click won't open in a new page cause that damned link isn't actually a link but some nested monster of DIVs with 19 event listeners on each one -- and somehow still all wrong.
I think the most-best feature would be to have some tool automatically get all my transactions from all these providers into one common format. Gimmee some JSON with like 10 commonly-named fields for the normal stuff and then 52 other BS fields that each provider likes to add (see a PayPal CSV for example). Does that exist and I just don't know?
-
-
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.
-
Official Website: https://airbnb.io/visx/
-
-
Project mention: How can I get a screen to load like this until data is got | /r/reactnative | 2023-03-20
-
nivo
nivo provides a rich set of dataviz components, built on top of the awesome d3 and React libraries
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.
-
-
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.
-
Project mention: Nx + NextJS + Docker - The Nx way: Creating the NextJS application | dev.to | 2023-06-27
//@ts-check // eslint-disable-next-line @typescript-eslint/no-var-requires const { composePlugins, withNx } = require('@nx/next'); /** * @type {import('@nx/next/plugins/with-nx').WithNxOptions} **/ const nextConfig = { nx: { // Set this to true if you would like to use SVGR // See: https://github.com/gregberge/svgr svgr: false, }, }; const plugins = [ // Add more Next.js plugins to this list if needed. withNx, ]; module.exports = composePlugins(...plugins)(nextConfig);
-
Project mention: Learn SVG with 25 examples – How to code images in HTML | news.ycombinator.com | 2023-12-07
Another way is to write HTML/CSS and use satori [0] to convert that to SVG. It's meant for Open Graph images (the images that show up when you link a site in Discord, Slack, Twitter, etc.), but it works quite well for anything.
This is obviously not as flexible as true SVG, but it is familiar to author for anyone who's written a React application. I've used it on the backend to generate match reports for League of Legends [1]
-
Project mention: react-diagrams VS rete - a user suggested alternative | libhunt.com/r/react-diagrams | 2023-06-09
-
IconPark - More than 1,200 high-quality icons, and an interface for customizing them.
-
-
-
-
-
Is anyone willing to help out and provide some advice and knowledge on how to build custom charts with ngxcharts (https://github.com/swimlane/ngx-charts)?
-
-
iconify
Universal icon framework. One syntax for FontAwesome, Material Design Icons, DashIcons, Feather Icons, EmojiOne, Noto Emoji and many other open source icon sets (over 150 icon sets and 200k icons). SVG framework, React, Vue and Svelte components!
Icons play a vital role in the web development. They guide us, convey messages, and enhance user experiences on numerous websites and applications. Whether you are an experienced developer or a beginner in web development, having a reliable source of high-quality icons is essential. This is where Iconify comes in, providing an extensive selection of icons that will breathe life into your projects.
-
-
sqip
"SQIP" (pronounced \skwɪb\ like the non-magical folk of magical descent) is a SVG-based LQIP technique.
-
And the controls seem to be made with https://github.com/timmywil/panzoom:
-
coreui-icons
CoreUI Free Icons - Premium designed free icon set with marks in SVG, Webfont and raster formats
CoreUI Icons - 1500+ simply beautiful open source icons in multiple formats SVG, PNG, and Webfonts.
-
Check out React Native Graph, it uses Skia and handles 120fps animations: https://github.com/margelo/react-native-graph
-
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.
TypeScript SVG related posts
- Tldraw License Change
- Using Deno with Jupyter Notebook to build a data dashboard
- A tiny little drawing app.
- Learn SVG with 25 examples – How to code images in HTML
- Open-graph image generation with Astro
- Practical guide for loading SVG icons with Angular Material
- Practical guide for loading SVG icons with Angular Material
-
A note from our sponsor - WorkOS
workos.com | 18 Mar 2024
Index
What are some of the best open-source SVG projects in TypeScript? This list will help you:
Project | Stars | |
---|---|---|
1 | echarts | 58,520 |
2 | tldraw | 31,805 |
3 | visx | 18,548 |
4 | chartist | 13,302 |
5 | react-content-loader | 13,282 |
6 | nivo | 12,507 |
7 | G2 | 11,926 |
8 | svgr | 10,240 |
9 | satori | 9,881 |
10 | react-diagrams | 8,268 |
11 | IconPark | 7,833 |
12 | billboard.js | 5,725 |
13 | X6 | 5,275 |
14 | pts | 5,083 |
15 | html-to-image | 5,035 |
16 | ngx-charts | 4,265 |
17 | svg-path-editor | 3,731 |
18 | iconify | 3,670 |
19 | canvg | 3,533 |
20 | sqip | 3,363 |
21 | panzoom | 2,013 |
22 | coreui-icons | 1,964 |
23 | react-native-graph | 1,791 |