# JavaScript project architecture examples

Interactive architecture diagrams of 934 open-source JavaScript repositories with a GitDiagram architecture diagram, most stars first. Each diagram shows the project's main components, how they connect, and links every part to its file on GitHub.

Across the 200 most-starred JavaScript projects here, the median diagram has 20 components. 40% draw a data store (most often a cache and files on disk), 20% have a command-line interface and 9% a web interface.

30% have a plugin or extension system and 14% are split into workspace packages (packages/, apps/, crates/ and similar).

The files their components link to most are index.js (65), main.js (17), app.js (12), index.ts (12) and server.js (9).

## Repositories 1 to 50 of 934

1. [affaan-m/ecc](https://gitdiagram.com/affaan-m/ecc) (300k stars): ECC is a harness-native agent engineering system: an operator starts or manages agent sessions, coordinates work across harnesses, and inspects session activity. Markdown: https://gitdiagram.com/affaan-m/ecc.md
2. [react/react](https://gitdiagram.com/react/react) (251k stars): React is a component-based UI library spanning client rendering, server rendering, cross-boundary Flight streaming, and an optimizing compiler. Markdown: https://gitdiagram.com/react/react.md
3. [facebook/react](https://gitdiagram.com/facebook/react) (251k stars): React is a JavaScript library for building declarative, component-based UIs across web, server, and mobile environments. Markdown: https://gitdiagram.com/facebook/react.md
4. [trekhleb/javascript-algorithms](https://gitdiagram.com/trekhleb/javascript-algorithms) (197k stars): This is an educational JavaScript repository of standalone data-structure and algorithm implementations, each paired with explanatory documentation and Jest verification. Markdown: https://gitdiagram.com/trekhleb/javascript-algorithms.md
5. [cyc2018/cs-notes](https://gitdiagram.com/cyc2018/cs-notes) (186k stars): CS-Notes is a curated Chinese-language computer science study and interview-preparation resource, not an application runtime. Markdown: https://gitdiagram.com/cyc2018/cs-notes.md
6. [dietrichgebert/ponytail](https://gitdiagram.com/dietrichgebert/ponytail) (184k stars): Ponytail is an AI-agent coding skill/plugin that injects mode-specific guidance, encouraging minimal but complete, safe changes. Markdown: https://gitdiagram.com/dietrichgebert/ponytail.md
7. [affaan-m/everything-claude-code](https://gitdiagram.com/affaan-m/everything-claude-code) (178k stars): - This is a cross-harness configuration and automation platform for AI coding tools, not a product app. Markdown: https://gitdiagram.com/affaan-m/everything-claude-code.md
8. [snailclimb/javaguide](https://gitdiagram.com/snailclimb/javaguide) (159k stars): JavaGuide is a technical learning and interview-preparation publishing site, not a Java application runtime. Markdown: https://gitdiagram.com/snailclimb/javaguide.md
9. [airbnb/javascript](https://gitdiagram.com/airbnb/javascript) (148k stars): This repository provides Airbnb’s JavaScript style guidance and shareable ESLint configurations, including a base JavaScript configuration and a React extension. Markdown: https://gitdiagram.com/airbnb/javascript.md
10. [vercel/next.js](https://gitdiagram.com/vercel/next.js) (143k stars): Next.js is a framework for building full-stack React applications, backed by JavaScript and Rust tooling. Markdown: https://gitdiagram.com/vercel/next.js.md
11. [chalarangelo/30-seconds-of-code](https://gitdiagram.com/chalarangelo/30-seconds-of-code) (127k stars) Markdown: https://gitdiagram.com/chalarangelo/30-seconds-of-code.md
12. [nodejs/node](https://gitdiagram.com/nodejs/node) (123k stars): Node.js is a cross-platform JavaScript runtime. Markdown: https://gitdiagram.com/nodejs/node.md
13. [mrdoob/three.js](https://gitdiagram.com/mrdoob/three.js) (116k stars): Three.js is a browser-oriented JavaScript 3D library. Markdown: https://gitdiagram.com/mrdoob/three.js.md
14. [addyosmani/agent-skills](https://gitdiagram.com/addyosmani/agent-skills) (110k stars): Agent Skills is a content-first toolkit that packages reusable engineering workflows for AI coding agents, with lifecycle commands and skills as its main user-facing surface. Markdown: https://gitdiagram.com/addyosmani/agent-skills.md
15. [axios/axios](https://gitdiagram.com/axios/axios) (109k stars): Axios is a promise-based HTTP client for browser and Node.js. Markdown: https://gitdiagram.com/axios/axios.md
16. [facebook/create-react-app](https://gitdiagram.com/facebook/create-react-app) (104k stars): This is an open-source monorepo tool (Create React App) for bootstrapping React single-page applications with zero build configuration. Markdown: https://gitdiagram.com/facebook/create-react-app.md
17. [react/create-react-app](https://gitdiagram.com/react/create-react-app) (103k stars): 1. This repository is a monorepo for the Create React App toolchain, not a single application. Markdown: https://gitdiagram.com/react/create-react-app.md
18. [mui/material-ui](https://gitdiagram.com/mui/material-ui) (99.3k stars): Material UI is a React component library, with related packages for icons, theming, advanced components, framework integration, and documentation. Markdown: https://gitdiagram.com/mui/material-ui.md
19. [microsoft/web-dev-for-beginners](https://gitdiagram.com/microsoft/web-dev-for-beginners) (97k stars): This repository is a beginner web-development curriculum, not one integrated application. Markdown: https://gitdiagram.com/microsoft/web-dev-for-beginners.md
20. [ryanmcdermott/clean-code-javascript](https://gitdiagram.com/ryanmcdermott/clean-code-javascript) (94.7k stars): This repository is a JavaScript software-engineering principles guide, not an executable application. Markdown: https://gitdiagram.com/ryanmcdermott/clean-code-javascript.md
21. [tt-a1i/archify](https://gitdiagram.com/tt-a1i/archify) (93.1k stars): Archify is an AI-agent-oriented tool for turning descriptions or repository understanding tasks into interactive HTML diagrams and explainer pages. Markdown: https://gitdiagram.com/tt-a1i/archify.md
22. [louislam/uptime-kuma](https://gitdiagram.com/louislam/uptime-kuma) (92k stars): Uptime Kuma is a self-hosted monitoring application. Markdown: https://gitdiagram.com/louislam/uptime-kuma.md
23. [leonxlnx/taste-skill](https://gitdiagram.com/leonxlnx/taste-skill) (90.3k stars): Taste Skill is a repository of portable instruction files for AI agents building or redesigning frontends, plus image-generation guidance. Markdown: https://gitdiagram.com/leonxlnx/taste-skill.md
24. [sveltejs/svelte](https://gitdiagram.com/sveltejs/svelte) (88.2k stars): Svelte turns declarative components into JavaScript that updates the DOM. Markdown: https://gitdiagram.com/sveltejs/svelte.md
25. [anuraghazra/github-readme-stats](https://gitdiagram.com/anuraghazra/github-readme-stats) (79.8k stars): GitHub Readme Stats serves dynamically generated SVG cards: a README image request reaches an API endpoint, which checks access and query options, fetches the relevant data, then… Markdown: https://gitdiagram.com/anuraghazra/github-readme-stats.md
26. [career-ops-hq/career-ops](https://gitdiagram.com/career-ops-hq/career-ops) (77.4k stars): career-ops is a local-first AI job-search agent with a web interface and terminal dashboard. Markdown: https://gitdiagram.com/career-ops-hq/career-ops.md
27. [fortawesome/font-awesome](https://gitdiagram.com/fortawesome/font-awesome) (77k stars): Font Awesome Free is an icon library and toolkit. Markdown: https://gitdiagram.com/fortawesome/font-awesome.md
28. [typicode/json-server](https://gitdiagram.com/typicode/json-server) (75.7k stars): JSON Server turns a JSON or JSON5 data file into a local REST API: the CLI loads and normalizes the file, creates the HTTP app, and serves requests. Markdown: https://gitdiagram.com/typicode/json-server.md
29. [juliangarnier/anime](https://gitdiagram.com/juliangarnier/anime) (73.1k stars): Anime.js is a JavaScript animation library. Markdown: https://gitdiagram.com/juliangarnier/anime.md
30. [hakimel/reveal.js](https://gitdiagram.com/hakimel/reveal.js) (70.9k stars): Core Engine: Represent the central JavaScript modules under the “js” directory (including controllers, components, and utilities). Markdown: https://gitdiagram.com/hakimel/reveal.js.md
31. [expressjs/express](https://gitdiagram.com/expressjs/express) (69.5k stars): Express is a Node.js web framework. Markdown: https://gitdiagram.com/expressjs/express.md
32. [gorhill/ublock](https://gitdiagram.com/gorhill/ublock) (68.7k stars): uBlock Origin is a browser content blocker: users configure filter lists and site-specific rules, then browser requests and page content are evaluated against those rules to… Markdown: https://gitdiagram.com/gorhill/ublock.md
33. [chartjs/chart.js](https://gitdiagram.com/chartjs/chart.js) (67.7k stars): Chart.js is a JavaScript canvas charting library. Markdown: https://gitdiagram.com/chartjs/chart.js.md
34. [mintplex-labs/anything-llm](https://gitdiagram.com/mintplex-labs/anything-llm) (67.5k stars): AnythingLLM is a multi-user AI application for chatting with documents, configuring model providers, and using agents. Markdown: https://gitdiagram.com/mintplex-labs/anything-llm.md
35. [leonardomso/33-js-concepts](https://gitdiagram.com/leonardomso/33-js-concepts) (66.3k stars): This is an open-source educational repository (“33 Concepts Every JavaScript Developer Should Know”). Markdown: https://gitdiagram.com/leonardomso/33-js-concepts.md
36. [webpack/webpack](https://gitdiagram.com/webpack/webpack) (66k stars): Compiler |->| Compilation |->| Module Graph |->| Chunk Graph | | Markdown: https://gitdiagram.com/webpack/webpack.md
37. [gsd-build/get-shit-done](https://gitdiagram.com/gsd-build/get-shit-done) (64.4k stars): This is the archived GSD repository: a CLI and TypeScript SDK for AI-assisted project planning and workflow management; the README directs ongoing development to GSD Core. Markdown: https://gitdiagram.com/gsd-build/get-shit-done.md
38. [byoungd/up](https://gitdiagram.com/byoungd/up) (63.2k stars): This is an open, continuously updated lifetime-learning guide delivered as a website and downloadable books. Markdown: https://gitdiagram.com/byoungd/up.md
39. [resume/resume.github.com](https://gitdiagram.com/resume/resume.github.com) (62.9k stars): GitHub Résumé is a Ruby/Rack service that generates a public résumé from a GitHub user’s repositories and activity. Markdown: https://gitdiagram.com/resume/resume.github.com.md
40. [lodash/lodash](https://gitdiagram.com/lodash/lodash) (61.6k stars): Project Type: This is not a full-stack application but rather a core utility library for JavaScript. Markdown: https://gitdiagram.com/lodash/lodash.md
41. [atom/atom](https://gitdiagram.com/atom/atom) (61k stars): Atom is a desktop, hackable, Electron-based text editor. Markdown: https://gitdiagram.com/atom/atom.md
42. [bilawalsidhu/gods-eye-view](https://gitdiagram.com/bilawalsidhu/gods-eye-view) (60.7k stars): God’s Eye View is a browser-based 3D globe for exploring public, often live signals, with tracking, contextual analysis, voice control, and scene sharing. Markdown: https://gitdiagram.com/bilawalsidhu/gods-eye-view.md
43. [adam-p/markdown-here](https://gitdiagram.com/adam-p/markdown-here) (60.2k stars): - Markdown Here is a client-side browser/email extension, not a server app. Markdown: https://gitdiagram.com/adam-p/markdown-here.md
44. [jgraph/drawio-desktop](https://gitdiagram.com/jgraph/drawio-desktop) (60.1k stars) Markdown: https://gitdiagram.com/jgraph/drawio-desktop.md
45. [jquery/jquery](https://gitdiagram.com/jquery/jquery) (59.9k stars) Markdown: https://gitdiagram.com/jquery/jquery.md
46. [angular/angular.js](https://gitdiagram.com/angular/angular.js) (58.9k stars): This is not an end-user application but a large, modular client‐side JavaScript framework (AngularJS) designed to be embedded into web pages. Markdown: https://gitdiagram.com/angular/angular.js.md
47. [h5bp/html5-boilerplate](https://gitdiagram.com/h5bp/html5-boilerplate) (57.4k stars): - This is the authoring repo for HTML5 Boilerplate, a static front-end starter template. Markdown: https://gitdiagram.com/h5bp/html5-boilerplate.md
48. [gatsbyjs/gatsby](https://gitdiagram.com/gatsbyjs/gatsby) (55.9k stars): Gatsby is a React framework for building content-rich sites and apps. Markdown: https://gitdiagram.com/gatsbyjs/gatsby.md
49. [santifer/career-ops](https://gitdiagram.com/santifer/career-ops) (54.9k stars): Career-Ops is a local-first job-search workspace, not a hosted service. Markdown: https://gitdiagram.com/santifer/career-ops.md
50. [chinese-poetry/chinese-poetry](https://gitdiagram.com/chinese-poetry/chinese-poetry) (53.5k stars): This repository is a JSON-distributed corpus of Chinese classical poetry, intended for developers building poetry applications. Markdown: https://gitdiagram.com/chinese-poetry/chinese-poetry.md

Next page: https://gitdiagram.com/architecture-examples/javascript/2

More hubs: https://gitdiagram.com/architecture-examples

Counted over GitDiagram's stored diagrams of public repositories, from the names their components and groups carry and the files they link to; the rules are the ones in the [2026 open-source architecture report](https://gitdiagram.com/open-source-architecture-2026). Stars are GitHub's when the diagram was last made. Rebuilt daily: hubs grow as more repositories' languages are known.