20 javascript open source projects worth collecting
Tags: javascript, github, opensource, react
Published: 2024-02-19 09:32:22

The world of open source is becoming more colorful every day. What new challenges will there be in the front-end field in 2022? Below are 20 interesting open source projects we have compiled. We hope there is one among them that you want to collect.


## ★1. Proton particles

#### Site: [https://github.com/drawcall/Proton](https://github.com/drawcall/Proton)

Proton is a lightweight, flexible Javascript particle animation library. You can use it to easily create various cool particle animation effects. This project is referenced by nearly _2k_ projects on github. Proton also supports the 3d particle version [https://github.com/drawcall/three.proton/](https://github.com/drawcall/three.proton/).


![a.gif](https://img-blog.csdnimg.cn/img_convert/5bdf539d00c7c3b1dbc7f2a251e4a691.gif)

![b.gif](https://img-blog.csdnimg.cn/img_convert/22090a54c76e389a5b9dd47208cf55e4.gif)

## ★2. Awesome LowCode Component

#### Site: [https://github.com/aliaszz/awesome-lowcode-component](https://github.com/aliaszz/awesome-lowcode-component)

LowCode - the hottest concept in the front-end field in recent years. The Awesome LowCode Component project collects various LowCode components and cutting-edge technical solutions for you, which can be used to quickly build enterprise-level projects or directly for development, greatly improving business needs and commercial realization. s efficiency.


![segue-blog-low-code-no-code-MAIN.jpg](https://img-blog.csdnimg.cn/img_convert/816a4d1bf64b1a27b16e9add6c94fa90.png)

## ★3. wp2vite

#### Site: [https://github.com/tnfe/wp2vite](https://github.com/tnfe/wp2vite)

![w2v.png](https://img-blog.csdnimg.cn/img_convert/bb106c3a1edf6d6a217eb3386f7c087c.png)

A particularly useful project that allows your webpack project to support vite. Compared with webpack, the construction speed of Vite development environment can be increased by about 80%, and the construction speed of production environment can be increased by about 50%.

![image.png](https://img-blog.csdnimg.cn/img_convert/c1db9d8fa3be932765a3905c9f3bdeb5.png)

## ★4. Awesome State

#### Site: [https://github.com/tnfe/awesome-state](https://github.com/tnfe/awesome-state)

It covers various front-end __state management__ solutions in the industry, including react, vue, angular, small programs and other state libraries.


![astate2.jpg](https://img-blog.csdnimg.cn/img_convert/abe2e34d7f1368800330a9023e20b69a.png)

## ★5. Front-end engineering tool Feflow

#### Site: [https://github.com/Tencent/feflow](https://github.com/Tencent/feflow)

Feflow is Tencent's open source front-end workflow and specification tool used to improve engineering efficiency. It has been widely used in NOW live broadcast, fancy live broadcast, fancy dating, mobile QQ nearby, group video, group gift giving, echo, App Store, Penguin account and other businesses.


![a.jpg](https://img-blog.csdnimg.cn/img_convert/444b47340e86fb0f9488c1c0aa0694cb.png)

## ★6. TDesign React Starter

#### Site: [https://github.com/Tencent/tdesign-react-starter](https://github.com/Tencent/tdesign-react-starter)

TDesign React Starter is based on tdesign-react, developed using `React` and `Vite2`, and can be configured with personalized themes. It aims to provide out-of-the-box, configurable middle and back-end projects.

![docs-starter.jpg](https://img-blog.csdnimg.cn/img_convert/699ba2312f7b7b0cc2979dac212e4cc3.png)


## ★7. Web IDE UI

#### Site: [https://github.com/DTStack/molecule](https://github.com/DTStack/molecule)

Molecule is a Web IDE UI framework inspired by VS Code and built using React.js. By designing an extension mechanism (Extension) similar to VS Code, a highly abstract **Web IDE UI** system can be quickly and easily built.

![2.jpg](https://img-blog.csdnimg.cn/img_convert/0183281894bc71620147dbd55b30fb21.png)

## ★8. Flutter game library

#### Site: [https://github.com/flutterkit/zerker](https://github.com/flutterkit/zerker)

Zerker is a flexible, lightweight `Flutter` animation game framework. Have you tried using `Flutter` to develop cross-end games? At the same time, it can also create Widget component animation effects, such as fly-out animation, pop-up animation, scene transition, etc.

![a.gif](https://img-blog.csdnimg.cn/img_convert/6f8e413b3cb6277ccb85ccf6a77b0382.gif)

## ★9. InkPaint

#### Site: [https://github.com/drawcall/inkpaint](https://github.com/drawcall/inkpaint)

![logo.png](https://img-blog.csdnimg.cn/img_convert/5083b76dd747f9ddba66ae8403f75f37.png)
`InkPaint` is a lightweight `Canvas` graphics rendering library running on `node.js`. Use `InkPaint` to dynamically synthesize various images, PDFs, etc. on the server side. At the same time, InkPaint is a universal library between node.js and browsers, and can still run normally on the browser side.

![image.png](https://img-blog.csdnimg.cn/img_convert/6d945dfb8688d477def3851a60f092b6.png)

## ★10. Golang for Node.js Developers

#### Site: [https://github.com/miguelmota/golang-for-nodejs-developers](https://github.com/miguelmota/golang-for-nodejs-developers)

This guide contains plenty of examples for people learning Go from Node.js and vice versa. Go is a high-performance, high-concurrency, cross-platform language that is receiving more and more widespread attention and application. As the saying goes, more skills don’t weigh you down, and mastering more languages means you have more choices when it comes to application development.


![3.jpg](https://img-blog.csdnimg.cn/img_convert/4ae4b254f55b0439f02531b27a6c0419.png)

## ★11. Cloud development CloudBase CMS

#### Site: [https://github.com/TencentCloudBase/cloudbase-extension-cms](https://github.com/TencentCloudBase/cloudbase-extension-cms)

CloudBase CMS is a headless content management platform developed by Tencent Cloud and based on Node.js. It provides rich content management functions, is simple to install, easy for secondary development, and is closely integrated with the cloud development ecosystem to help developers improve their development efficiency.

![banner.jpg](https://img-blog.csdnimg.cn/img_convert/deb1a030d1de2ca343d619b943ccc99a.png)


![2.jpg](https://img-blog.csdnimg.cn/img_convert/26681fc7d3f364734c9505455a6298c0.png)

## ★12. qiankun micro front-end practice

#### Site: [https://github.com/wl-ui/wl-mfe](https://github.com/wl-ui/wl-mfe)

__qiankun__ is a complete micro front-end solution. This project will introduce how the Vue project can access __qiankun__ through a microservice Demo. This project is a practical micro-front-end back-end management system project based on vue3+koa2+qiankun2.


![4.jpg](https://img-blog.csdnimg.cn/img_convert/2de2ba088426d50118d2444c125879d5.png)


## ★13. Online video editor

#### Site: [https://github.com/kudlav/videoeditor](https://github.com/kudlav/videoeditor)

An online video editor that supports timeline operation, video cropping and other functions. The project uses server-side rendering and supports modern mainstream browsers.


![2.jpg](https://img-blog.csdnimg.cn/img_convert/9648ad032fd695191fd892f956b4aaae.png)

## ★14. Code clock collection

#### Site: [https://github.com/drawcall/clock-shop](https://github.com/drawcall/clock-shop)

This project collects dozens of various interesting clock codes. Find a good-looking clock and hang it on your blog homepage, which will instantly make it look taller.


![Kapture 2022-03-04 at 22.20.27.gif](https://img-blog.csdnimg.cn/img_convert/b4a07f915af28fa1b651ec11dfea1272.gif)

![Kapture 2022-03-04 at 22.22.30.gif](https://img-blog.csdnimg.cn/img_convert/2f5244958cf23afdde39fb63f20e005c.gif)

## ★15. Awesome made by chinese

#### Site: [https://github.com/JN-H/awesome-made-by-chinese](https://github.com/JN-H/awesome-made-by-chinese)

An open source project from Chinese developers on Github. This project collects and organizes some of our Chinese developers' own works, and each of them is worthy of praise. Similar projects to Awesome include

- [https://github.com/igoradamenko/awesome-made-by-russians](https://github.com/igoradamenko/awesome-made-by-russians)
- [https://github.com/felipefialho/awesome-made-by-brazilians](https://github.com/felipefialho/awesome-made-by-brazilians)
- [https://github.com/jeswinsimon/awesome-made-by-indians](https://github.com/jeswinsimon/awesome-made-by-indians)
- [https://github.com/mvximenko/awesome-made-by-japanese](https://github.com/mvximenko/awesome-made-by-japanese)


![a.jpg](https://img-blog.csdnimg.cn/img_convert/630188bc9cb81a444233d4e43e7d3261.png)


## ★16. Alloy Worker

#### Site: [https://github.com/AlloyTeam/alloy-worker](https://github.com/AlloyTeam/alloy-worker)

The transaction-oriented high-availability Web Worker communication framework has withstood the test of large-scale front-end projects such as **Tencent Documents**.


![h.jpg](https://img-blog.csdnimg.cn/img_convert/de13bd13f269bd31eab3ec8187246375.png)

## ★17. Mall low-code platform

#### Site: [https://github.com/wangyuan389/mall-cook](https://github.com/wangyuan389/mall-cook)

Mall-Cook is a visual mall construction platform developed based on vue, including multi-page visual construction, Json Schema generator (visual construction material control panel), and realizing a component pipeline standard access platform. The latest version uses uni-app to reconstruct materials and template projects, and supports the generation of H5 and mini-program multi-terminal malls.


![1.gif](https://img-blog.csdnimg.cn/img_convert/5b5ad9a00b462189e16955926377059f.gif)


![2.gif](https://img-blog.csdnimg.cn/img_convert/3d1ca5003b8286188ff87ee676c0b846.gif)

## ★18. WebGPU Samples

#### Site: [https://github.com/austinEng/webgpu-samples](https://github.com/austinEng/webgpu-samples)

WebGPU is the latest Web 3D graphics API. Currently, there are very few learning materials about WebGPU on the Internet. This project contains a series of WebGPU examples and code, which can help you get started quickly.


![a.gif](https://img-blog.csdnimg.cn/img_convert/f2f21b11e0e1b4cd4e52f94e4b8500e3.gif)

## ★19. Front-end information TNT Weekly

#### Site: [https://github.com/tnfe/TNT-Weekly](https://github.com/tnfe/TNT-Weekly)

The weekly project maintained by the Tencent News **TNTWeb** front-end team recommends you the latest excellent articles and industry progress in the front-end field at home and abroad every week. The project has received _3.5k+_ stars since it was open sourced and is deeply loved by the majority of front-end developers in the industry.

![2.jpg](https://img-blog.csdnimg.cn/img_convert/a4b8741925c7dd20e12ee0bcf7860620.png)

## ★20. Programmers cook at home

#### Site: [https://github.com/Anduin2017/HowToCook](https://github.com/Anduin2017/HowToCook)

There are recipes everywhere. You can find them all over the Internet, and there are even video tutorials, but there will always be elusive "appropriate amounts" and "seasonings" that pop up from time to time. This is a problem for programmers who have always been cautious and clear in their work. It was really a headache, so the "HowToCook" project was born.


![a.jpg](https://img-blog.csdnimg.cn/img_convert/9ee3ca2a095e518c6b48f7dff7667778.png)


---

Thank you for your patience in reading!



![2](https://img-blog.csdnimg.cn/img_convert/c6246fd644999612a79fafe7f5b59cc6.png)