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