# turbowarp/extensions architecture

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

- Interactive diagram: https://gitdiagram.com/turbowarp/extensions
- Repository: https://github.com/turbowarp/extensions

## Overview

TurboWarp Extension Gallery is a collection of user-contributed unsandboxed extensions, with a development site/build path alongside the runtime extensions. The principal user workflow is to choose an extension for a TurboWarp project and use the blocks it provides. The README establishes the gallery and unsandboxed-extension purpose; source excerpts show individual extension behavior and the development server/builder link. Most extension-to-editor loading details and the website’s routing are not shown, so those relationships are omitted.

Main entry points: [`extensions`](https://github.com/turbowarp/extensions/tree/master/extensions) (Other contributed extensions), [`development/builder.js`](https://github.com/turbowarp/extensions/blob/master/development/builder.js) (Gallery builder), [`development/server.js`](https://github.com/turbowarp/extensions/blob/master/development/server.js) (Development server), [`development/parse-extension-metadata.js`](https://github.com/turbowarp/extensions/blob/master/development/parse-extension-metadata.js) (Extension metadata)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_site["Gallery site"]
  node_devserver["Development server<br/>[server.js]"]
end

subgraph group_build["Build and metadata"]
  node_builder["Gallery builder<br/>[builder.js]"]
  node_metadata["Extension metadata"]
  node_translations["Extension translations"]
  node_dependencies["Extension dependencies"]
  node_docs["Extension docs rendering<br/>[render-docs.js]"]
  node_templates["Site templates<br/>[render-template.js]"]
  node_buildsnippets["Dependency snippets<br/>[build-snippets.js]"]
  node_compatibility["Compatibility aliases"]
  node_filesystem["Filesystem utilities<br/>[fs-utils.js]"]
end

subgraph group_project["Project extensions"]
  node_menus["All Menus blocks<br/>[AllMenus.js]"]
  node_otherextensions["Other contributed extensions"]
end

subgraph group_media["Media and rendering"]
  node_animatedtext["Animated text<br/>[text.js]"]
  node_penplus["Advanced pen rendering<br/>[penPlus.js]"]
  node_simple3d["3D graphics<br/>[simple3D.js]"]
  node_styles["Monitor styling<br/>[CustomStyles.js]"]
end

subgraph group_integrations["Browser integrations"]
  node_localstorage[("Persistent project data<br/>[local-storage.js]")]
  node_webhooks["Webhooks<br/>[Webhooks.js]"]
  node_searchparams["URL search parameters<br/>[searchApi.js]"]
  node_fontmanager["Font management<br/>[Font-Manager.js]"]
end

node_visitor(("Gallery visitor"))

node_visitor -.->|"visits during development"| node_devserver
node_devserver -->|"serves latest build"| node_builder
node_builder -->|"parses metadata"| node_metadata
node_builder -->|"parses translations"| node_translations
node_builder -->|"resolves dependencies"| node_dependencies
node_builder -->|"renders documentation"| node_docs
node_builder -->|"renders templates"| node_templates
node_builder -->|"generates snippets"| node_buildsnippets
node_builder -->|"uses aliases"| node_compatibility
node_builder -->|"creates directories"| node_filesystem
node_visitor -.->|"chooses extensions"| node_otherextensions
node_otherextensions -.->|"includes contributed blocks"| node_menus
node_otherextensions -.->|"includes contributed blocks"| node_animatedtext
node_otherextensions -.->|"includes contributed blocks"| node_penplus
node_otherextensions -.->|"includes contributed blocks"| node_simple3d
node_otherextensions -.->|"includes contributed blocks"| node_styles
node_otherextensions -.->|"includes contributed blocks"| node_localstorage
node_otherextensions -.->|"includes contributed blocks"| node_webhooks
node_otherextensions -.->|"includes contributed blocks"| node_searchparams
node_otherextensions -.->|"includes contributed blocks"| node_fontmanager

click node_devserver "https://github.com/turbowarp/extensions/blob/master/development/server.js"
click node_builder "https://github.com/turbowarp/extensions/blob/master/development/builder.js"
click node_metadata "https://github.com/turbowarp/extensions/blob/master/development/parse-extension-metadata.js"
click node_translations "https://github.com/turbowarp/extensions/blob/master/development/parse-extension-translations.js"
click node_dependencies "https://github.com/turbowarp/extensions/blob/master/development/dependency-management.js"
click node_docs "https://github.com/turbowarp/extensions/blob/master/development/render-docs.js"
click node_templates "https://github.com/turbowarp/extensions/blob/master/development/render-template.js"
click node_buildsnippets "https://github.com/turbowarp/extensions/blob/master/development/build-snippets.js"
click node_compatibility "https://github.com/turbowarp/extensions/blob/master/development/compatibility-aliases.js"
click node_filesystem "https://github.com/turbowarp/extensions/blob/master/development/fs-utils.js"
click node_menus "https://github.com/turbowarp/extensions/blob/master/extensions/Lily/AllMenus.js"
click node_animatedtext "https://github.com/turbowarp/extensions/blob/master/extensions/lab/text.js"
click node_penplus "https://github.com/turbowarp/extensions/blob/master/extensions/obviousAlexC/penPlus.js"
click node_simple3d "https://github.com/turbowarp/extensions/blob/master/extensions/Xeltalliv/simple3D.js"
click node_styles "https://github.com/turbowarp/extensions/blob/master/extensions/TheShovel/CustomStyles.js"
click node_localstorage "https://github.com/turbowarp/extensions/blob/master/extensions/local-storage.js"
click node_webhooks "https://github.com/turbowarp/extensions/blob/master/extensions/CubesterYT/Webhooks.js"
click node_searchparams "https://github.com/turbowarp/extensions/blob/master/extensions/ZXMushroom63/searchApi.js"
click node_fontmanager "https://github.com/turbowarp/extensions/blob/master/extensions/SharkPool/Font-Manager.js"
click node_otherextensions "https://github.com/turbowarp/extensions/tree/master/extensions"

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_devserver toneBlue
class node_builder,node_metadata,node_translations,node_dependencies,node_docs,node_templates,node_buildsnippets,node_compatibility,node_filesystem toneAmber
class node_menus,node_otherextensions toneMint
class node_animatedtext,node_penplus,node_simple3d,node_styles toneRose
class node_localstorage,node_webhooks,node_searchparams,node_fontmanager,node_visitor toneIndigo
```

## Components

### Gallery site

- [Development server](https://github.com/turbowarp/extensions/blob/master/development/server.js): `development/server.js`

### Build and metadata

- [Gallery builder](https://github.com/turbowarp/extensions/blob/master/development/builder.js): `development/builder.js`
- [Extension metadata](https://github.com/turbowarp/extensions/blob/master/development/parse-extension-metadata.js): `development/parse-extension-metadata.js`
- [Extension translations](https://github.com/turbowarp/extensions/blob/master/development/parse-extension-translations.js): `development/parse-extension-translations.js`
- [Extension dependencies](https://github.com/turbowarp/extensions/blob/master/development/dependency-management.js): `development/dependency-management.js`
- [Extension docs rendering](https://github.com/turbowarp/extensions/blob/master/development/render-docs.js): `development/render-docs.js`
- [Site templates](https://github.com/turbowarp/extensions/blob/master/development/render-template.js): `development/render-template.js`
- [Dependency snippets](https://github.com/turbowarp/extensions/blob/master/development/build-snippets.js): `development/build-snippets.js`
- [Compatibility aliases](https://github.com/turbowarp/extensions/blob/master/development/compatibility-aliases.js): `development/compatibility-aliases.js`
- [Filesystem utilities](https://github.com/turbowarp/extensions/blob/master/development/fs-utils.js): `development/fs-utils.js`

### Project extensions

- [All Menus blocks](https://github.com/turbowarp/extensions/blob/master/extensions/Lily/AllMenus.js): `extensions/Lily/AllMenus.js`
- [Other contributed extensions](https://github.com/turbowarp/extensions/tree/master/extensions): `extensions`

### Media and rendering

- [Animated text](https://github.com/turbowarp/extensions/blob/master/extensions/lab/text.js): `extensions/lab/text.js`
- [Advanced pen rendering](https://github.com/turbowarp/extensions/blob/master/extensions/obviousAlexC/penPlus.js): `extensions/obviousAlexC/penPlus.js`
- [3D graphics](https://github.com/turbowarp/extensions/blob/master/extensions/Xeltalliv/simple3D.js): `extensions/Xeltalliv/simple3D.js`
- [Monitor styling](https://github.com/turbowarp/extensions/blob/master/extensions/TheShovel/CustomStyles.js): `extensions/TheShovel/CustomStyles.js`

### Browser integrations

- [Persistent project data](https://github.com/turbowarp/extensions/blob/master/extensions/local-storage.js): `extensions/local-storage.js`
- [Webhooks](https://github.com/turbowarp/extensions/blob/master/extensions/CubesterYT/Webhooks.js): `extensions/CubesterYT/Webhooks.js`
- [URL search parameters](https://github.com/turbowarp/extensions/blob/master/extensions/ZXMushroom63/searchApi.js): `extensions/ZXMushroom63/searchApi.js`
- [Font management](https://github.com/turbowarp/extensions/blob/master/extensions/SharkPool/Font-Manager.js): `extensions/SharkPool/Font-Manager.js`

### Other components

- **Gallery visitor**

## Connections

- Gallery visitor → Development server: visits during development (evidence: `README.md`)
- Development server → Gallery builder: serves latest build (evidence: `development/server.js`)
- Gallery builder → Extension metadata: parses metadata (evidence: `development/builder.js`)
- Gallery builder → Extension translations: parses translations (evidence: `development/builder.js`)
- Gallery builder → Extension dependencies: resolves dependencies (evidence: `development/builder.js`)
- Gallery builder → Extension docs rendering: renders documentation (evidence: `development/builder.js`)
- Gallery builder → Site templates: renders templates (evidence: `development/builder.js`)
- Gallery builder → Dependency snippets: generates snippets (evidence: `development/builder.js`)
- Gallery builder → Compatibility aliases: uses aliases (evidence: `development/builder.js`)
- Gallery builder → Filesystem utilities: creates directories (evidence: `development/builder.js`)
- Gallery visitor → Other contributed extensions: chooses extensions (evidence: `README.md`)
- Other contributed extensions → All Menus blocks: includes contributed blocks (evidence: `README.md`)
- Other contributed extensions → Animated text: includes contributed blocks (evidence: `README.md`)
- Other contributed extensions → Advanced pen rendering: includes contributed blocks (evidence: `README.md`)
- Other contributed extensions → 3D graphics: includes contributed blocks (evidence: `README.md`)
- Other contributed extensions → Monitor styling: includes contributed blocks (evidence: `README.md`)
- Other contributed extensions → Persistent project data: includes contributed blocks (evidence: `README.md`)
- Other contributed extensions → Webhooks: includes contributed blocks (evidence: `README.md`)
- Other contributed extensions → URL search parameters: includes contributed blocks (evidence: `README.md`)
- Other contributed extensions → Font management: includes contributed blocks (evidence: `README.md`)