# quadroloop/splice architecture

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

- Interactive diagram: https://gitdiagram.com/quadroloop/splice
- Repository: https://github.com/quadroloop/splice

## Overview

Splice is a PHP-hosted, in-browser code editor. A user edits code in the editor, can use language-aware editing and minification, and can work with files through the built-in file manager. The documented interface also supports configurable modes and themes; the source tree includes Ace extensions and language workers. The PHP page visibly requests directory listings and signals the hot-reload endpoint. Several editor capabilities are documented but their wiring is not shown in the excerpts, so those links are identified as documentation-based rather than inferred calls.

Main entry points: [`splice.php`](https://github.com/quadroloop/splice/blob/master/splice.php) (Editor Page), [`splice-src/src/ace.js`](https://github.com/quadroloop/splice/blob/master/splice-src/src/ace.js) (Ace Editor), [`splice.fission.php`](https://github.com/quadroloop/splice/blob/master/splice.fission.php) (Reload Signal), [`splice-src/src/mode-javascript.js`](https://github.com/quadroloop/splice/blob/master/splice-src/src/mode-javascript.js) (Language Modes)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interface["Editor Interface"]
  node_app["Editor Page<br/>[splice.php]"]
  node_editing["Code Editing<br/>[splice.php]"]
  node_file_ui["File Manager UI<br/>[splice.php]"]
  node_minify["Code Minification<br/>[splice.php]"]
end

subgraph group_ace["Ace Capabilities"]
  node_ace_core["Ace Editor<br/>[ace.js]"]
  node_modes["Language Modes<br/>[mode-javascript.js]"]
  node_snippets["Code Snippets<br/>[snippets.js]"]
  node_themes["Editor Themes<br/>[theme-chrome.js]"]
  node_extensions["Editor Extensions"]
  node_workers["Language Workers"]
end

subgraph group_assets["Browser Assets"]
  node_jquery["jQuery<br/>[jquery3.js]"]
  node_scrollbar["Custom Scrollbars"]
end

subgraph group_server["PHP Services"]
  node_file_browser["Directory Listing"]
  node_reload_service["Reload Signal<br/>[splice.fission.php]"]
  node_reload_page["Reload Page<br/>[splice.fission.php]"]
end

node_user(("Editor User"))

node_user -->|"uses"| node_app
node_app -->|"provides"| node_editing
node_app -->|"provides"| node_file_ui
node_app -.->|"offers"| node_minify
node_file_ui -->|"requests listing"| node_file_browser
node_app -->|"signals reload"| node_reload_service
node_reload_page -->|"polls signal"| node_reload_service
node_app -.->|"embeds editor"| node_ace_core
node_ace_core -.->|"supports modes"| node_modes
node_ace_core -.->|"supports snippets"| node_snippets
node_ace_core -.->|"supports themes"| node_themes
node_ace_core -.->|"extends editing"| node_extensions
node_ace_core -.->|"uses workers"| node_workers
node_app -->|"uses"| node_jquery
node_app -->|"configures scrollbars"| node_scrollbar

click node_app "https://github.com/quadroloop/splice/blob/master/splice.php"
click node_editing "https://github.com/quadroloop/splice/blob/master/splice.php"
click node_file_ui "https://github.com/quadroloop/splice/blob/master/splice.php"
click node_minify "https://github.com/quadroloop/splice/blob/master/splice.php"
click node_file_browser "https://github.com/quadroloop/splice/blob/master/splice_dir_mapper.php"
click node_reload_service "https://github.com/quadroloop/splice/blob/master/splice.fission.php"
click node_ace_core "https://github.com/quadroloop/splice/blob/master/splice-src/src/ace.js"
click node_modes "https://github.com/quadroloop/splice/blob/master/splice-src/src/mode-javascript.js"
click node_snippets "https://github.com/quadroloop/splice/blob/master/splice-src/src/snippets/snippets.js"
click node_themes "https://github.com/quadroloop/splice/blob/master/splice-src/src/theme-chrome.js"
click node_extensions "https://github.com/quadroloop/splice/blob/master/splice-src/src/ext-language_tools.js"
click node_workers "https://github.com/quadroloop/splice/blob/master/splice-src/src/worker-javascript.js"
click node_jquery "https://github.com/quadroloop/splice/blob/master/splice-src/js/jquery3.js"
click node_scrollbar "https://github.com/quadroloop/splice/blob/master/splice-src/js/perfect-scrollbar.js"
click node_reload_page "https://github.com/quadroloop/splice/blob/master/splice.fission.php"

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_editing,node_file_ui,node_minify,node_user toneBlue
class node_ace_core,node_modes,node_snippets,node_themes,node_extensions,node_workers toneAmber
class node_jquery,node_scrollbar toneMint
class node_file_browser,node_reload_service,node_reload_page toneRose
```

## Components

### Editor Interface

- [Editor Page](https://github.com/quadroloop/splice/blob/master/splice.php): `splice.php`
- [Code Editing](https://github.com/quadroloop/splice/blob/master/splice.php): `splice.php`
- [File Manager UI](https://github.com/quadroloop/splice/blob/master/splice.php): `splice.php`
- [Code Minification](https://github.com/quadroloop/splice/blob/master/splice.php): `splice.php`

### Ace Capabilities

- [Ace Editor](https://github.com/quadroloop/splice/blob/master/splice-src/src/ace.js): `splice-src/src/ace.js`
- [Language Modes](https://github.com/quadroloop/splice/blob/master/splice-src/src/mode-javascript.js): `splice-src/src/mode-javascript.js`
- [Code Snippets](https://github.com/quadroloop/splice/blob/master/splice-src/src/snippets/snippets.js): `splice-src/src/snippets/snippets.js`
- [Editor Themes](https://github.com/quadroloop/splice/blob/master/splice-src/src/theme-chrome.js): `splice-src/src/theme-chrome.js`
- [Editor Extensions](https://github.com/quadroloop/splice/blob/master/splice-src/src/ext-language_tools.js): `splice-src/src/ext-language_tools.js`
- [Language Workers](https://github.com/quadroloop/splice/blob/master/splice-src/src/worker-javascript.js): `splice-src/src/worker-javascript.js`

### Browser Assets

- [jQuery](https://github.com/quadroloop/splice/blob/master/splice-src/js/jquery3.js): `splice-src/js/jquery3.js`
- [Custom Scrollbars](https://github.com/quadroloop/splice/blob/master/splice-src/js/perfect-scrollbar.js): `splice-src/js/perfect-scrollbar.js`

### PHP Services

- [Directory Listing](https://github.com/quadroloop/splice/blob/master/splice_dir_mapper.php): `splice_dir_mapper.php`
- [Reload Signal](https://github.com/quadroloop/splice/blob/master/splice.fission.php): `splice.fission.php`
- [Reload Page](https://github.com/quadroloop/splice/blob/master/splice.fission.php): `splice.fission.php`

### Other components

- **Editor User**

## Connections

- Editor User → Editor Page: uses
- Editor Page → Code Editing: provides (evidence: `splice.php`)
- Editor Page → File Manager UI: provides (evidence: `splice.php`)
- Editor Page → Code Minification: offers (evidence: `splice.php`)
- File Manager UI → Directory Listing: requests listing (evidence: `splice.php`)
- Editor Page → Reload Signal: signals reload (evidence: `splice.php`)
- Reload Page → Reload Signal: polls signal (evidence: `splice.fission.php`)
- Editor Page → Ace Editor: embeds editor
- Ace Editor → Language Modes: supports modes
- Ace Editor → Code Snippets: supports snippets
- Ace Editor → Editor Themes: supports themes
- Ace Editor → Editor Extensions: extends editing
- Ace Editor → Language Workers: uses workers
- Editor Page → jQuery: uses (evidence: `splice.php`)
- Editor Page → Custom Scrollbars: configures scrollbars (evidence: `splice.php`)