In the new year, the front-end field is once again undergoing dramatic changes. The world of open source is changing rapidly, and new surprises emerge every day. Today, we have carefully compiled 15 eye-catching open source projects, covering all aspects of front-end technology. Whether you're an experienced developer or a beginner, I'm sure one of these projects will tug at your heartstrings.
1. draw-a-ui
Site: https://github.com/SawyerHood/draw-a-ui
draw-a-ui cleverly combines tldraw, an open source digital sketchpad, and the GPT-4-Vision API. Users only need to draw wireframes and add annotations through tldraw, and the application can generate stunning HTML-based UI designs. The technical principle behind it is to convert the SVG graphics of the current canvas into PNG format and generate an HTML file with tailwind through the GPT-4-Vision API. This innovative process demonstrates the powerful capabilities of the AI artificial intelligence tool GPT, providing users with a more free and flexible UI design experience.
2.Orillusion
Site: https://github.com/Orillusion/orillusion
Orillusion is a high-performance Web3D rendering engine based on the WebGPU graphics API and has rendering capabilities comparable to those of the PC graphics API. It makes full use of the open capabilities of the GPU, such as flexible GPU cache operations, powerful shaders (Webgpu Shader/WGSL), and the much-anticipated Compute Shader computing core, thereby fully utilizing the parallel processing capabilities of the GPU in the non-rasterization stage. , bringing excellent rendering effects to users.
3. FFCreator
Site: https://github.com/tnfe/FFCreator
FFCreator is a lightweight and flexible video production tool library based on node.js. It makes making videos easy for everyone. Just a few pictures or video clips and a piece of background music can quickly generate a cool video clip. As short videos become increasingly popular today, FFCreator provides a simple and efficient solution for users to quickly produce short videos or to batch synthesize videos on the platform. It has few dependencies, low configuration, and is easy to get started, making video production simple and fast.
4. shadcn-ui
Site: https://github.com/shadcn-ui/ui
shadcn-ui, a UI component library built based on React, uses TailwindCSS to achieve style customization. It is built on top of Radix and provides headless components that solve accessibility and keyboard interaction issues. Unlike libraries such as MUI and ChakraUI, shadcn-ui is not a traditional NPM package. Through terminal commands, you can easily integrate the shadcn-ui component, install dependencies and directly copy the source code for modification.
Several core functions of shadcn-ui include:
Theme and Theme Editor: Easily create custom themes through the graphical interface, and the generated code snippets can be copied and pasted into the program with one click.
Dark mode: Supports the dark mode of Next.js and Vite applications, bringing a unique visual experience to users.
CLI tool: automatically configures projects to implement functions such as framework integration, configuration file generation, and component addition to improve development efficiency.
Rich component library: Contains 40+ basic components to meet diverse development needs.
5. poster-design
Site: https://github.com/palxiao/poster-design
The open source web poster designer is beautiful and powerful, suitable for a variety of design scenarios. It operates smoothly, supports rich interactive details and complete basic functions. Server-side generation ensures that images are unified on multiple ends and supports CSS features. Simple AI cutout tool to remove background with one click. Using technology stacks such as Vue3, the development experience is smooth. Supports PSD parsing, element manipulation, picture material editing and canvas customization. One-stop solution to design needs and improved efficiency.
6. excalidraw
Site: https://github.com/excalidraw/excalidraw
A free, open source online tool with unlimited canvas as its core feature, allowing users to freely express their creativity in the virtual space. Its hand-painted style function makes every stroke and every stroke full of artistic flavor. The application supports multiple languages including Chinese, meeting the needs of global users. Functionally, it provides a wealth of drawing tools, allowing users to draw freely according to personal preferences and needs. In addition, users can also export their works to PNG format for easy sharing and saving. The real-time collaboration and shared link functions allow multiple people to create together on the same canvas, enhancing the efficiency and convenience of teamwork.
7. zerker
Site: https://github.com/flutterkit/zerker
Zerker is a flexible and lightweight Flutter Canvas graphics animation library. With Zerker, you can create many seemingly cumbersome animation effects, such as like animations, pop-up animations, scene transitions, icon effects, etc.
At the same time, you can also create many simple games using Zerker. Zerker includes elements such as sprites, scrolling backgrounds, and atlases, allowing you to easily create game worlds with them.
8. page-spy-web
Site: https://github.com/HuolalaTech/page-spy-web
PageSpy, open sourced by Lalamove, is a tool designed for remote web project debugging. By encapsulating the native API, it realizes intelligent filtering and conversion of parameters when calling native methods, and then generates messages in a standardized format for use by the debugging end. When the debugging terminal receives these message data, it can intuitively display the data in the form of a console-like interactive functional interface, thus greatly improving the efficiency and convenience of developers in the debugging process of remote Web projects.
9. 50projects50days
Site: https://github.com/bradtraversy/50projects50days
This collection contains 50 exquisite front-end small projects, all written in HTML, CSS and JavaScript. Each project comes with web page source code and effect display, providing valuable practical opportunities for beginners and a source of inspiration for experienced front-end developers. Browsing the effects of these projects, novices can deeply experience the charm of front-end technology, and the concise and clear source code greatly lowers the threshold for writing code. Maybe, one of the web page effects will amaze you, a senior developer.
10.hel
Site: https://github.com/Tencent/hel
Provides the ability to introduce remote modules at runtime. The modules are deployed in CDN. After the remote module is released, it can take effect without rebuilding the release. The remote module introduced by hel can be used as a micro-module (that is, a module-level micro-frontend), which supplements the traditional page-level micro-frontend (such as qiankun, unbounded, etc.). Although page-level micro frontends are powerful, they are sometimes too rough in granularity and cannot meet the fine needs of all application scenarios. In situations where more fine-grained micro-frontends are required, such as component or function-level splitting and combination, hel's remote module functionality can exert its unique advantages. By using HEL tools, developers can build and expand front-end applications more accurately and efficiently, thereby improving overall development efficiency and project quality.
11. micro-app
Site: https://github.com/micro-zoe/micro-app
MicroApp, this micro-front-end framework carefully built by JD.com’s front-end team, is based on component-based thinking and implements micro-front-end rendering based on WebComponent-like technology. Its design concept aims to simplify the getting started process, improve work efficiency, and provide users with a smooth and convenient development experience. MicroApp has the characteristics of technology stack independence and business unbundling, and can be seamlessly integrated into any front-end framework, providing powerful support for users' front-end development.
As a page integration solution, the core of micro front-end is to split a large and complex front-end application into multiple independent, flexible and scalable small applications. Each small application can be developed, run, and deployed independently, and then the applications are neatly integrated into a whole. This architecture not only helps reduce the coupling between projects and improve the scalability of the project, but also makes the front-end warehouse more compact and flexible under the micro-front-end architecture. Compared with the traditional single front-end warehouse model, the micro-front-end architecture brings a new perspective and higher maintainability to front-end development.
12. tiny-vue
Site: https://github.com/opentiny/tiny-vue
The highlight of OpenTiny Vue is its Renderless component design. This architecture allows a set of code to be compatible with Vue2, Vue3 and React, and is suitable for both PC and mobile terminals. It supports function-level logic customization and full template replacement, demonstrating extremely high flexibility and secondary development capabilities. Our component library is rich and diverse, with more than 100 components, including common ones in the industry and our own unique components, such as Split panel splitter, IpAddress IP address input box, Calendar calendar and Crop image cropping, etc., which satisfies all kinds of development need.
13. limu
Site: https://github.com/tnfe/limu
limu, short for love immutable, is designed for efficient creation and manipulation of immutable objects. It achieves excellent performance based on a shallow copy on read and a mark modification mechanism on write.
In various scenarios, limu is usually 2 times or more than 20 times faster than immer, showing amazing performance. You can experience the results for yourself by clicking on the online performance demo.
It's worth mentioning that limu does not freeze state by default, which makes it 10 times or more faster than immer in most scenarios. This feature makes the development process smoother and improves development efficiency.
In addition, limu is also very friendly to debugging. You can view your draft directly at any time without worrying about the current status. This makes the debugging process easier and more intuitive.
14. code-run
Site: https://github.com/wanglin2/code-run
A powerful online code editing and preview tool. Its design concept is similar to well-known platforms such as codepen, jsbin, and jsfiddle, but it pays more attention to user experience and rich functions. This tool allows users to write, run and preview code directly on the web page without installing any software or configuring the local environment.
Whether you are a front-end developer, designer, or a student learning to code, this tool can meet your needs. It supports multiple programming languages, including HTML, CSS, JavaScript, and more, allowing you to easily build web pages, test code snippets, or learn new technologies. At the same time, it also provides a real-time preview function, allowing you to instantly view the running effect of the code while writing it.
15. koi-ui
Site: https://github.com/yuxintao6/koi-ui
KOI-ADMIN🌻, a cutting-edge template designed for enterprise-level middle and back-end management, brings together cutting-edge front-end technologies such as Vue3, Vite, TypeScript, Pinia (and its persistence plug-in), Unocss and ElementPlus. Compared with popular backend management templates on the market, KOI-ADMIN is more concise, efficient and easy to understand, and is especially suitable for beginners and novice users.
This project not only has a low learning cost, but is also equipped with detailed code comments and rich cases, making it an ideal choice for enterprise-level projects, small and medium-sized projects, personal projects and even graduation projects.
Thank you for your patience in reading!
Top comments (0)