# punkplod23/code-editors-experiment architecture

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

- Interactive diagram: https://gitdiagram.com/punkplod23/code-editors-experiment
- Repository: https://github.com/punkplod23/code-editors-experiment

## Overview

This is a browser-based set of coding playgrounds, reached through language routes in a Vue application. Users choose a workspace, edit code, and—in the sampled Python, Lua, Java, Pygame, and SQL implementations—run it in a browser-side runtime and view output or rendered results. The workspaces are separate rather than a shared execution pipeline. The README is only the Vue starter template; unsampled editors are represented from the file tree and route definitions, so their execution details and integrations are not inferred.

Main entry points: [`src/router/index.ts`](https://github.com/punkplod23/code-editors-experiment/blob/master/src/router/index.ts) (Route dispatch), [`src/components/SqlPlayground.vue`](https://github.com/punkplod23/code-editors-experiment/blob/master/src/components/SqlPlayground.vue) (SQL playground), [`src/App.vue`](https://github.com/punkplod23/code-editors-experiment/blob/master/src/App.vue) (Vue app shell), [`src/views/pythonEditor.vue`](https://github.com/punkplod23/code-editors-experiment/blob/master/src/views/pythonEditor.vue) (Python route view)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application navigation"]
  node_app["Vue app shell<br/>[App.vue]"]
  node_router["Route dispatch<br/>[index.ts]"]
end

subgraph group_code["Language workspaces"]
  node_pythonview["Python route view<br/>[pythonEditor.vue]"]
  node_python["Python editor"]
  node_pygameview["Pygame route view<br/>[PyGame.vue]"]
  node_pygame["Pygame workspace<br/>[Pygame.vue]"]
  node_rview["R route view<br/>[R.vue]"]
  node_r["R editor"]
  node_luaview["Lua route view<br/>[LuaEditor.vue]"]
  node_lua["Lua editor<br/>[CodeEditorLua.vue]"]
  node_javaview["Java route view<br/>[Java.vue]"]
  node_java["Java editor<br/>[JavaEditor.vue]"]
  node_htmlview["HTML route view<br/>[HTML.vue]"]
  node_html["HTML editor"]
  node_phpview["PHP route view<br/>[php.vue]"]
  node_php["PHP editor<br/>[CodeEditorPHP.vue]"]
end

subgraph group_runtime["Browser execution"]
  node_pyodide["Pyodide runtime"]
  node_wasmoon["Wasmoon runtime"]
  node_cheerpj["CheerpJ JVM"]
  node_sqlwasm["sql.js engine"]
end

subgraph group_data["SQL playground"]
  node_sqlview["SQL route view<br/>[SQL.vue]"]
  node_sql["SQL playground<br/>[SqlPlayground.vue]"]
  node_sqlite[("In-memory SQLite")]
end

node_user(("Playground user"))

node_user -->|"opens"| node_app
node_app -->|"renders routes"| node_router
node_router -->|"dispatches"| node_pythonview
node_router -->|"dispatches"| node_rview
node_router -->|"dispatches"| node_pygameview
node_router -->|"dispatches"| node_sqlview
node_router -->|"dispatches"| node_htmlview
node_router -->|"dispatches"| node_phpview
node_router -->|"dispatches"| node_luaview
node_router -->|"dispatches"| node_javaview
node_pythonview -->|"renders editor"| node_python
node_rview -->|"renders editor"| node_r
node_python -->|"executes Python"| node_pyodide
node_pygame -->|"executes Python"| node_pyodide
node_lua -->|"executes Lua"| node_wasmoon
node_java -->|"runs Java"| node_cheerpj
node_sqlview -->|"renders playground"| node_sql
node_sql -->|"initializes"| node_sqlwasm
node_sql -->|"executes queries"| node_sqlite

click node_app "https://github.com/punkplod23/code-editors-experiment/blob/master/src/App.vue"
click node_router "https://github.com/punkplod23/code-editors-experiment/blob/master/src/router/index.ts"
click node_pythonview "https://github.com/punkplod23/code-editors-experiment/blob/master/src/views/pythonEditor.vue"
click node_python "https://github.com/punkplod23/code-editors-experiment/blob/master/src/components/CodeEditorPython.vue"
click node_pygameview "https://github.com/punkplod23/code-editors-experiment/blob/master/src/views/PyGame.vue"
click node_pygame "https://github.com/punkplod23/code-editors-experiment/blob/master/src/components/Pygame.vue"
click node_rview "https://github.com/punkplod23/code-editors-experiment/blob/master/src/views/R.vue"
click node_r "https://github.com/punkplod23/code-editors-experiment/blob/master/src/components/CodeEditorMainR.vue"
click node_luaview "https://github.com/punkplod23/code-editors-experiment/blob/master/src/views/LuaEditor.vue"
click node_lua "https://github.com/punkplod23/code-editors-experiment/blob/master/src/components/CodeEditorLua.vue"
click node_javaview "https://github.com/punkplod23/code-editors-experiment/blob/master/src/views/Java.vue"
click node_java "https://github.com/punkplod23/code-editors-experiment/blob/master/src/components/JavaEditor.vue"
click node_htmlview "https://github.com/punkplod23/code-editors-experiment/blob/master/src/views/HTML.vue"
click node_html "https://github.com/punkplod23/code-editors-experiment/blob/master/src/components/CodeEditorMainHtml.vue"
click node_phpview "https://github.com/punkplod23/code-editors-experiment/blob/master/src/views/php.vue"
click node_php "https://github.com/punkplod23/code-editors-experiment/blob/master/src/components/CodeEditorPHP.vue"
click node_sqlview "https://github.com/punkplod23/code-editors-experiment/blob/master/src/views/SQL.vue"
click node_sql "https://github.com/punkplod23/code-editors-experiment/blob/master/src/components/SqlPlayground.vue"

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_router,node_user toneBlue
class node_pythonview,node_python,node_pygameview,node_pygame,node_rview,node_r,node_luaview,node_lua,node_javaview,node_java,node_htmlview,node_html,node_phpview,node_php toneAmber
class node_pyodide,node_wasmoon,node_cheerpj,node_sqlwasm toneMint
class node_sqlview,node_sql,node_sqlite toneRose
```

## Components

### Application navigation

- [Vue app shell](https://github.com/punkplod23/code-editors-experiment/blob/master/src/App.vue): `src/App.vue`
- [Route dispatch](https://github.com/punkplod23/code-editors-experiment/blob/master/src/router/index.ts): `src/router/index.ts`

### Language workspaces

- [Python route view](https://github.com/punkplod23/code-editors-experiment/blob/master/src/views/pythonEditor.vue): `src/views/pythonEditor.vue`
- [Python editor](https://github.com/punkplod23/code-editors-experiment/blob/master/src/components/CodeEditorPython.vue): `src/components/CodeEditorPython.vue`
- [Pygame route view](https://github.com/punkplod23/code-editors-experiment/blob/master/src/views/PyGame.vue): `src/views/PyGame.vue`
- [Pygame workspace](https://github.com/punkplod23/code-editors-experiment/blob/master/src/components/Pygame.vue): `src/components/Pygame.vue`
- [R route view](https://github.com/punkplod23/code-editors-experiment/blob/master/src/views/R.vue): `src/views/R.vue`
- [R editor](https://github.com/punkplod23/code-editors-experiment/blob/master/src/components/CodeEditorMainR.vue): `src/components/CodeEditorMainR.vue`
- [Lua route view](https://github.com/punkplod23/code-editors-experiment/blob/master/src/views/LuaEditor.vue): `src/views/LuaEditor.vue`
- [Lua editor](https://github.com/punkplod23/code-editors-experiment/blob/master/src/components/CodeEditorLua.vue): `src/components/CodeEditorLua.vue`
- [Java route view](https://github.com/punkplod23/code-editors-experiment/blob/master/src/views/Java.vue): `src/views/Java.vue`
- [Java editor](https://github.com/punkplod23/code-editors-experiment/blob/master/src/components/JavaEditor.vue): `src/components/JavaEditor.vue`
- [HTML route view](https://github.com/punkplod23/code-editors-experiment/blob/master/src/views/HTML.vue): `src/views/HTML.vue`
- [HTML editor](https://github.com/punkplod23/code-editors-experiment/blob/master/src/components/CodeEditorMainHtml.vue): `src/components/CodeEditorMainHtml.vue`
- [PHP route view](https://github.com/punkplod23/code-editors-experiment/blob/master/src/views/php.vue): `src/views/php.vue`
- [PHP editor](https://github.com/punkplod23/code-editors-experiment/blob/master/src/components/CodeEditorPHP.vue): `src/components/CodeEditorPHP.vue`

### Browser execution

- **Pyodide runtime**
- **Wasmoon runtime**
- **CheerpJ JVM**
- **sql.js engine**

### SQL playground

- [SQL route view](https://github.com/punkplod23/code-editors-experiment/blob/master/src/views/SQL.vue): `src/views/SQL.vue`
- [SQL playground](https://github.com/punkplod23/code-editors-experiment/blob/master/src/components/SqlPlayground.vue): `src/components/SqlPlayground.vue`
- **In-memory SQLite**

### Other components

- **Playground user**

## Connections

- Playground user → Vue app shell: opens
- Vue app shell → Route dispatch: renders routes
- Route dispatch → Python route view: dispatches
- Route dispatch → R route view: dispatches
- Route dispatch → Pygame route view: dispatches
- Route dispatch → SQL route view: dispatches
- Route dispatch → HTML route view: dispatches
- Route dispatch → PHP route view: dispatches
- Route dispatch → Lua route view: dispatches
- Route dispatch → Java route view: dispatches
- Python route view → Python editor: renders editor
- R route view → R editor: renders editor
- Python editor → Pyodide runtime: executes Python
- Pygame workspace → Pyodide runtime: executes Python
- Lua editor → Wasmoon runtime: executes Lua
- Java editor → CheerpJ JVM: runs Java
- SQL route view → SQL playground: renders playground
- SQL playground → sql.js engine: initializes
- SQL playground → In-memory SQLite: executes queries