How steinann/roavatar works
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: App.tsx Editor app · avatarPreview.tsx Avatar preview · init.ts Website integration · main.tsx Editor bootstrap
Components 27
Editor workflow
- Editor app
src/App.tsx - Outfit context
src/react/context/outfit-context.ts - Authentication context
src/react/context/auth-context.ts - Catalog categories
src/react/itemCategory.tsx - Marketplace browsing
src/react/marketplaceCategory.tsx - Search and filters
src/react/searchFilter.tsx - User search
src/react/generic/userSearch.tsx - Avatar adjustment
src/react/avatarAdjustment.tsx - Animation picker
src/react/animationPicker.tsx - Save outfit
src/react/saveButton.tsx - Share outfit
src/react/shareButton.tsx - Capture image
src/react/captureButton.tsx - Local outfits
src/react/localOutfitCategory.tsx - Editor settings
src/react/settingsButton.tsx
Avatar rendering
- Avatar preview
src/react/avatarPreview.tsx
Roblox page enhancements
- Avatar history
src/website/profile/avatarHistory.ts - Outfits made with
src/website/marketplace/outfitsMadeWith.ts - Website integration
src/website/init.ts - RoAvatar API client
src/react/generic/roavatar-api.ts
Extension runtime
- Editor bootstrap
src/main.tsx - Extension service worker
public/service-worker.js - Background script
public/background-script.js - Page injection
public/inject.js - Editor injection
public/editor-inject.js
Other components
- Extension user
- Roblox services
- RoAvatar Renderer
Connections 31
- 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