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: Show HN: Paisa – Open-Source Personal Finance Manager | news.ycombinator.com | 2023-09-22

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

    [0] https://echarts.apache.org/

  • tldraw

    Infinite canvas.

    Project mention: Tldraw License Change | news.ycombinator.com | 2024-02-05
  • 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.

  • visx

    🐯 visx | visualization components

    Project mention: React Component Libraries | dev.to | 2024-03-13

    Official Website: https://airbnb.io/visx/

  • chartist

    Simple responsive charts

  • 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

    📊 The concise and progressive visualization grammar.

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

  • 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: 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]

    [0]: https://github.com/vercel/satori

    [1]: https://github.com/shepherdjerred/glitter-boys

  • 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: 29 Websites For Free Icon Sets | dev.to | 2023-09-22

    IconPark - More than 1,200 high-quality icons, and an interface for customizing them.

  • billboard.js

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

  • X6

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

  • pts

    A library for visualization and creative-coding

  • html-to-image

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

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

  • svg-path-editor

    Online editor to create and manipulate SVG paths

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

    Project mention: Unleashing Iconify: Your Ultimate Solution for Icons | dev.to | 2023-10-16

    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.

  • canvg

    JavaScript SVG parser and renderer on Canvas

  • sqip

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

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

        

  • coreui-icons

    CoreUI Free Icons - Premium designed free icon set with marks in SVG, Webfont and raster formats

    Project mention: 29 Websites For Free Icon Sets | dev.to | 2023-09-22

    CoreUI Icons - 1500+ simply beautiful open source icons in multiple formats SVG, PNG, and Webfonts.

  • 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

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

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 2024-03-13.

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