SaaSHub helps you find the best software and product alternatives Learn more →
Top 23 TypeScript Code Design Projects
-
react-router adds about 30 kB (minified) to your bundle, while wouter requires less than 4 kB. Although the react-router team has made significant efforts in version 7 to optimize its bundle size, it still feels excessive if your primary task is simply switching between a few routes.
-
CodeRabbit
CodeRabbit: AI Code Reviews for Developers. Revolutionize your code reviews with AI. CodeRabbit offers PR summaries, code walkthroughs, 1-click suggestions, and AST-based analysis. Boost productivity and code quality across all major languages with each PR.
-
TanStack Query
🤖 Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query.
Great to see this--there are some nice features that encourage using standard web technologies like forms, and some solid quality of life improvements.
However, I'm disappointed (but not surprised, this was listed as out of scope for 19) that triggering Suspense is still basically "use a framework that supports it." I have not been able to find any documentation or blog posts about the mechanism. I've tried to figure out how it works by looking at TanStack Query, but I've had limited success so far. I've found they're copying React's twist on Promises [1], but I haven't gotten this to work yet.
I know the general idea is you throw Promises, but Suspense explicitly forbids using promises created during rendering. This means you can't just interrupt the component's initial render to load some data, and then restart it when its data is available. This means the component needs to deal with null data somehow, instead of, e.g., being able to call a custom `useSomeData` hook and rely on it to first suspend and then return the loaded data. Not having to deal directly with loading states in individual components could simplify things quite a bit.
Has anyone explored this side of Suspense?
[1]: https://github.com/TanStack/query/blob/main/packages/query-c...
-
React Hook Form
-
Project mention: We switched from Next.js to Astro (and why it might interest you) | news.ycombinator.com | 2024-12-03
Just use react.... That's what I do - it is so much easier than trying to fight with Next.js.
I have a large application and I use next.js for the landing pages (landing, tos, privacy, blog, login, etc..) - but for the core application after login, I just use vanilla react with react router. For me I keep these as separate applications as I don't want to load the entire app just for the landing page or login box.
Every time I need to work in the nextjs part of the app I always run into problems and have to read the docs and troubleshoot, sift through which part of the docs apply to my setup versus the app router.
If your entire application needs to be indexed as a static site (e.g. content based versus a web application), then vanilla react isn't a good fit - so it depends on your needs.
Unrelated - but shout out to https://nx.dev. I always prefer using this for all of my projects - made it super easy to have my node backend, react frontend, nextjs landing page, chrome extension, cron jobs, etc.. all in the same codebase where I can share code between all of them via non-publishable libraries.
-
Project mention: Guide to Redux: A Robust State Management Library for JavaScript Applications | dev.to | 2024-07-20
React-Redux Documentation
-
Project mention: How I Used Electron and React to Create a Sweet UI for FFMPEG | dev.to | 2023-12-15
For a swift and efficient setup, I began by cloning the Electron-React Boilerplate. This boilerplate provided a pre-configured combination of Electron and React, along with Redux and Webpack, setting a solid foundation for the project. This choice allowed me to focus on building the unique features of my application, leveraging the boilerplate's stable and community-tested framework.
-
apollo-client
:rocket: A fully-featured, production ready caching GraphQL client for every UI framework and GraphQL server.
-
SaaSHub
SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives
-
-
Thanks for your feedback !
It does not rely on JSON schema at all, the idea was to build a representation that binds together data structure, views and behavior in a self-contained way (like .xlsx does).
There are a few tools that do enable to link JSON schema to views, like react-jsonschema-form (https://rjsf-team.github.io/react-jsonschema-form/) but you need to manage them separately, and they usually do not propose a way to add the fields "methods" (which was the feature I found interesting to make "dynamic" spreadsheets).
That being said, I think the framework should clearly propose an export from Schema to JSON Schema or Yaml at some point, just as you should be able to start building your Schema by importing a JSON Schema (and although there might be some gray zones between the 2).
No, sorry, it's not yet open-source, and currently there are some strong links between Document and Workspace (Links, Files...) that would need to be more "abstracted" to make the builder an independent component. But I hear you point ! (and all the comments in this thread are raising the same ! :) )
-
formily
📱🚀 🧩 Cross Device & High Performance Normal Form/Dynamic(JSON Schema) Form/Form Builder -- Support React/React Native/Vue 2/Vue 3
Project mention: The Top 12 Open-Source No-Code Tools with the Most GitHub Stars | dev.to | 2024-07-11GitHub https://github.com/alibaba/formily GitHub Star 10.9k The most recent update on GitHub Five months ago Official website https://formilyjs.org/ Documentation https://formilyjs.org/guide
-
-
react-router adds about 30 kB (minified) to your bundle, while wouter requires less than 4 kB. Although the react-router team has made significant efforts in version 7 to optimize its bundle size, it still feels excessive if your primary task is simply switching between a few routes.
-
In its docs, Astro recommends nanostores, but I’ve used effector in the past. And LOVED IT. So I’ve used it for this project as well.
-
-
Project mention: Show HN: Gov.uk Vue, a Vue Component Library for the Gov.uk Design System | news.ycombinator.com | 2024-09-02
Nice!
I've been using GOVUK stuff for my own purposes for a good-long while now, this should speed up the process.
I'll try to plug your thing into Json Forms [1], then I'll be back to the good old days .
[1] https://github.com/eclipsesource/jsonforms
-
-
-
-
-
-
fireproof
Realtime database, runs anywhere. Install Fireproof in your front-end app or edge function, and sync data via any backend.
Project mention: Show HN: Fireproof – local-first database with Git-like encrypted sync | news.ycombinator.com | 2024-11-19There are maybe too many backend implementions: https://github.com/fireproof-storage/connect/tree/main/src
And writing a custom one is super-easy (docs coming soon, for now here is the interface): https://github.com/fireproof-storage/fireproof/blob/c4462c8a...
-
rockpack
Rockpack is a lightweight, zero-configuration solution for quickly setting up a React application with full support for Server-Side Rendering (SSR), bundling, linting, and testing.
-
redux-first-history
Redux history binding support react-router - @reach/router - wouter - react-location
-
SaaSHub
SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives
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 Code Design discussion
TypeScript Code Design related posts
-
Free VS Code-Inspired Developer Portfolio Design – Available for You! 🚀
-
Beyond Basic Forms: Why Enterprise-Level Forms Remain a Challenge (and How FormML Solves It)
-
Migrating from react-router to wouter
-
Nx 20: Exploring the new TS preset and TypeScript project references
-
Show HN: Fireproof – local-first database with Git-like encrypted sync
-
The best React Form's validation libraries ✅🥇
-
Building a Scalable URL Shortener with Node.js (Part 2/2)
-
A note from our sponsor - SaaSHub
www.saashub.com | 11 Dec 2024
Index
What are some of the best open-source Code Design projects in TypeScript? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | react-router | 53,381 |
| 2 | TanStack Query | 42,837 |
| 3 | react-hook-form | 41,795 |
| 4 | nx | 23,933 |
| 5 | react-redux | 23,402 |
| 6 | electron-react-boilerplate | 23,349 |
| 7 | apollo-client | 19,403 |
| 8 | reselect | 19,044 |
| 9 | react-jsonschema-form | 14,398 |
| 10 | formily | 11,543 |
| 11 | react-responsive | 7,039 |
| 12 | wouter | 6,792 |
| 13 | effector-react | 4,621 |
| 14 | React Figma | 2,564 |
| 15 | JSONForms | 2,234 |
| 16 | Kuma UI | 1,799 |
| 17 | Router5 | 1,717 |
| 18 | universal-router | 1,704 |
| 19 | react-inlinesvg | 1,273 |
| 20 | teaful | 711 |
| 21 | fireproof | 630 |
| 22 | rockpack | 587 |
| 23 | redux-first-history | 450 |
Sponsored
CodeRabbit: AI Code Reviews for Developers
Revolutionize your code reviews with AI. CodeRabbit offers PR summaries, code walkthroughs, 1-click suggestions, and AST-based analysis. Boost productivity and code quality across all major languages with each PR.
coderabbit.ai