Top 23 TypeScript SVG Projects
-
echarts
Apache ECharts is a powerful, interactive charting and data visualization library for browser
Project mention: Pulling and visualizing data from a database client side | reddit.com/r/csharp | 2022-05-20ECharts -- open source js lib for enterprise-grade charts
-
Project mention: I don't miss React: a story about using the platform | news.ycombinator.com | 2022-05-03
I also went this route and used d3 for the math but my own hand-made SVGs for the rendering so that the DOM is all in "react land".
You may want to check out this library: https://airbnb.io/visx/ They converted a ton of d3 features into proper React components
-
Appwrite
Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!
-
Project mention: prefered way to fetch extra data when navigating | reddit.com/r/reactnative | 2021-12-30
-
-
nivo
nivo provides a rich set of dataviz components, built on top of the awesome d3 and React libraries
Project mention: React charts package that supports image in tooltips? | reddit.com/r/reactjs | 2022-06-22With nivo you can render custom tooltip components.
-
Project mention: Some svg icons wont show with react native svg | reddit.com/r/reactnative | 2022-06-12
I normally use SVGR but every time a designer sends me an svg i’ll pass it in svgOmg that deletes all the unnecessary attributes and propietary code from figma, illustrator &co.
-
Project mention: Ask HN: A React-like framework for building pannable/zoomable canvas apps? | news.ycombinator.com | 2022-06-22
-
Scout APM
Less time debugging, more time building. Scout APM allows you to find and fix performance issues with no hassle. Now with error monitoring and external services monitoring, Scout is a developer's best friend when it comes to application development.
-
Project mention: How to create a Flow builder / Node graph like in the example image | reddit.com/r/reactjs | 2022-05-24
https://github.com/projectstorm/react-diagrams is an alternative to react-flow
-
IconPark
-
C3 is dying, https://naver.github.io/billboard.js is its not yet official fork (approved by original author).
-
Project mention: [AskJS] What is the best canvas library to make an app like figma or integromat? | reddit.com/r/javascript | 2021-08-29
-
https://github.com/swimlane/ngx-charts is pretty good - BUT - I would actually recommend just making a D3 line chart from scratch if this is going to be a long term project. Just because you will have a lot more freedom and flexibility. The lib above is good but it has a hard time keeping up with the latest Angular releases, so you won't be able to ng update as frequently as you want, and you'll probably find yourself spending time hacking it for custom looks or functionality. Might as well spend that time learning D3, IMO.
-
https://x6.antv.vision/ is the best I've found, but some of the docs still need the English improved.
-
sqip
"SQIP" (pronounced \skwɪb\ like the non-magical folk of magical descent) is a SVG-based LQIP technique.
-
-
Project mention: Versatile Open Source online SVG path editor | reddit.com/r/hackernews | 2022-02-18
-
Project mention: GitHub - bubkoo/html-to-image: Generates an image from a DOM node using HTML5 canvas and SVG. | reddit.com/r/programming | 2022-06-21
-
Project mention: BlazorPanzoom - Enable panning and zooming of your components and elements | reddit.com/r/Blazor | 2021-07-18
Hello everyone. I have released BlazorPanzoom, a wrapper library for timmywil's JavaScript panzoom library found here: panzoom.
-
iconify
Universal icon framework. One syntax for FontAwesome, Material Design Icons, DashIcons, Feather Icons, EmojiOne, Noto Emoji and many other open source icon sets (100+ icon sets, 100,000+ icons). SVG framework, React, Vue and Svelte components!
Project mention: Ask HN: Where can I find open source icons for my apps? | news.ycombinator.com | 2022-06-27 -
AmCharts (Premium)
-
-
Project mention: SheetAble - Self-hosted music sheet organizer v1.0 | reddit.com/r/selfhosted | 2022-07-02
Another vote for tab support. I haven't played piano in years now but it would be neat to archive and collate a bunch of tablature for all the string instruments I do still play. Just being able to render plaintext tabs would be easy to implement + that's definitely the most common format by far. For Guitar Pro format there's a JS library already, although that may be getting a bit scope creep-y.
-
Project mention: Made a free exercise tracking app! (spent 1 year learning how to code) | reddit.com/r/ProductivityApps | 2022-07-02
12 - I decided to give some equity of the company I had incorporated to a team of developers at Margelo. These are my cofounders now, and they are magicians. They helped take my "front end" Expo app to the fully functional product that you see today (although there are still plenty of bugs that we need to resolve I am sure).
TypeScript SVG related posts
- Is there an alternavite to svg-pan-zoom for Nuxt?
- Ask HN: Where can I find open source icons for my apps?
- Wrote a tiny NPM package for interpolating between multiple SVG paths
- Which vue-cli plugin for inlining SVG images?
- Ask HN: A React-like framework for building pannable/zoomable canvas apps?
- GitHub - bubkoo/html-to-image: Generates an image from a DOM node using HTML5 canvas and SVG.
- Bubkoo/HTML-to-image: Generate an image from a DOM node
Index
What are some of the best open-source SVG projects in TypeScript? This list will help you:
Project | Stars | |
---|---|---|
1 | echarts | 51,552 |
2 | visx | 15,397 |
3 | react-content-loader | 12,306 |
4 | G2 | 11,252 |
5 | nivo | 10,245 |
6 | svgr | 8,814 |
7 | tldraw | 8,550 |
8 | react-diagrams | 7,059 |
9 | IconPark | 5,998 |
10 | billboard.js | 5,198 |
11 | pts | 4,798 |
12 | ngx-charts | 4,125 |
13 | X6 | 3,498 |
14 | sqip | 3,247 |
15 | canvg | 3,099 |
16 | svg-path-editor | 2,698 |
17 | html-to-image | 2,538 |
18 | panzoom | 1,684 |
19 | iconify | 1,457 |
20 | amcharts4 | 1,090 |
21 | react-inlinesvg | 1,066 |
22 | alphaTab | 811 |
23 | react-native-graph | 801 |
Are you hiring? Post a new remote job listing for free.