# cestpassicomplexe/espansoyamleditor architecture

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

- Interactive diagram: https://gitdiagram.com/cestpassicomplexe/espansoyamleditor
- Repository: https://github.com/cestpassicomplexe/espansoyamleditor

## Overview

This is a browser-based Espanso editor for opening and editing YAML match files, with folder browsing, image discovery, match editing, and a live variable preview. The sampled source is a partial excerpt of one large script; relationships below are limited to calls and behavior visible there, so some likely connections between the UI and file operations are omitted.

Main entry points: [`script.js`](https://github.com/cestpassicomplexe/espansoyamleditor/blob/main/script.js) (Image discovery)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_workspace["Editor workspace"]
  node_runtime["Editor runtime<br/>[script.js]"]
  node_fileio["File access<br/>[script.js]"]
end

subgraph group_content["Match editing"]
  node_match_editor["Match editor<br/>[script.js]"]
  node_variable_preview["Variable preview<br/>[script.js]"]
end

subgraph group_assets["Folder and images"]
  node_folder["Folder browser<br/>[script.js]"]
  node_image_scan["Image discovery<br/>[script.js]"]
end

node_user(("Editor user"))
node_local_files[("Local files")]

node_user -->|"uses"| node_runtime
node_runtime -->|"opens editor"| node_match_editor
node_match_editor -.->|"previews variables"| node_variable_preview
node_folder -->|"scans images"| node_image_scan
node_image_scan -->|"recurses folders"| node_image_scan
node_fileio -.->|"reads and writes"| node_local_files
node_folder -.->|"browses"| node_local_files

click node_runtime "https://github.com/cestpassicomplexe/espansoyamleditor/blob/main/script.js"
click node_fileio "https://github.com/cestpassicomplexe/espansoyamleditor/blob/main/script.js"
click node_folder "https://github.com/cestpassicomplexe/espansoyamleditor/blob/main/script.js"
click node_image_scan "https://github.com/cestpassicomplexe/espansoyamleditor/blob/main/script.js"
click node_match_editor "https://github.com/cestpassicomplexe/espansoyamleditor/blob/main/script.js"
click node_variable_preview "https://github.com/cestpassicomplexe/espansoyamleditor/blob/main/script.js"

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_runtime,node_fileio,node_user toneBlue
class node_match_editor,node_variable_preview,node_local_files toneAmber
class node_folder,node_image_scan toneMint
```

## Components

### Editor workspace

- [Editor runtime](https://github.com/cestpassicomplexe/espansoyamleditor/blob/main/script.js): `script.js`
- [File access](https://github.com/cestpassicomplexe/espansoyamleditor/blob/main/script.js): `script.js`

### Match editing

- [Match editor](https://github.com/cestpassicomplexe/espansoyamleditor/blob/main/script.js): `script.js`
- [Variable preview](https://github.com/cestpassicomplexe/espansoyamleditor/blob/main/script.js): `script.js`

### Folder and images

- [Folder browser](https://github.com/cestpassicomplexe/espansoyamleditor/blob/main/script.js): `script.js`
- [Image discovery](https://github.com/cestpassicomplexe/espansoyamleditor/blob/main/script.js): `script.js`

### Other components

- **Editor user**
- **Local files**

## Connections

- Editor user → Editor runtime: uses (evidence: `script.js`)
- Editor runtime → Match editor: opens editor (evidence: `script.js`)
- Match editor → Variable preview: previews variables (evidence: `script.js`)
- Folder browser → Image discovery: scans images (evidence: `script.js`)
- Image discovery → Image discovery: recurses folders (evidence: `script.js`)
- File access → Local files: reads and writes
- Folder browser → Local files: browses