Projects
During the design process of the project, different business scenarios were selected: Games, Utilities, Charts, Drawing Boards, Surveys, Data Tables, Blog Sites, Document Sites, etc., so that the final Benchmark is closer to real-world software engineering.
Web-Bench covers the core Web standards and mainstream development frameworks that Web application development relies on.
Web Standards are the basic knowledge of Web development, especially those that are frequently used, offer extensive functionality, and enable more complex features. We have selected the core standards that Web applications rely on, covering HTML, CSS and JavaScript.
| Project | Domain | Description | Scenario |
|---|---|---|---|
| Flex | CSS | The layout of items in one dimension. The children of a flex container can be laid out in any direction, and can "flex" their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. It is widely used in almost all web applications. | Homepage |
| Grid | CSS | A two-dimensional grid-based layout system. The children of a grid container can be positioned into arbitrary slots in a predefined flexible or fixed-size layout grid. It's more powerful than flexbox and also widely used in web applications. | Homepage |
| Table | CSS | The element represents tabular data that is information presented in a two-dimensional table comprised of rows and columns of cells containing data. It was used for layout in the early days of the Web, but now it is only recommended for displaying data. | Sheet |
| Float | CSS | It was originally designed for mixed text and image layout scenarios (text wrapped around images), and was used to implement multi-column layouts in the early days. Its layout function can be replaced by Flexbox or Grid. | Homepage |
| Selector | CSS | Patterns that match against elements in a tree, and as such form one of several technologies that can be used to select nodes in a document. | Utility |
| Color | CSS | CSS Color, the basis of page design, involves color definition, functions, etc. | Utility |
| ESModule | Javascript | ECMAScript Module System. ECMAScript is Javascript Language Standard, ensures the interoperability of web pages across different web browsers. | Utility |
| DOM | Javascript | DOM (Document Object Model) defines a platform-neutral model for events, aborting activities, and node trees. The main technology to manipulate web page elements. | IDE |
| DOM1 | Javascript | Single-file version of DOM project. The impact of the number of user-compared files and reference relationships on code generation for large models. | IDE |
| Form | Javascript | A form is a component of a web page that has form controls, such as text, buttons, checkboxes, range, or color picker controls. A user can interact with such a form, providing data that can then be sent to the server for further processing (e.g. returning the results of a search or calculation). | Survey |
| BOM | Javascript | BOM (Browser Object Model) is the core part of JavaScript on the web. BOM contains many modern browser features, like Window, Location, History, Navigator, Timer, Dialog and more. | Doc |
| SVG | Javascript | Scalable Vector Graphics. A XML-based language for describing two-dimensional graphics. SVG drawings can be interactive and dynamic. Animations can be defined and triggered either declaratively. Widely used in data visualization (including chart library) and graphics processing. | Graph |
| Canvas | Javascript | Drawing graphics via JavaScript and the HTML <canvas> element. It can be used for animation, game graphics, data visualization, photo manipulation, and real-time video processing. | Game |
| Typescript | Javascript | A strongly typed programming language that builds on JavaScript. TypeScript code converts to JavaScript, which runs anywhere JavaScript runs. Most modern web applications are now built with TypeScript. | Utility |
| Survey | Javascript | A minimal survey system including a survey designer and preview page. including types of questions: Single-Selection Question, Multiple-Selection Question, Open-Ended Question, NPS Question, Likert Question and more. | Survey |
| Draw | Javascript | A minimal draw application with typical basic shapes (Line, Ellipse, Rectangle) and actions (Move, Rotate, Zoom, Delete, Copy, Fill). | Graph |
| SVG-Solar | Javascript | A two-dimensional solar system simulation system created based on SVG technology. | Game |
| SVG-Chart | Javascript | A chart library based on SVG technology, including common charts: LineChart, ScatterChart, StepChart, AreaChart, BarChart, PieChart. | Chart |
| Chart | Javascript | A Chart Builder based on SVG-Chart Project, to generate a chart with user's config. | Chart |
In the early stages of Web development, there were not many development frameworks, and various Web applications could be developed using native technologies. However, with the rise of Web 2.0, both the technical complexity and application scale of Web applications have increased dramatically, and the development efficiency based solely on native Web technology has been challenged. Development frameworks have brought greater abstraction capabilities, improved development efficiency, and enhanced collaboration to Web development, covering its main aspects:
- UI Framework: Usually provides a component-based development model and supporting development tools to improve the efficiency of single-unit development and collaboration, such as React, Vue, Angular, Threejs, etc.
- State Management: UI state management is one of the core tasks in Web application development. Excellent frameworks will simplify the state model and improve development and maintenance efficiency, such as Redux, Zustand, Jotai, Mobx, etc.
- CSS Framework: Improves CSS maintainability and development efficiency by enhancing basic capabilities such as variables, modules, functions, or providing CSS utilities. Examples include SASS, LESS, Stylus, Tailwind, etc.
- Build: Web applications eventually run in browsers, and during the development phase, JS code and various resources (CSS, images, icons etc.) are usually split into many modules (or files), which require modular packaging using build tools, as well as optimization such as merging and compression. At the same time, build tools are also required to unify the development experience — handling JS syntax conversion, CSS preprocessing, and integration of various tools (including linting, formatting, testing frameworks, etc.) — such as Webpack, Vite, Parcel, etc.
- Fullstack Framework: Fullstack usually refers to the ability of developers to handle both front-end (such as UI) and back-end (such as data and logic processing) development. In this context, it refers to frameworks that support both front-end and back-end development, such as Next.js, Nuxt, Express.js, etc.
- Database Framework Data management is a relatively independent and core part of back-end logic. Data can be managed directly via SQL using tools like SQLite, or through object-relational mapping frameworks such as Prisma and Sequelize.
| Project | Domain | Stars/K | Description | Scenario |
|---|---|---|---|---|
| React | UI | 229 | Developers can build user interfaces with components. A component is a piece of the user interface that has its own logic and appearance. A component can be as small as a button, or as large as an entire page. Vue, Angular are the similar frameworks. React has also become one of the preferred UI frameworks in software engineering practice. | Blog |
| Vue | UI | 208 | Developers create reusable components with a template syntax that combines HTML with component logic, and features a reactivity system that automatically keeps the DOM in sync with the application state. | Blog |
| Angular | UI | 96 | Developers create powerful components with dependency injection, and then organize them into modules to build enterprise-level applications. With its change detection mechanism and Ivy rendering engine, it efficiently updates and renders components when data changes, resulting in high-performance applications. | Blog |
| Svelte | UI | 79 | Svelte takes a unique approach by compiling components into efficient vanilla JavaScript at build time, rather than interpreting code at runtime like other frameworks. With its reactive system, it automatically updates the DOM without a virtual DOM, resulting in smaller bundle sizes and better runtime performance. | Blog |
| Threejs | UI | 103 | Developers can harness the powerful capabilities of WebGL without needing to delve into its underlying complexities. It offers a rich set of tools and features, including geometries, materials, lighting, shadows, and animations, making the creation of realistic 3D scenes and interactive experiences more intuitive and convenient. | Game |
| React-no-ts | UI | 229 | A vanilla javascript version of react project based on React project. | Blog |
| Tailwind | CSS | 86 | A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in the markup. After the rise of LLM applications in the programming field, Tailwind has continued to attract attention for its simplicity and strong expressiveness, and the community activity has continued to increase. | Homepage |
| Styled Components | CSS | 40 | Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress. | Blog |
| Less | CSS | 17 | Less (which stands for Leaner Style Sheets) is a backwards-compatible language extension for CSS. | Survey |
| Sass | CSS | 15 | Provide programming language features to extend CSS, like variables, mixins, nesting, operations, functions and modules. LESS and Stylus are two other similar libraries. SASS (along with LESS and Stylus) is frequently used in large web projects, mainly because it can bring better collaboration efficiency (such as encapsulation into modules and flexible variables). | Survey |
| Stylus | CSS | 11 | An expressive, robust, feature-rich CSS language built for Node.js. | Survey |
| Unocss | CSS | 17 | The instant on-demand atomic CSS engine. | Homepage |
| Next.js | Fullstack | 127 | A React framework for building fullstack web applications. Use React Components to build user interfaces with a bunch of features out of the box, like Server-side rendering, Static site generation, Routing system and more. Use its API Routes (serverless functions) to handle database queries, authentication, form submissions and any backend logic. | Shopping |
| Express.js | Fullstack | 65 | A minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications. | Shopping |
| Sequelize | Fullstack | 30 | A powerful Object-Relational Mapping (ORM) library for Node.js that provides a high-level abstraction for interacting with relational databases like PostgreSQL, MySQL, SQLite, and MSSQL. | Shopping |
| Nosql | Fullstack | 27 | A popular NoSQL database that provides high performance, high availability, and easy scalability for modern applications. | Shopping |
| Nuxt | Fullstack | 57 | A powerful Vue framework that enables features like server-side rendering and static site generation for modern web applications. | Shopping |
| Lowdb | Fullstack | 22 | A minimalist database based on JSON. | Shopping |
| Fastify | Fullstack | 33 | A high-performance, low overhead web framework for Node.js. It's designed with performance in mind and is one of the fastest web frameworks available for Node.js. | Shopping |
| Prisma | Fullstack | 42 | Developers can work with databases with intuitive data model, automated migrations, type-safety & auto-completion. | Shopping |
| Fastify-React | Fullstack | 33 | Fastify implements the backend interface and React implements pure frontend logic. | Shopping |
| Webpack | BuildTool | 64 | A static module bundler for modern JavaScript applications. It internally builds a dependency graph from one or more entry points and then combines every module your project needs into one or more bundles, which are static assets to serve your content from. For a long time, Webpack has been the most widely used build tool in the open source community. In recent years, it has also been challenged by Configless build tools represented by Parcel and Vite, and it is also constantly evolving. | Utility |
| Vite | BuildTool | 68 | It provides: A dev server that provides rich feature enhancements to native ES modules, for example Hot Module Replacement (HMR). A build command that bundles your code with Rollup, pre-configured to output optimized static assets for production. An efficient build tool widely used by the community. | Utility |
| Parcel | BuildTool | 43 | The zero configuration build tool for the web. Parcel combines a great out-of-the-box development experience with a scalable architecture that can take your project from just getting started to massive production application. | Utility |
| Redux | State | 61 | Provide a centralized store for state that needs to be used across your entire application, with rules ensuring that state can only be updated in a predictable fashion. With its unidirectional data flow, it makes it easier to understand how data changes in your application, leading to more maintainable code and easier debugging. | Blog |
| Mobx | State | 28 | MobX is a battle-tested state management library that makes it simple to connect the reactive data of your application with the UI.Its significance stems from its reactive programming model, observable-based approach, and ability to provide automatic tracking of state dependencies. | Blog |
| Zustand | State | 51 | It offers a simple yet powerful store that is unopinionated and can be used with any UI framework, with a focus on simplicity and ease of use. With its subscriber pattern and hooks-first approach, it makes state management straightforward while still offering advanced capabilities like middleware and transient updates. Compared with Redux, Zustand manages the same amount of state with less code and is more concise, and seems to be more suitable for LLM code generation. The test data of this benchmark also supports this view. | Blog |
| Jotai | State | 20 | Jotai is a primitive and flexible state management library for React applications. Its significance stems from its atom-based approach, minimal API, and ability to provide granular reactivity without the boilerplate. | Blog |
| Calculator | Other | The first project in web-bench. A calculator with basic and science computing features. | Utility | |
| Calculator-files | Other | Multiple-files version of Calculator project. | Utility | |
| Expression Editor | Other | A basic expression editor with features like: parenthesis auto closing, syntax highlighting, lint, autocompletion and more. | Sheet |