# hubenchang0515/shift architecture

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

- Interactive diagram: https://gitdiagram.com/hubenchang0515/shift
- Repository: https://github.com/hubenchang0515/shift

## Overview

Shift is a browser-based WebAssembly coding playground. Users choose a language, edit code, provide standard input, run it and view output in a terminal; they can also share code and input through a link. Python package installation is a separate capability that installs supported wheels into the Python runtime. The README establishes the main workflow and language breadth; the excerpts do not show all runtime dispatch and terminal plumbing, so uncertain internal links are omitted.

Main entry points: [`src/App.tsx`](https://github.com/hubenchang0515/shift/blob/master/src/App.tsx) (Playground controller), [`src/components/PipInstaller.tsx`](https://github.com/hubenchang0515/shift/blob/master/src/components/PipInstaller.tsx) (Package manager UI), [`src/utils/webpip.ts`](https://github.com/hubenchang0515/shift/blob/master/src/utils/webpip.ts) (Wheel installer), [`src/utils/pypiProxy.ts`](https://github.com/hubenchang0515/shift/blob/master/src/utils/pypiProxy.ts) (PyPI proxy helper)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_ui["Playground UI"]
  node_app["Playground controller<br/>[App.tsx]"]
  node_editor["Code editor"]
  node_terminal["Terminal<br/>[App.tsx]"]
  node_share["Share links<br/>[App.tsx]"]
end

subgraph group_runtime["Language runtimes"]
  node_python["Python runtime<br/>[python.js]"]
  node_lua["Lua runtime<br/>[lua.js]"]
  node_ruby["Ruby runtime<br/>[ruby.js]"]
  node_bash["Bash runtime<br/>[bash.js]"]
  node_chibi["Chibi runtime<br/>[chibi.js]"]
  node_picoc["PicoC runtime<br/>[picoc.js]"]
  node_quickjs["QuickJS runtime<br/>[qjs.js]"]
end

subgraph group_packages["Python packages"]
  node_pipinstaller["Package manager UI<br/>[PipInstaller.tsx]"]
  node_webpip["Wheel installer<br/>[webpip.ts]"]
  node_pypiproxy["PyPI proxy helper<br/>[pypiProxy.ts]"]
end

subgraph group_utilities["Browser utilities"]
  node_ansi["ANSI formatting<br/>[ansi.ts]"]
  node_fetch["Fetch helper<br/>[fetch.ts]"]
  node_pipfs["Package filesystem<br/>[pipfs.ts]"]
end

node_user(("User"))
node_pypi["PyPI"]

node_user -->|"uses"| node_app
node_app -->|"edits code"| node_editor
node_app -->|"controls"| node_terminal
node_app -->|"creates links"| node_share
node_app -->|"runs selected"| node_python
node_app -->|"runs selected"| node_lua
node_app -->|"runs selected"| node_ruby
node_app -->|"runs selected"| node_bash
node_app -->|"runs selected"| node_chibi
node_app -->|"runs selected"| node_picoc
node_app -->|"runs selected"| node_quickjs
node_app -->|"opens packages"| node_pipinstaller
node_pipinstaller -->|"initializes"| node_python
node_pipinstaller -->|"installs or removes"| node_webpip
node_webpip -->|"fetches through"| node_pypiproxy
node_pypiproxy -->|"requests package data"| node_pypi
node_webpip -->|"updates files"| node_pipfs
node_app -->|"formats terminal text"| node_ansi

click node_app "https://github.com/hubenchang0515/shift/blob/master/src/App.tsx"
click node_editor "https://github.com/hubenchang0515/shift/blob/master/src/components/HighlightEditor.tsx"
click node_terminal "https://github.com/hubenchang0515/shift/blob/master/src/App.tsx"
click node_share "https://github.com/hubenchang0515/shift/blob/master/src/App.tsx"
click node_python "https://github.com/hubenchang0515/shift/blob/master/src/wasm/python.js"
click node_lua "https://github.com/hubenchang0515/shift/blob/master/src/wasm/lua.js"
click node_ruby "https://github.com/hubenchang0515/shift/blob/master/src/wasm/ruby.js"
click node_bash "https://github.com/hubenchang0515/shift/blob/master/src/wasm/bash.js"
click node_chibi "https://github.com/hubenchang0515/shift/blob/master/src/wasm/chibi.js"
click node_picoc "https://github.com/hubenchang0515/shift/blob/master/src/wasm/picoc.js"
click node_quickjs "https://github.com/hubenchang0515/shift/blob/master/src/wasm/qjs.js"
click node_pipinstaller "https://github.com/hubenchang0515/shift/blob/master/src/components/PipInstaller.tsx"
click node_webpip "https://github.com/hubenchang0515/shift/blob/master/src/utils/webpip.ts"
click node_pypiproxy "https://github.com/hubenchang0515/shift/blob/master/src/utils/pypiProxy.ts"
click node_ansi "https://github.com/hubenchang0515/shift/blob/master/src/utils/ansi.ts"
click node_fetch "https://github.com/hubenchang0515/shift/blob/master/src/utils/fetch.ts"
click node_pipfs "https://github.com/hubenchang0515/shift/blob/master/src/utils/pipfs.ts"

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_editor,node_terminal,node_share,node_user toneBlue
class node_python,node_lua,node_ruby,node_bash,node_chibi,node_picoc,node_quickjs toneAmber
class node_pipinstaller,node_webpip,node_pypiproxy toneMint
class node_ansi,node_fetch,node_pipfs toneRose
class node_pypi toneIndigo
```

## Components

### Playground UI

- [Playground controller](https://github.com/hubenchang0515/shift/blob/master/src/App.tsx): `src/App.tsx`
- [Code editor](https://github.com/hubenchang0515/shift/blob/master/src/components/HighlightEditor.tsx): `src/components/HighlightEditor.tsx`
- [Terminal](https://github.com/hubenchang0515/shift/blob/master/src/App.tsx): `src/App.tsx`
- [Share links](https://github.com/hubenchang0515/shift/blob/master/src/App.tsx): `src/App.tsx`

### Language runtimes

- [Python runtime](https://github.com/hubenchang0515/shift/blob/master/src/wasm/python.js): `src/wasm/python.js`
- [Lua runtime](https://github.com/hubenchang0515/shift/blob/master/src/wasm/lua.js): `src/wasm/lua.js`
- [Ruby runtime](https://github.com/hubenchang0515/shift/blob/master/src/wasm/ruby.js): `src/wasm/ruby.js`
- [Bash runtime](https://github.com/hubenchang0515/shift/blob/master/src/wasm/bash.js): `src/wasm/bash.js`
- [Chibi runtime](https://github.com/hubenchang0515/shift/blob/master/src/wasm/chibi.js): `src/wasm/chibi.js`
- [PicoC runtime](https://github.com/hubenchang0515/shift/blob/master/src/wasm/picoc.js): `src/wasm/picoc.js`
- [QuickJS runtime](https://github.com/hubenchang0515/shift/blob/master/src/wasm/qjs.js): `src/wasm/qjs.js`

### Python packages

- [Package manager UI](https://github.com/hubenchang0515/shift/blob/master/src/components/PipInstaller.tsx): `src/components/PipInstaller.tsx`
- [Wheel installer](https://github.com/hubenchang0515/shift/blob/master/src/utils/webpip.ts): `src/utils/webpip.ts`
- [PyPI proxy helper](https://github.com/hubenchang0515/shift/blob/master/src/utils/pypiProxy.ts): `src/utils/pypiProxy.ts`

### Browser utilities

- [ANSI formatting](https://github.com/hubenchang0515/shift/blob/master/src/utils/ansi.ts): `src/utils/ansi.ts`
- [Fetch helper](https://github.com/hubenchang0515/shift/blob/master/src/utils/fetch.ts): `src/utils/fetch.ts`
- [Package filesystem](https://github.com/hubenchang0515/shift/blob/master/src/utils/pipfs.ts): `src/utils/pipfs.ts`

### Other components

- **User**
- **PyPI**

## Connections

- User → Playground controller: uses
- Playground controller → Code editor: edits code
- Playground controller → Terminal: controls
- Playground controller → Share links: creates links
- Playground controller → Python runtime: runs selected
- Playground controller → Lua runtime: runs selected
- Playground controller → Ruby runtime: runs selected
- Playground controller → Bash runtime: runs selected
- Playground controller → Chibi runtime: runs selected
- Playground controller → PicoC runtime: runs selected
- Playground controller → QuickJS runtime: runs selected
- Playground controller → Package manager UI: opens packages
- Package manager UI → Python runtime: initializes
- Package manager UI → Wheel installer: installs or removes
- Wheel installer → PyPI proxy helper: fetches through
- PyPI proxy helper → PyPI: requests package data
- Wheel installer → Package filesystem: updates files
- Playground controller → ANSI formatting: formats terminal text