# steinann/roavatar architecture

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

- Interactive diagram: https://gitdiagram.com/steinann/roavatar
- Repository: https://github.com/steinann/roavatar

## Overview

RoAvatar is a browser extension that recreates the Roblox avatar editor: users load or search avatar items, edit an outfit, preview it with animation, and save, share, or capture the result. The app entry point and preview wiring are visible in sampled source; the tree and README establish additional editor categories and website enhancements. Exact calls for several unsampled components are not inferred.

Main entry points: [`src/App.tsx`](https://github.com/steinann/roavatar/blob/main/src/App.tsx) (Editor app), [`src/react/avatarPreview.tsx`](https://github.com/steinann/roavatar/blob/main/src/react/avatarPreview.tsx) (Avatar preview), [`src/website/init.ts`](https://github.com/steinann/roavatar/blob/main/src/website/init.ts) (Website integration), [`src/main.tsx`](https://github.com/steinann/roavatar/blob/main/src/main.tsx) (Editor bootstrap)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_editor["Editor workflow"]
  node_app["Editor app<br/>[App.tsx]"]
  node_outfitstate["Outfit context<br/>[outfit-context.ts]"]
  node_authstate["Authentication context<br/>[auth-context.ts]"]
  node_categories["Catalog categories<br/>[itemCategory.tsx]"]
  node_marketplace["Marketplace browsing"]
  node_search["Search and filters<br/>[searchFilter.tsx]"]
  node_users["User search<br/>[userSearch.tsx]"]
  node_adjust["Avatar adjustment"]
  node_animation["Animation picker"]
  node_save["Save outfit<br/>[saveButton.tsx]"]
  node_share["Share outfit<br/>[shareButton.tsx]"]
  node_capture["Capture image<br/>[captureButton.tsx]"]
  node_local["Local outfits"]
  node_settings["Editor settings<br/>[settingsButton.tsx]"]
end

subgraph group_render["Avatar rendering"]
  node_preview["Avatar preview<br/>[avatarPreview.tsx]"]
end

subgraph group_website["Roblox page enhancements"]
  node_history["Avatar history<br/>[avatarHistory.ts]"]
  node_madewith["Outfits made with<br/>[outfitsMadeWith.ts]"]
  node_websiteinit["Website integration<br/>[init.ts]"]
  node_roapi["RoAvatar API client<br/>[roavatar-api.ts]"]
end

subgraph group_platform["Extension runtime"]
  node_main["Editor bootstrap<br/>[main.tsx]"]
  node_worker["Extension service worker<br/>[service-worker.js]"]
  node_background["Background script"]
  node_inject["Page injection<br/>[inject.js]"]
  node_editorinject["Editor injection<br/>[editor-inject.js]"]
end

node_user(("Extension user"))
node_roblox(("Roblox services"))
node_renderer["RoAvatar Renderer"]

node_user -->|"opens editor"| node_main
node_main -->|"renders"| node_app
node_main -->|"initializes pages"| node_websiteinit
node_app -->|"provides outfit state"| node_outfitstate
node_app -->|"provides authentication"| node_authstate
node_app -->|"renders preview"| node_preview
node_app -->|"offers adjustments"| node_adjust
node_app -->|"offers animation"| node_animation
node_app -->|"shows categories"| node_categories
node_categories -->|"browses marketplace"| node_marketplace
node_marketplace -->|"configures search"| node_search
node_users -->|"searches users"| node_roblox
node_users -->|"reads authentication"| node_authstate
node_preview -->|"reads outfit"| node_outfitstate
node_preview -->|"reads authentication"| node_authstate
node_preview -->|"renders avatar"| node_renderer
node_app -->|"offers saving"| node_save
node_save -->|"saves outfit"| node_roblox
node_app -->|"offers sharing"| node_share
node_app -->|"offers capture"| node_capture
node_local -->|"loads local outfits"| node_roblox
node_app -->|"offers settings"| node_settings
node_websiteinit -->|"activates profile feature"| node_history
node_websiteinit -->|"activates catalog feature"| node_madewith
node_history -->|"requests history"| node_roapi
node_madewith -->|"requests related outfits"| node_roapi
node_history -->|"generates thumbnails"| node_renderer
node_madewith -->|"generates thumbnails"| node_renderer
node_worker -->|"imports"| node_background
node_inject -.->|"initializes page features"| node_websiteinit
node_editorinject -.->|"mounts editor"| node_main

click node_app "https://github.com/steinann/roavatar/blob/main/src/App.tsx"
click node_main "https://github.com/steinann/roavatar/blob/main/src/main.tsx"
click node_outfitstate "https://github.com/steinann/roavatar/blob/main/src/react/context/outfit-context.ts"
click node_authstate "https://github.com/steinann/roavatar/blob/main/src/react/context/auth-context.ts"
click node_categories "https://github.com/steinann/roavatar/blob/main/src/react/itemCategory.tsx"
click node_marketplace "https://github.com/steinann/roavatar/blob/main/src/react/marketplaceCategory.tsx"
click node_search "https://github.com/steinann/roavatar/blob/main/src/react/searchFilter.tsx"
click node_users "https://github.com/steinann/roavatar/blob/main/src/react/generic/userSearch.tsx"
click node_adjust "https://github.com/steinann/roavatar/blob/main/src/react/avatarAdjustment.tsx"
click node_animation "https://github.com/steinann/roavatar/blob/main/src/react/animationPicker.tsx"
click node_preview "https://github.com/steinann/roavatar/blob/main/src/react/avatarPreview.tsx"
click node_save "https://github.com/steinann/roavatar/blob/main/src/react/saveButton.tsx"
click node_share "https://github.com/steinann/roavatar/blob/main/src/react/shareButton.tsx"
click node_capture "https://github.com/steinann/roavatar/blob/main/src/react/captureButton.tsx"
click node_local "https://github.com/steinann/roavatar/blob/main/src/react/localOutfitCategory.tsx"
click node_settings "https://github.com/steinann/roavatar/blob/main/src/react/settingsButton.tsx"
click node_history "https://github.com/steinann/roavatar/blob/main/src/website/profile/avatarHistory.ts"
click node_madewith "https://github.com/steinann/roavatar/blob/main/src/website/marketplace/outfitsMadeWith.ts"
click node_websiteinit "https://github.com/steinann/roavatar/blob/main/src/website/init.ts"
click node_roapi "https://github.com/steinann/roavatar/blob/main/src/react/generic/roavatar-api.ts"
click node_worker "https://github.com/steinann/roavatar/blob/main/public/service-worker.js"
click node_background "https://github.com/steinann/roavatar/blob/main/public/background-script.js"
click node_inject "https://github.com/steinann/roavatar/blob/main/public/inject.js"
click node_editorinject "https://github.com/steinann/roavatar/blob/main/public/editor-inject.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_app,node_outfitstate,node_authstate,node_categories,node_marketplace,node_search,node_users,node_adjust,node_animation,node_save,node_share,node_capture,node_local,node_settings,node_user toneBlue
class node_preview toneAmber
class node_history,node_madewith,node_websiteinit,node_roapi toneMint
class node_main,node_worker,node_background,node_inject,node_editorinject toneRose
class node_roblox,node_renderer toneIndigo
```

## Components

### Editor workflow

- [Editor app](https://github.com/steinann/roavatar/blob/main/src/App.tsx): `src/App.tsx`
- [Outfit context](https://github.com/steinann/roavatar/blob/main/src/react/context/outfit-context.ts): `src/react/context/outfit-context.ts`
- [Authentication context](https://github.com/steinann/roavatar/blob/main/src/react/context/auth-context.ts): `src/react/context/auth-context.ts`
- [Catalog categories](https://github.com/steinann/roavatar/blob/main/src/react/itemCategory.tsx): `src/react/itemCategory.tsx`
- [Marketplace browsing](https://github.com/steinann/roavatar/blob/main/src/react/marketplaceCategory.tsx): `src/react/marketplaceCategory.tsx`
- [Search and filters](https://github.com/steinann/roavatar/blob/main/src/react/searchFilter.tsx): `src/react/searchFilter.tsx`
- [User search](https://github.com/steinann/roavatar/blob/main/src/react/generic/userSearch.tsx): `src/react/generic/userSearch.tsx`
- [Avatar adjustment](https://github.com/steinann/roavatar/blob/main/src/react/avatarAdjustment.tsx): `src/react/avatarAdjustment.tsx`
- [Animation picker](https://github.com/steinann/roavatar/blob/main/src/react/animationPicker.tsx): `src/react/animationPicker.tsx`
- [Save outfit](https://github.com/steinann/roavatar/blob/main/src/react/saveButton.tsx): `src/react/saveButton.tsx`
- [Share outfit](https://github.com/steinann/roavatar/blob/main/src/react/shareButton.tsx): `src/react/shareButton.tsx`
- [Capture image](https://github.com/steinann/roavatar/blob/main/src/react/captureButton.tsx): `src/react/captureButton.tsx`
- [Local outfits](https://github.com/steinann/roavatar/blob/main/src/react/localOutfitCategory.tsx): `src/react/localOutfitCategory.tsx`
- [Editor settings](https://github.com/steinann/roavatar/blob/main/src/react/settingsButton.tsx): `src/react/settingsButton.tsx`

### Avatar rendering

- [Avatar preview](https://github.com/steinann/roavatar/blob/main/src/react/avatarPreview.tsx): `src/react/avatarPreview.tsx`

### Roblox page enhancements

- [Avatar history](https://github.com/steinann/roavatar/blob/main/src/website/profile/avatarHistory.ts): `src/website/profile/avatarHistory.ts`
- [Outfits made with](https://github.com/steinann/roavatar/blob/main/src/website/marketplace/outfitsMadeWith.ts): `src/website/marketplace/outfitsMadeWith.ts`
- [Website integration](https://github.com/steinann/roavatar/blob/main/src/website/init.ts): `src/website/init.ts`
- [RoAvatar API client](https://github.com/steinann/roavatar/blob/main/src/react/generic/roavatar-api.ts): `src/react/generic/roavatar-api.ts`

### Extension runtime

- [Editor bootstrap](https://github.com/steinann/roavatar/blob/main/src/main.tsx): `src/main.tsx`
- [Extension service worker](https://github.com/steinann/roavatar/blob/main/public/service-worker.js): `public/service-worker.js`
- [Background script](https://github.com/steinann/roavatar/blob/main/public/background-script.js): `public/background-script.js`
- [Page injection](https://github.com/steinann/roavatar/blob/main/public/inject.js): `public/inject.js`
- [Editor injection](https://github.com/steinann/roavatar/blob/main/public/editor-inject.js): `public/editor-inject.js`

### Other components

- **Extension user**
- **Roblox services**
- **RoAvatar Renderer**

## Connections

- Extension user → Editor bootstrap: opens editor
- Editor bootstrap → Editor app: renders
- Editor bootstrap → Website integration: initializes pages
- Editor app → Outfit context: provides outfit state
- Editor app → Authentication context: provides authentication
- Editor app → Avatar preview: renders preview
- Editor app → Avatar adjustment: offers adjustments
- Editor app → Animation picker: offers animation
- Editor app → Catalog categories: shows categories
- Catalog categories → Marketplace browsing: browses marketplace
- Marketplace browsing → Search and filters: configures search
- User search → Roblox services: searches users
- User search → Authentication context: reads authentication
- Avatar preview → Outfit context: reads outfit
- Avatar preview → Authentication context: reads authentication
- Avatar preview → RoAvatar Renderer: renders avatar
- Editor app → Save outfit: offers saving
- Save outfit → Roblox services: saves outfit
- Editor app → Share outfit: offers sharing
- Editor app → Capture image: offers capture
- Local outfits → Roblox services: loads local outfits
- Editor app → Editor settings: offers settings
- Website integration → Avatar history: activates profile feature
- Website integration → Outfits made with: activates catalog feature
- Avatar history → RoAvatar API client: requests history
- Outfits made with → RoAvatar API client: requests related outfits
- Avatar history → RoAvatar Renderer: generates thumbnails
- Outfits made with → RoAvatar Renderer: generates thumbnails
- Extension service worker → Background script: imports
- Page injection → Website integration: initializes page features
- Editor injection → Editor bootstrap: mounts editor