# scaleflex/filerobot-image-editor architecture

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

- Interactive diagram: https://gitdiagram.com/scaleflex/filerobot-image-editor
- Repository: https://github.com/scaleflex/filerobot-image-editor

## Overview

Filerobot Image Editor is a web image-editing library with React and VanillaJS entry points. Users load an image, adjust or annotate it in the editor, then save an edited image and design state; documented capabilities also include resize, crop, flip, filters, watermarking, live original-image comparison, and undo/redo/reset. The graph preserves these as editing subsystems. Some implementation files were not sampled, so links between the visible UI and those subsystems are shown only where documented or marked unverified.

Main entry points: [`packages/react-filerobot-image-editor/src/hooks/useTransformedImgData.js`](https://github.com/scaleflex/filerobot-image-editor/blob/master/packages/react-filerobot-image-editor/src/hooks/useTransformedImgData.js) (Save image data), [`packages/filerobot-image-editor/src/index.js`](https://github.com/scaleflex/filerobot-image-editor/blob/master/packages/filerobot-image-editor/src/index.js) (VanillaJS API), [`packages/react-filerobot-image-editor/src/components/Layers/DesignLayer/index.jsx`](https://github.com/scaleflex/filerobot-image-editor/blob/master/packages/react-filerobot-image-editor/src/components/Layers/DesignLayer/index.jsx) (Annotation rendering), [`packages/react-filerobot-image-editor/src/hooks/useStore.js`](https://github.com/scaleflex/filerobot-image-editor/blob/master/packages/react-filerobot-image-editor/src/hooks/useStore.js) (Editor state access)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_integration["Entry points"]
  node_vanilla_api["VanillaJS API<br/>[index.js]"]
  node_react_component["React component<br/>[index.js]"]
  node_demo_config["Demo configuration<br/>[demo-config.js]"]
end

subgraph group_editor["Editor interface"]
  node_assembly["Editor assembly<br/>[index.jsx]"]
  node_toolbar["Tools toolbar<br/>[index.jsx]"]
  node_topbar["Save and history<br/>[SaveButton.jsx]"]
  node_canvas["Editing canvas<br/>[index.jsx]"]
end

subgraph group_editing["Image editing"]
  node_adjustments["Image adjustments"]
  node_crop_resize["Crop and resize<br/>[Crop.jsx]"]
  node_filters["Filters and finetune<br/>[Filters.jsx]"]
  node_watermark["Watermarking<br/>[Watermark.jsx]"]
  node_annotation_render["Annotation rendering<br/>[index.jsx]"]
  node_annotation_input["Annotation creation"]
  node_annotation_options["Annotation options<br/>[OpacityField.jsx]"]
end

subgraph group_state_export["State and export"]
  node_state_actions["Design state actions"]
  node_state_store["Editor state access<br/>[useStore.js]"]
  node_export["Save image data"]
  node_cloudimage_state["Design state conversion"]
  node_cloudimage_url["Operation URL builder"]
end

node_user(("Editor user"))

node_user -->|"opens editor"| node_vanilla_api
node_vanilla_api -->|"renders"| node_assembly
node_user -->|"opens editor"| node_react_component
node_topbar -.->|"requests save"| node_export
node_export -->|"reads state"| node_state_store
node_export -->|"builds operations URL"| node_cloudimage_url
node_annotation_input -.->|"creates annotations"| node_annotation_render
node_annotation_options -.->|"updates annotations"| node_annotation_render
node_state_actions -.->|"updates editor state"| node_state_store
node_cloudimage_state -->|"uses operation mapping"| node_cloudimage_url

click node_vanilla_api "https://github.com/scaleflex/filerobot-image-editor/blob/master/packages/filerobot-image-editor/src/index.js"
click node_react_component "https://github.com/scaleflex/filerobot-image-editor/blob/master/packages/react-filerobot-image-editor/src/index.js"
click node_assembly "https://github.com/scaleflex/filerobot-image-editor/blob/master/packages/react-filerobot-image-editor/src/components/AssemblyPoint/index.jsx"
click node_toolbar "https://github.com/scaleflex/filerobot-image-editor/blob/master/packages/react-filerobot-image-editor/src/components/ToolsBar/index.jsx"
click node_topbar "https://github.com/scaleflex/filerobot-image-editor/blob/master/packages/react-filerobot-image-editor/src/components/Topbar/SaveButton.jsx"
click node_canvas "https://github.com/scaleflex/filerobot-image-editor/blob/master/packages/react-filerobot-image-editor/src/components/MainCanvas/index.jsx"
click node_adjustments "https://github.com/scaleflex/filerobot-image-editor/tree/master/packages/react-filerobot-image-editor/src/components/tools"
click node_crop_resize "https://github.com/scaleflex/filerobot-image-editor/blob/master/packages/react-filerobot-image-editor/src/components/tools/Crop/Crop.jsx"
click node_filters "https://github.com/scaleflex/filerobot-image-editor/blob/master/packages/react-filerobot-image-editor/src/components/tools/Filters/Filters.jsx"
click node_watermark "https://github.com/scaleflex/filerobot-image-editor/blob/master/packages/react-filerobot-image-editor/src/components/tools/Watermark/Watermark.jsx"
click node_annotation_render "https://github.com/scaleflex/filerobot-image-editor/blob/master/packages/react-filerobot-image-editor/src/components/Layers/DesignLayer/index.jsx"
click node_annotation_input "https://github.com/scaleflex/filerobot-image-editor/blob/master/packages/react-filerobot-image-editor/src/hooks/useAnnotation/previewThenCallAnnotationAdding.js"
click node_annotation_options "https://github.com/scaleflex/filerobot-image-editor/blob/master/packages/react-filerobot-image-editor/src/components/common/AnnotationOptions/OpacityField.jsx"
click node_state_actions "https://github.com/scaleflex/filerobot-image-editor/tree/master/packages/react-filerobot-image-editor/src/actions"
click node_state_store "https://github.com/scaleflex/filerobot-image-editor/blob/master/packages/react-filerobot-image-editor/src/hooks/useStore.js"
click node_export "https://github.com/scaleflex/filerobot-image-editor/blob/master/packages/react-filerobot-image-editor/src/hooks/useTransformedImgData.js"
click node_cloudimage_state "https://github.com/scaleflex/filerobot-image-editor/blob/master/packages/react-filerobot-image-editor/src/utils/cloudimageQueryToDesignState.js"
click node_cloudimage_url "https://github.com/scaleflex/filerobot-image-editor/blob/master/packages/react-filerobot-image-editor/src/utils/operationsToCloudimageUrl.js"
click node_demo_config "https://github.com/scaleflex/filerobot-image-editor/blob/master/public/demo-config.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_vanilla_api,node_react_component,node_demo_config,node_user toneBlue
class node_assembly,node_toolbar,node_topbar,node_canvas toneAmber
class node_adjustments,node_crop_resize,node_filters,node_watermark,node_annotation_render,node_annotation_input,node_annotation_options toneMint
class node_state_actions,node_state_store,node_export,node_cloudimage_state,node_cloudimage_url toneRose
```

## Components

### Entry points

- [VanillaJS API](https://github.com/scaleflex/filerobot-image-editor/blob/master/packages/filerobot-image-editor/src/index.js): `packages/filerobot-image-editor/src/index.js`
- [React component](https://github.com/scaleflex/filerobot-image-editor/blob/master/packages/react-filerobot-image-editor/src/index.js): `packages/react-filerobot-image-editor/src/index.js`
- [Demo configuration](https://github.com/scaleflex/filerobot-image-editor/blob/master/public/demo-config.js): `public/demo-config.js`

### Editor interface

- [Editor assembly](https://github.com/scaleflex/filerobot-image-editor/blob/master/packages/react-filerobot-image-editor/src/components/AssemblyPoint/index.jsx): `packages/react-filerobot-image-editor/src/components/AssemblyPoint/index.jsx`
- [Tools toolbar](https://github.com/scaleflex/filerobot-image-editor/blob/master/packages/react-filerobot-image-editor/src/components/ToolsBar/index.jsx): `packages/react-filerobot-image-editor/src/components/ToolsBar/index.jsx`
- [Save and history](https://github.com/scaleflex/filerobot-image-editor/blob/master/packages/react-filerobot-image-editor/src/components/Topbar/SaveButton.jsx): `packages/react-filerobot-image-editor/src/components/Topbar/SaveButton.jsx`
- [Editing canvas](https://github.com/scaleflex/filerobot-image-editor/blob/master/packages/react-filerobot-image-editor/src/components/MainCanvas/index.jsx): `packages/react-filerobot-image-editor/src/components/MainCanvas/index.jsx`

### Image editing

- [Image adjustments](https://github.com/scaleflex/filerobot-image-editor/tree/master/packages/react-filerobot-image-editor/src/components/tools): `packages/react-filerobot-image-editor/src/components/tools`
- [Crop and resize](https://github.com/scaleflex/filerobot-image-editor/blob/master/packages/react-filerobot-image-editor/src/components/tools/Crop/Crop.jsx): `packages/react-filerobot-image-editor/src/components/tools/Crop/Crop.jsx`
- [Filters and finetune](https://github.com/scaleflex/filerobot-image-editor/blob/master/packages/react-filerobot-image-editor/src/components/tools/Filters/Filters.jsx): `packages/react-filerobot-image-editor/src/components/tools/Filters/Filters.jsx`
- [Watermarking](https://github.com/scaleflex/filerobot-image-editor/blob/master/packages/react-filerobot-image-editor/src/components/tools/Watermark/Watermark.jsx): `packages/react-filerobot-image-editor/src/components/tools/Watermark/Watermark.jsx`
- [Annotation rendering](https://github.com/scaleflex/filerobot-image-editor/blob/master/packages/react-filerobot-image-editor/src/components/Layers/DesignLayer/index.jsx): `packages/react-filerobot-image-editor/src/components/Layers/DesignLayer/index.jsx`
- [Annotation creation](https://github.com/scaleflex/filerobot-image-editor/blob/master/packages/react-filerobot-image-editor/src/hooks/useAnnotation/previewThenCallAnnotationAdding.js): `packages/react-filerobot-image-editor/src/hooks/useAnnotation/previewThenCallAnnotationAdding.js`
- [Annotation options](https://github.com/scaleflex/filerobot-image-editor/blob/master/packages/react-filerobot-image-editor/src/components/common/AnnotationOptions/OpacityField.jsx): `packages/react-filerobot-image-editor/src/components/common/AnnotationOptions/OpacityField.jsx`

### State and export

- [Design state actions](https://github.com/scaleflex/filerobot-image-editor/tree/master/packages/react-filerobot-image-editor/src/actions): `packages/react-filerobot-image-editor/src/actions`
- [Editor state access](https://github.com/scaleflex/filerobot-image-editor/blob/master/packages/react-filerobot-image-editor/src/hooks/useStore.js): `packages/react-filerobot-image-editor/src/hooks/useStore.js`
- [Save image data](https://github.com/scaleflex/filerobot-image-editor/blob/master/packages/react-filerobot-image-editor/src/hooks/useTransformedImgData.js): `packages/react-filerobot-image-editor/src/hooks/useTransformedImgData.js`
- [Design state conversion](https://github.com/scaleflex/filerobot-image-editor/blob/master/packages/react-filerobot-image-editor/src/utils/cloudimageQueryToDesignState.js): `packages/react-filerobot-image-editor/src/utils/cloudimageQueryToDesignState.js`
- [Operation URL builder](https://github.com/scaleflex/filerobot-image-editor/blob/master/packages/react-filerobot-image-editor/src/utils/operationsToCloudimageUrl.js): `packages/react-filerobot-image-editor/src/utils/operationsToCloudimageUrl.js`

### Other components

- **Editor user**

## Connections

- Editor user → VanillaJS API: opens editor
- VanillaJS API → Editor assembly: renders (evidence: `packages/filerobot-image-editor/src/index.js`)
- Editor user → React component: opens editor (evidence: `README.md`)
- Save and history → Save image data: requests save
- Save image data → Editor state access: reads state (evidence: `packages/react-filerobot-image-editor/src/hooks/useTransformedImgData.js`)
- Save image data → Operation URL builder: builds operations URL (evidence: `packages/react-filerobot-image-editor/src/hooks/useTransformedImgData.js`)
- Annotation creation → Annotation rendering: creates annotations
- Annotation options → Annotation rendering: updates annotations
- Design state actions → Editor state access: updates editor state
- Design state conversion → Operation URL builder: uses operation mapping (evidence: `packages/react-filerobot-image-editor/src/utils/cloudimageQueryToDesignState.js`)