TypeScript SVG

Open-source TypeScript projects categorized as SVG
Edit details
Topics: React TypeScript JavaScript Canvas Icons
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
featured

Top 23 TypeScript SVG Projects

  • echarts

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

    • Project mention: Ask HN: What's the best charting library for customer-facing dashboards? | news.ycombinator.com | 2024-04-29

  • tldraw

    SDK for creating whiteboards and canvas experiences on the web.

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

    SurveyJS logo

  • visx

    🐯 visx | visualization components

    • Project mention: D3 in Depth | news.ycombinator.com | 2024-05-16

    This exists, it’s called visx, and it’s great.

    https://airbnb.io/visx

  • react-content-loader

    ⚪ SVG-Powered component to easily create skeleton loadings.

  • chartist

    Simple responsive charts

  • nivo

    nivo provides a rich set of dataviz components, built on top of the awesome d3 and React libraries

    • Project mention: Discover the State of HTML 2023 Survey Results | dev.to | 2024-05-12

    Up to now we had been using the excellent Nivo dataviz library for React, but I wasn't sure how to customize it to support such a specific use case, or even if it was possible at all:

  • G2

    📊 The concise and progressive visualization grammar.

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

    InfluxDB logo

  • 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: Creating an OG image using React and Netlify Edge Functions | dev.to | 2024-04-16

    View on GitHub

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

  • html-to-image

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

  • pts

    A library for visualization and creative-coding

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

  • 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: Show HN: I built a search engine for 200k open source icons | news.ycombinator.com | 2024-04-03

  • svg-path-editor

    Online editor to create and manipulate SVG paths

  • 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

  • SaaSHub

    SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives

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

TypeScript SVG related posts

  • D3 in Depth

    4 projects | news.ycombinator.com | 16 May 2024

  • Discover the State of HTML 2023 Survey Results

    2 projects | dev.to | 12 May 2024

  • Nivo: Dataviz components, built on top of D3 and React

    1 project | news.ycombinator.com | 30 Apr 2024

  • 🤯 Keep Up With these 50 Articles

    5 projects | dev.to | 16 Apr 2024

  • Faces.js, a JavaScript library for generating vector-based cartoon faces

    11 projects | news.ycombinator.com | 6 Apr 2024

  • Show HN: I built a search engine for 200k open source icons

    1 project | news.ycombinator.com | 3 Apr 2024

  • Tldraw License Change

    1 project | news.ycombinator.com | 5 Feb 2024
  • A note from our sponsor - InfluxDB
    www.influxdata.com | 17 May 2024
    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. Learn more →

Index

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

Project Stars
1 echarts 59,130
2 tldraw 33,018
3 visx 18,818
4 react-content-loader 13,379
5 chartist 13,317
6 nivo 12,714
7 G2 11,976
8 svgr 10,337
9 satori 10,204
10 react-diagrams 8,370
11 IconPark 7,833
12 billboard.js 5,752
13 X6 5,399
14 html-to-image 5,247
15 pts 5,108
16 ngx-charts 4,272
17 iconify 3,942
18 svg-path-editor 3,845
19 canvg 3,580
20 sqip 3,362
21 panzoom 2,045
22 coreui-icons 1,963
23 react-native-graph 1,888

Sponsored
SaaSHub - Software Alternatives and Reviews
SaaSHub helps you find the best software and product alternatives
www.saashub.com