# darkmortal/online-ide architecture

> Architecture diagram of the GitHub repository darkmortal/online-ide, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-27). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/darkmortal/online-ide
- Repository: https://github.com/darkmortal/online-ide

## Overview

OnlineIDE is a browser-based coding environment: users select a language, edit code and input, run it, and view execution results; they can also save and reopen shareable editor states. The frontend coordinates these interactions through shared editor state, while an Express endpoint delegates compilation and execution. Firebase-backed sharing is a separate persistence branch. The README gives only a product overview, and compiler, fetch, and sharing helper implementations were not sampled, so uncertain internal calls are omitted.

Main entry points: [`frontend/src/App.tsx`](https://github.com/darkmortal/online-ide/blob/main/frontend/src/App.tsx) (App coordinator), [`frontend/src/store/editorSlice.ts`](https://github.com/darkmortal/online-ide/blob/main/frontend/src/store/editorSlice.ts) (Editor state), [`frontend/src/components/share/Share.tsx`](https://github.com/darkmortal/online-ide/blob/main/frontend/src/components/share/Share.tsx) (Share controls), [`frontend/src/lib/dbConfig.ts`](https://github.com/darkmortal/online-ide/blob/main/frontend/src/lib/dbConfig.ts) (Firebase config)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Editor frontend"]
  node_app["App coordinator<br/>[App.tsx]"]
  node_language["Language selector"]
  node_code["Code editor<br/>[Code.tsx]"]
  node_input["Program input<br/>[InputParams.tsx]"]
  node_run["Run action<br/>[Run.tsx]"]
  node_output["Result display<br/>[Output.tsx]"]
  node_state["Editor state<br/>[editorSlice.ts]"]
end

subgraph group_execution["Code execution"]
  node_server["HTTP server<br/>[server.ts]"]
  node_compiler["Compile coordinator<br/>[compiler.ts]"]
  node_executor["Execution module<br/>[execute.ts]"]
  node_runner["Language runner<br/>[Command.py]"]
end

subgraph group_sharing["State sharing"]
  node_share["Share controls<br/>[Share.tsx]"]
  node_fetch["Load shared state<br/>[dataFetch.ts]"]
  node_generate["Create share link<br/>[linkGenerator.ts]"]
  node_update["Update shared state<br/>[dataUpdate.ts]"]
  node_firebase["Firebase config<br/>[dbConfig.ts]"]
  node_firestore[("Firestore")]
end

node_user(("IDE user"))

node_user -->|"uses"| node_app
node_app -->|"renders"| node_language
node_app -->|"renders"| node_code
node_app -->|"renders"| node_input
node_app -->|"renders"| node_run
node_app -->|"renders"| node_output
node_app -->|"renders"| node_share
node_language -->|"sets language"| node_state
node_code -->|"sets code"| node_state
node_input -->|"sets input"| node_state
node_run -->|"reads and updates"| node_state
node_state -->|"provides results"| node_output
node_run -->|"POST /compile"| node_server
node_server -->|"compiles"| node_compiler
node_compiler -->|"delegates execution"| node_executor
node_executor -->|"invokes runner"| node_runner
node_share -->|"reads editor data"| node_state
node_share -->|"creates link"| node_generate
node_share -->|"saves changes"| node_update
node_app -->|"loads shared state"| node_fetch
node_fetch -->|"uses config"| node_firebase
node_generate -->|"uses config"| node_firebase
node_update -->|"uses config"| node_firebase
node_firebase -->|"connects"| node_firestore
node_fetch -->|"reads shared state"| node_firestore
node_generate -->|"saves shared state"| node_firestore
node_update -->|"updates shared state"| node_firestore

click node_app "https://github.com/darkmortal/online-ide/blob/main/frontend/src/App.tsx"
click node_language "https://github.com/darkmortal/online-ide/blob/main/frontend/src/components/language/LanguageSelector.tsx"
click node_code "https://github.com/darkmortal/online-ide/blob/main/frontend/src/components/codeblock/Code.tsx"
click node_input "https://github.com/darkmortal/online-ide/blob/main/frontend/src/components/userinput/InputParams.tsx"
click node_run "https://github.com/darkmortal/online-ide/blob/main/frontend/src/components/run/Run.tsx"
click node_output "https://github.com/darkmortal/online-ide/blob/main/frontend/src/components/output/Output.tsx"
click node_share "https://github.com/darkmortal/online-ide/blob/main/frontend/src/components/share/Share.tsx"
click node_state "https://github.com/darkmortal/online-ide/blob/main/frontend/src/store/editorSlice.ts"
click node_fetch "https://github.com/darkmortal/online-ide/blob/main/frontend/src/lib/dataFetch.ts"
click node_generate "https://github.com/darkmortal/online-ide/blob/main/frontend/src/lib/linkGenerator.ts"
click node_update "https://github.com/darkmortal/online-ide/blob/main/frontend/src/lib/dataUpdate.ts"
click node_firebase "https://github.com/darkmortal/online-ide/blob/main/frontend/src/lib/dbConfig.ts"
click node_server "https://github.com/darkmortal/online-ide/blob/main/backend/src/server.ts"
click node_compiler "https://github.com/darkmortal/online-ide/blob/main/backend/src/compiler/compiler.ts"
click node_executor "https://github.com/darkmortal/online-ide/blob/main/backend/src/compiler/execute.ts"
click node_runner "https://github.com/darkmortal/online-ide/blob/main/backend/src/compiler/Command.py"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_language,node_code,node_input,node_run,node_output,node_state,node_user toneBlue
class node_server,node_compiler,node_executor,node_runner toneAmber
class node_share,node_fetch,node_generate,node_update,node_firebase,node_firestore toneMint
```

## Components

### Editor frontend

- [App coordinator](https://github.com/darkmortal/online-ide/blob/main/frontend/src/App.tsx): `frontend/src/App.tsx`
- [Language selector](https://github.com/darkmortal/online-ide/blob/main/frontend/src/components/language/LanguageSelector.tsx): `frontend/src/components/language/LanguageSelector.tsx`
- [Code editor](https://github.com/darkmortal/online-ide/blob/main/frontend/src/components/codeblock/Code.tsx): `frontend/src/components/codeblock/Code.tsx`
- [Program input](https://github.com/darkmortal/online-ide/blob/main/frontend/src/components/userinput/InputParams.tsx): `frontend/src/components/userinput/InputParams.tsx`
- [Run action](https://github.com/darkmortal/online-ide/blob/main/frontend/src/components/run/Run.tsx): `frontend/src/components/run/Run.tsx`
- [Result display](https://github.com/darkmortal/online-ide/blob/main/frontend/src/components/output/Output.tsx): `frontend/src/components/output/Output.tsx`
- [Editor state](https://github.com/darkmortal/online-ide/blob/main/frontend/src/store/editorSlice.ts): `frontend/src/store/editorSlice.ts`

### Code execution

- [HTTP server](https://github.com/darkmortal/online-ide/blob/main/backend/src/server.ts): `backend/src/server.ts`
- [Compile coordinator](https://github.com/darkmortal/online-ide/blob/main/backend/src/compiler/compiler.ts): `backend/src/compiler/compiler.ts`
- [Execution module](https://github.com/darkmortal/online-ide/blob/main/backend/src/compiler/execute.ts): `backend/src/compiler/execute.ts`
- [Language runner](https://github.com/darkmortal/online-ide/blob/main/backend/src/compiler/Command.py): `backend/src/compiler/Command.py`

### State sharing

- [Share controls](https://github.com/darkmortal/online-ide/blob/main/frontend/src/components/share/Share.tsx): `frontend/src/components/share/Share.tsx`
- [Load shared state](https://github.com/darkmortal/online-ide/blob/main/frontend/src/lib/dataFetch.ts): `frontend/src/lib/dataFetch.ts`
- [Create share link](https://github.com/darkmortal/online-ide/blob/main/frontend/src/lib/linkGenerator.ts): `frontend/src/lib/linkGenerator.ts`
- [Update shared state](https://github.com/darkmortal/online-ide/blob/main/frontend/src/lib/dataUpdate.ts): `frontend/src/lib/dataUpdate.ts`
- [Firebase config](https://github.com/darkmortal/online-ide/blob/main/frontend/src/lib/dbConfig.ts): `frontend/src/lib/dbConfig.ts`
- **Firestore**

### Other components

- **IDE user**

## Connections

- IDE user → App coordinator: uses
- App coordinator → Language selector: renders
- App coordinator → Code editor: renders
- App coordinator → Program input: renders
- App coordinator → Run action: renders
- App coordinator → Result display: renders
- App coordinator → Share controls: renders
- Language selector → Editor state: sets language
- Code editor → Editor state: sets code
- Program input → Editor state: sets input
- Run action → Editor state: reads and updates
- Editor state → Result display: provides results
- Run action → HTTP server: POST /compile
- HTTP server → Compile coordinator: compiles
- Compile coordinator → Execution module: delegates execution
- Execution module → Language runner: invokes runner
- Share controls → Editor state: reads editor data
- Share controls → Create share link: creates link
- Share controls → Update shared state: saves changes
- App coordinator → Load shared state: loads shared state
- Load shared state → Firebase config: uses config
- Create share link → Firebase config: uses config
- Update shared state → Firebase config: uses config
- Firebase config → Firestore: connects
- Load shared state → Firestore: reads shared state
- Create share link → Firestore: saves shared state
- Update shared state → Firestore: updates shared state