TypeScript SVG

Open-source TypeScript projects categorized as SVG

Top 23 TypeScript SVG Projects

  • echarts

    Apache ECharts is a powerful, interactive charting and data visualization library for browser

    Project mention: Personal Sträva Activity Statistics | /r/Strava | 2023-06-13

    Coded mainly in Perl and Gnuplot, recently extended by Python Pandas and JavaScript Tabulator and ECharts

  • tldraw

    a very good whiteboard

    Project mention: Miro - MindMap Software Selfhosted Alternatives? | /r/selfhosted | 2023-06-22
  • SurveyJS

    A Non-Cloud Alternative to Google Forms that has it all.. SurveyJS JavaScript libraries allow you to easily set up a robust form management system fully integrated into your IT infrastructure where users can create and edit multiple dynamic JSON-based forms in a no-code form builder. Learn more now.

  • visx

    🐯 visx | visualization components

    Project mention: Level Up Your Web App with Stunning React Charts: Introducing the Top 10 React Charts Libraries | dev.to | 2023-07-31

    Visx is a React-based library used for constructing data visualizations. It comprises a set of reusable, low-level visualization components that merge the power of D3 for data transformation and calculations with the benefits of React for updating the DOM.

  • chartist

    Simple responsive charts

    Project mention: Chartist: Simple Responsive Charts in SVG | news.ycombinator.com | 2022-10-30

    The author went through the effort of creating a marketing site with documentation and examples.


  • react-content-loader

    ⚪ SVG-Powered component to easily create skeleton loadings.

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

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

  • G2

    📊 A concise and progressive visualization grammar.

  • Amplication

    Amplication: open-source Node.js backend code generator. An open-source platform that helps developers build backends without spending time on boilerplate & repetitive coding. Including production-ready GraphQL & REST APIs, DB schema, DTOs, filtering, pagination, RBAC, & more.

  • svgr

    Transform SVGs into React components 🦁

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

  • satori

    Enlightened library to convert HTML and CSS to SVG

    Project mention: Making Dynamic Website Thumbnail | dev.to | 2023-09-21

    In this version, we no longer use Puppeteer to capture HTML and return images. Instead, we utilize the @vercel/og library, which employs Satori as its core engine. Satori is a library that converts HTML and CSS into SVG.

  • react-diagrams

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

    Project mention: react-diagrams VS rete - a user suggested alternative | libhunt.com/r/react-diagrams | 2023-06-09
  • IconPark

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

    Project mention: How to use Svg file package in react-native? | /r/reactnative | 2022-11-15

    1: Clone the repo (https://github.com/bytedance/IconPark) 2: Use the svgr CLI to convert them to react-native-svg compatible versions: npx @svgr/cli --out-dir "/path/to/output/directory" "/path/to/icons/directory" --typescript --native --icon

  • billboard.js

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

    Project mention: Is c3 js deprecated? and general thoughts of c3? | /r/d3js | 2022-11-22

    It appears that the core team have abandoned it in favour of billboard.js

  • pts

    A library for visualization and creative-coding

    Project mention: which technology or framework is used to create geometry-draggable canvas like this? | /r/Frontend | 2022-10-23

    Pts.js - (sorry - couldn't find an example quickly)

  • X6

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

    Project mention: [AskJS] Which JS libraries and packages are currently your favourites? | /r/javascript | 2023-02-04

    I have been enjoying using X6 (https://github.com/antvis/X6) which is a very feature complete library for building drag and drop node/diagram editors. Most of the documentation is not in English but I found the sample code very easy to follow.

  • ngx-charts

    :bar_chart: Declarative Charting Framework for Angular

    Project mention: Advice on building custom charts with ngxcharts | /r/Angular2 | 2023-05-20

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

  • html-to-image

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

    Project mention: nize.pics – create beautiful images of code and screenshots | /r/webdev | 2022-11-12

    Thanks! It's built with React (Next.js) and Mantine for the UI components. I'm not sure what you mean with edit systems, but the layers are using react-draggable. The syntax highlighting is powered by shiki and a bunch of exported VS Code themes. The state is handled by zustand, with the undo-redo functionality built on top of it. The code formatting is done with prettier and the image export uses html-to-image.

  • canvg

    JavaScript SVG parser and renderer on Canvas

  • svg-path-editor

    Online editor to create and manipulate SVG paths

  • sqip

    "SQIP" (pronounced \skwɪb\ like the non-magical folk of magical descent) is a SVG-based LQIP technique.

  • 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: Icon Buddy – 100K+ Open Source SVG Icons, Fully Customizable | news.ycombinator.com | 2023-07-23

    https://iconify.design/ has been my go to for years, but I like the ability to customize the colors from the UI, although I personally use tailwind classes for my colors

  • panzoom

    A library for panning and zooming elements using CSS transforms :mag:

    Project mention: Interactive Map of Linux Kernel | news.ycombinator.com | 2023-09-12

    And the controls seem to be made with https://github.com/timmywil/panzoom:


  • react-native-graph

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

    Project mention: Best way to build charts in React Native? | /r/reactnative | 2023-06-07

    Check out React Native Graph, it uses Skia and handles 120fps animations: https://github.com/margelo/react-native-graph

  • badgen.net

    Fast badge service

  • Appwrite

    Appwrite - The open-source backend cloud platform. The open-source backend cloud platform for developing Web, Mobile, and Flutter applications. You can set up your backend faster with real-time APIs for authentication, databases, file storage, cloud functions, and much more!

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 2023-09-21.

TypeScript SVG related posts


What are some of the best open-source SVG projects in TypeScript? This list will help you:

Project Stars
1 echarts 56,386
2 tldraw 20,613
3 visx 17,743
4 chartist 13,260
5 react-content-loader 13,056
6 nivo 11,861
7 G2 11,739
8 svgr 9,927
9 satori 8,822
10 react-diagrams 7,955
11 IconPark 7,548
12 billboard.js 5,607
13 pts 5,020
14 X6 4,875
15 ngx-charts 4,246
16 html-to-image 4,132
17 canvg 3,444
18 svg-path-editor 3,438
19 sqip 3,353
20 iconify 3,034
21 panzoom 1,925
22 react-native-graph 1,550
23 badgen.net 1,349
Tired of breaking your main and manually rebasing outdated pull requests?
Managing outdated pull requests is time-consuming. Mergify's Merge Queue automates your pull request management & merging. It's fully integrated to GitHub & coordinated with any CI. Start focusing on code. Try Mergify for free.