TypeScript SVG

Open-source TypeScript projects categorized as SVG Edit details

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-20

    ECharts -- open source js lib for enterprise-grade charts

  • visx

    🐯 visx | visualization components

    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!

  • react-content-loader

    ⚪ SVG-Powered component to easily create skeleton loadings.

    Project mention: prefered way to fetch extra data when navigating | reddit.com/r/reactnative | 2021-12-30
  • G2

    📊 A highly interactive data-driven visualization grammar for statistical charts.

  • 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-22

    With nivo you can render custom tooltip components.

  • svgr

    Transform SVGs into React 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.

  • tldraw

    A tiny little drawing app.

    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.

  • react-diagrams

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

    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

    🍎Transform an SVG icon into multiple themes, and generate React icons,Vue icons,svg icons

    Project mention: 100 design resources for developers | dev.to | 2021-11-26

    IconPark

  • billboard.js

    :bar_chart: Re-usable, easy interface JavaScript chart library based on D3.js

    Project mention: Graph libraries | reddit.com/r/vuejs | 2022-06-07

    C3 is dying, https://naver.github.io/billboard.js is its not yet official fork (approved by original author).

  • pts

    A library for visualization and creative-coding

    Project mention: [AskJS] What is the best canvas library to make an app like figma or integromat? | reddit.com/r/javascript | 2021-08-29
  • ngx-charts

    :bar_chart: Declarative Charting Framework for Angular

    Project mention: Help with graphs in Angular 12 | reddit.com/r/angular | 2021-08-06

    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.

  • X6

    🚀 JavaScript diagramming library that uses SVG and HTML for rendering.

    Project mention: Show HN: WebApp to Create 3D Plants | news.ycombinator.com | 2022-05-20

    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.

  • canvg

    JavaScript SVG parser and renderer on Canvas

  • svg-path-editor

    Online editor to create and manipulate SVG paths

    Project mention: Versatile Open Source online SVG path editor | reddit.com/r/hackernews | 2022-02-18
  • html-to-image

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

    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
  • panzoom

    A library for panning and zooming elements using CSS transforms :mag: (by timmywil)

    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
  • amcharts4

    The most advanced amCharts charting library for JavaScript and TypeScript apps.

    Project mention: 10+ JavaScript Chart Library you must use.📊 | dev.to | 2022-06-27

    AmCharts (Premium)

  • react-inlinesvg

    An SVG loader component for ReactJS

  • alphaTab

    alphaTab is a cross platform music notation and guitar tablature rendering library.

    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.

  • react-native-graph

    📈 Beautiful, high-performance Graphs and Charts for React Native

    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).

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). The latest post mention was on 2022-07-02.

TypeScript SVG related posts

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
Find remote jobs at our new job board 99remotejobs.com. There are 2 new remote jobs listed recently.
Are you hiring? Post a new remote job listing for free.
Static code analysis for 29 languages.
Your projects are multi-language. So is SonarQube analysis. Find Bugs, Vulnerabilities, Security Hotspots, and Code Smells so you can release quality code every time. Get started analyzing your projects today for free.
www.sonarqube.org