# TypeScript project architecture examples

Interactive architecture diagrams of the 1,000 most-starred open-source TypeScript 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 TypeScript projects here, the median diagram has 21 components. 64% draw a data store (most often PostgreSQL, files on disk and SQLite), 31% have a command-line interface and 23% a web interface.

23% have an LLM or AI-model component, 21% speak MCP, 29% have a plugin or extension system, 52% are split into workspace packages (packages/, apps/, crates/ and similar) and 10% draw a queue or event bus.

The files their components link to most are index.ts (71), server.ts (25), storage.ts (20), main.ts (19) and App.tsx (18).

Group names that recur: “platform services” (12), “agent runtime” (10), “user interfaces” (10), “integrations” (8) and “core runtime” (6).

## Repositories 1 to 50 of 1,000

1. [freecodecamp/freecodecamp](https://gitdiagram.com/freecodecamp/freecodecamp) (458k stars): freeCodeCamp is a full-stack, self-paced learning platform: learners navigate curriculum, work through interactive challenges and assessments, track progress, and earn verifiable… Markdown: https://gitdiagram.com/freecodecamp/freecodecamp.md
2. [morluto/rea](https://gitdiagram.com/morluto/rea) (445k stars): REA is a local reverse-engineering toolkit exposed through an MCP server and CLI. Markdown: https://gitdiagram.com/morluto/rea.md
3. [openclaw/openclaw](https://gitdiagram.com/openclaw/openclaw) (394k stars): OpenClaw is a self-hosted assistant whose Gateway coordinates sessions, agent execution, tools, and messaging channels; users reach it through the Control UI, CLI/TUI, or… Markdown: https://gitdiagram.com/openclaw/openclaw.md
4. [nilbuild/developer-roadmap](https://gitdiagram.com/nilbuild/developer-roadmap) (369k stars): This repository is the community-maintained content source for roadmap.sh: roadmaps are interactive learning maps, with related best practices and questions. Markdown: https://gitdiagram.com/nilbuild/developer-roadmap.md
5. [kamranahmedse/developer-roadmap](https://gitdiagram.com/kamranahmedse/developer-roadmap) (368k stars): roadmap.sh is a community-driven learning platform for developers. Markdown: https://gitdiagram.com/kamranahmedse/developer-roadmap.md
6. [deepseek-ai/deepseek-harness](https://gitdiagram.com/deepseek-ai/deepseek-harness) (277k stars): DeepSeek Harness is a plugin-oriented agent harness with a local Web UI and Desktop host. Markdown: https://gitdiagram.com/deepseek-ai/deepseek-harness.md
7. [anomalyco/opencode](https://gitdiagram.com/anomalyco/opencode) (225k stars): OpenCode is an open-source AI coding agent with terminal and desktop interfaces. Markdown: https://gitdiagram.com/anomalyco/opencode.md
8. [vuejs/vue](https://gitdiagram.com/vuejs/vue) (210k stars): This is the end-of-life Vue 2 source repository: an ES5-compatible, progressive UI framework. Markdown: https://gitdiagram.com/vuejs/vue.md
9. [n8n-io/n8n](https://gitdiagram.com/n8n-io/n8n) (210k stars): n8n is a visual workflow-automation platform with AI-agent capabilities and a large integration ecosystem. Markdown: https://gitdiagram.com/n8n-io/n8n.md
10. [microsoft/vscode](https://gitdiagram.com/microsoft/vscode) (194k stars): Code - OSS is the open-source development repository for Visual Studio Code, an extensible editor supporting code editing, navigation and understanding, debugging, and… Markdown: https://gitdiagram.com/microsoft/vscode.md
11. [firecrawl/firecrawl](https://gitdiagram.com/firecrawl/firecrawl) (192k stars): Firecrawl is a web-data API for AI agents: clients request search, scraping, discovery, and asynchronous jobs, then receive web content in LLM-ready formats. Markdown: https://gitdiagram.com/firecrawl/firecrawl.md
12. [anthropics/claude-code](https://gitdiagram.com/anthropics/claude-code) (150k stars): Claude Code is a terminal-based coding agent, with documented use in IDEs and GitHub; its principal user workflow is to request coding or Git work in natural language and receive… Markdown: https://gitdiagram.com/anthropics/claude-code.md
13. [iptv-org/iptv](https://gitdiagram.com/iptv-org/iptv) (139k stars): IPTV is a community-maintained collection of public live-stream links, organized as M3U playlists. Markdown: https://gitdiagram.com/iptv-org/iptv.md
14. [yangshun/tech-interview-handbook](https://gitdiagram.com/yangshun/tech-interview-handbook) (138k stars): The repository is organized as a monorepo containing multiple “apps” and “packages.” The main public-facing components are the “portal” app (in apps/portal) and the “website” (in… Markdown: https://gitdiagram.com/yangshun/tech-interview-handbook.md
15. [garrytan/gstack](https://gitdiagram.com/garrytan/gstack) (136k stars): gstack is an AI-assisted software factory: users invoke specialist workflows through a coding-agent host, move from product planning toward implementation, then review, test, and… Markdown: https://gitdiagram.com/garrytan/gstack.md
16. [excalidraw/excalidraw](https://gitdiagram.com/excalidraw/excalidraw) (133k stars): Excalidraw is a hand-drawn-style whiteboard editor, with a reusable editor package and a showcase web app. Markdown: https://gitdiagram.com/excalidraw/excalidraw.md
17. [sst/opencode](https://gitdiagram.com/sst/opencode) (132k stars): This is a Turborepo-powered monorepo for “OpenCode,” a provider-agnostic AI coding agent with a client/server architecture. Markdown: https://gitdiagram.com/sst/opencode.md
18. [shadcn-ui/ui](https://gitdiagram.com/shadcn-ui/ui) (124k stars): shadcn/ui is an open-source, copy-into-your-project component ecosystem: a CLI installs, customizes, migrates, and publishes registry content; a documentation site exposes… Markdown: https://gitdiagram.com/shadcn-ui/ui.md
19. [earendil-works/pi](https://gitdiagram.com/earendil-works/pi) (119k stars): Pi is an extensible coding-agent harness with interactive, print/JSON, RPC, and TypeScript-SDK entry points. Markdown: https://gitdiagram.com/earendil-works/pi.md
20. [immich-app/immich](https://gitdiagram.com/immich-app/immich) (115k stars): Immich is a self-hosted photo and video management product. Markdown: https://gitdiagram.com/immich-app/immich.md
21. [thedotmack/claude-mem](https://gitdiagram.com/thedotmack/claude-mem) (115k stars): Claude-Mem is a persistent memory system for coding agents: it captures work, turns it into searchable observations, and supplies relevant context to later sessions. Markdown: https://gitdiagram.com/thedotmack/claude-mem.md
22. [supabase/supabase](https://gitdiagram.com/supabase/supabase) (111k stars): Supabase is a Postgres development platform combining a hosted dashboard with open-source database, API, authentication, realtime, storage, and functions services. Markdown: https://gitdiagram.com/supabase/supabase.md
23. [paperclipai/paperclip](https://gitdiagram.com/paperclipai/paperclip) (110k stars): Paperclip is an open-source control plane for teams of AI agents. Markdown: https://gitdiagram.com/paperclipai/paperclip.md
24. [google-gemini/gemini-cli](https://gitdiagram.com/google-gemini/gemini-cli) (107k stars): Gemini CLI is a terminal-based AI coding agent. Markdown: https://gitdiagram.com/google-gemini/gemini-cli.md
25. [angular/angular](https://gitdiagram.com/angular/angular) (101k stars): Angular is a TypeScript/JavaScript platform for building web applications. Markdown: https://gitdiagram.com/angular/angular.md
26. [mendableai/firecrawl](https://gitdiagram.com/mendableai/firecrawl) (100k stars): Multiple SDK implementations (Python, Node.js, Rust, Go) Markdown: https://gitdiagram.com/mendableai/firecrawl.md
27. [ant-design/ant-design](https://gitdiagram.com/ant-design/ant-design) (99.5k stars): Ant Design is a React UI component library for enterprise web applications. Markdown: https://gitdiagram.com/ant-design/ant-design.md
28. [tailwindlabs/tailwindcss](https://gitdiagram.com/tailwindlabs/tailwindcss) (97.8k stars): Tailwind CSS is a utility-first CSS framework. Markdown: https://gitdiagram.com/tailwindlabs/tailwindcss.md
29. [nexu-io/open-design](https://gitdiagram.com/nexu-io/open-design) (97.7k stars): OpenDesign is a local-first, agent-native design studio: a user starts with a brief, an agent runtime works on project files, and the daemon exposes generated artifacts for… Markdown: https://gitdiagram.com/nexu-io/open-design.md
30. [microsoft/playwright](https://gitdiagram.com/microsoft/playwright) (97k stars): Playwright is a cross-browser automation and testing framework, also used for scripts and AI-agent workflows. Markdown: https://gitdiagram.com/microsoft/playwright.md
31. [puppeteer/puppeteer](https://gitdiagram.com/puppeteer/puppeteer) (94k stars): Sub-components for both Chrome and Firefox support Markdown: https://gitdiagram.com/puppeteer/puppeteer.md
32. [stirling-tools/stirling-pdf](https://gitdiagram.com/stirling-tools/stirling-pdf) (93.3k stars): Stirling PDF is an open-source PDF editing platform for browser, desktop, and self-hosted use. Markdown: https://gitdiagram.com/stirling-tools/stirling-pdf.md
33. [storybookjs/storybook](https://gitdiagram.com/storybookjs/storybook) (91.1k stars): Storybook is a TypeScript/JavaScript monorepo that ships a local UI workshop: it discovers component stories, builds or serves them, renders them in isolation, and provides… Markdown: https://gitdiagram.com/storybookjs/storybook.md
34. [openhands/openhands](https://gitdiagram.com/openhands/openhands) (91k stars): Agent Canvas is a self-hosted developer control center for coding-agent conversations and automations across local, remote, and cloud backends. Markdown: https://gitdiagram.com/openhands/openhands.md
35. [opencut-app/opencut](https://gitdiagram.com/opencut-app/opencut) (90.6k stars): OpenCut is a ground-up rewrite of a free video editor, but the sampled repository is an early scaffold: the web has routing and an editor route, the desktop launches a shell with… Markdown: https://gitdiagram.com/opencut-app/opencut.md
36. [mermaid-js/mermaid](https://gitdiagram.com/mermaid-js/mermaid) (90.5k stars): Mermaid turns Markdown-inspired diagram text into rendered diagrams; its README describes this author-to-result workflow and broad diagramming purpose. Markdown: https://gitdiagram.com/mermaid-js/mermaid.md
37. [modelcontextprotocol/servers](https://gitdiagram.com/modelcontextprotocol/servers) (90.5k stars): This repository provides independent MCP reference servers. Markdown: https://gitdiagram.com/modelcontextprotocol/servers.md
38. [chatgptnextweb/nextchat](https://gitdiagram.com/chatgptnextweb/nextchat) (88.9k stars): NextChat is a browser-first AI assistant for chatting with multiple hosted or self-hosted model providers. Markdown: https://gitdiagram.com/chatgptnextweb/nextchat.md
39. [egonex-ai/understand-anything](https://gitdiagram.com/egonex-ai/understand-anything) (88.4k stars): Understand Anything analyzes codebases, knowledge bases, and Figma designs into knowledge graphs, then presents them in an interactive dashboard and provides chat, explanation… Markdown: https://gitdiagram.com/egonex-ai/understand-anything.md
40. [chatgptnextweb/chatgpt-next-web](https://gitdiagram.com/chatgptnextweb/chatgpt-next-web) (87.6k stars) Markdown: https://gitdiagram.com/chatgptnextweb/chatgpt-next-web.md
41. [koala73/worldmonitor](https://gitdiagram.com/koala73/worldmonitor) (87.6k stars): World Monitor is a real-time global intelligence dashboard, with API and agent-facing interfaces as additional ways to access its data. Markdown: https://gitdiagram.com/koala73/worldmonitor.md
42. [realworld-apps/realworld](https://gitdiagram.com/realworld-apps/realworld) (84.2k stars): RealWorld is a cross-framework specification and validation project for a Medium-style application, not a single application implementation. Markdown: https://gitdiagram.com/realworld-apps/realworld.md
43. [gothinkster/realworld](https://gitdiagram.com/gothinkster/realworld) (83k stars) Markdown: https://gitdiagram.com/gothinkster/realworld.md
44. [lobehub/lobehub](https://gitdiagram.com/lobehub/lobehub) (82.8k stars): LobeHub is a workspace for building and operating AI agents, with chat and team collaboration as central user workflows. Markdown: https://gitdiagram.com/lobehub/lobehub.md
45. [cheaper-inference/omniroute](https://gitdiagram.com/cheaper-inference/omniroute) (82.4k stars): OmniRoute is a self-hosted AI gateway with a dashboard and CLI. Markdown: https://gitdiagram.com/cheaper-inference/omniroute.md
46. [vitejs/vite](https://gitdiagram.com/vitejs/vite) (81.8k stars): 1. This repository is the Vite monorepo. Markdown: https://gitdiagram.com/vitejs/vite.md
47. [stablyai/orca](https://gitdiagram.com/stablyai/orca) (81.6k stars): Orca is a cross-platform AI-agent orchestration desktop app with a mobile companion. Markdown: https://gitdiagram.com/stablyai/orca.md
48. [ruvnet/ruflo](https://gitdiagram.com/ruvnet/ruflo) (80.8k stars): Ruflo is an agent meta-harness for Claude Code, Codex, and MCP clients. Markdown: https://gitdiagram.com/ruvnet/ruflo.md
49. [hoppscotch/hoppscotch](https://gitdiagram.com/hoppscotch/hoppscotch) (80.5k stars): Hoppscotch is an API development client with a cloud-capable collaboration backend. Markdown: https://gitdiagram.com/hoppscotch/hoppscotch.md
50. [coder/code-server](https://gitdiagram.com/coder/code-server) (79.8k stars): code-server runs the VS Code server on a remote machine and serves its browser client over HTTP and WebSockets. Markdown: https://gitdiagram.com/coder/code-server.md

Next page: https://gitdiagram.com/architecture-examples/typescript/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.