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! Learn more →
Top 23 TypeScript SVG Projects
-
echarts
Apache ECharts is a powerful, interactive charting and data visualization library for browser
Coded mainly in Perl and Gnuplot, recently extended by Python Pandas and JavaScript Tabulator and ECharts
-
-
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.
-
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.
-
The author went through the effort of creating a marketing site with documentation and examples.
-
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-31Nivo 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.
-
-
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.
-
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);
-
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.
-
Project mention: react-diagrams VS rete - a user suggested alternative | libhunt.com/r/react-diagrams | 2023-06-09
-
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
-
It appears that the core team have abandoned it in favour of billboard.js
-
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)
-
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.
-
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)?
-
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.
-
-
-
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-23https://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
-
And the controls seem to be made with https://github.com/timmywil/panzoom:
-
Check out React Native Graph, it uses Skia and handles 120fps animations: https://github.com/margelo/react-native-graph
-
-
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
- Openmoji
- I Made an SVG to SwiftUI Converter
- Best Feather-inspired animated icon libraries for React
- How Do I Style A SVG That Is In A React Component, Using CSS?
- Easily use SVGs as JSX/TSX in your ReactJs app
- What are some of the best libraries you cannot work without?
- Connaissez vous un logiciel gratuit pour faire des frises chronologique ?
-
A note from our sponsor - Appwrite
appwrite.io | 22 Sep 2023
Index
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.
blog.mergify.com