How scaleflex/filerobot-image-editor works
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: useTransformedImgData.js Save image data · index.js VanillaJS API · index.jsx Annotation rendering · useStore.js Editor state access
Components 20
Entry points
- VanillaJS API
packages/filerobot-image-editor/src/index.js - React component
packages/react-filerobot-image-editor/src/index.js - Demo configuration
public/demo-config.js
Editor interface
- Editor assembly
packages/react-filerobot-image-editor/src/components/AssemblyPoint/index.jsx - Tools toolbar
packages/react-filerobot-image-editor/src/components/ToolsBar/index.jsx - Save and history
packages/react-filerobot-image-editor/src/components/Topbar/SaveButton.jsx - Editing canvas
packages/react-filerobot-image-editor/src/components/MainCanvas/index.jsx
Image editing
- Image adjustments
packages/react-filerobot-image-editor/src/components/tools - Crop and resize
packages/react-filerobot-image-editor/src/components/tools/Crop/Crop.jsx - Filters and finetune
packages/react-filerobot-image-editor/src/components/tools/Filters/Filters.jsx - Watermarking
packages/react-filerobot-image-editor/src/components/tools/Watermark/Watermark.jsx - Annotation rendering
packages/react-filerobot-image-editor/src/components/Layers/DesignLayer/index.jsx - Annotation creation
packages/react-filerobot-image-editor/src/hooks/useAnnotation/previewThenCallAnnotationAdding.js - Annotation options
packages/react-filerobot-image-editor/src/components/common/AnnotationOptions/OpacityField.jsx
State and export
- Design state actions
packages/react-filerobot-image-editor/src/actions - Editor state access
packages/react-filerobot-image-editor/src/hooks/useStore.js - Save image data
packages/react-filerobot-image-editor/src/hooks/useTransformedImgData.js - Design state conversion
packages/react-filerobot-image-editor/src/utils/cloudimageQueryToDesignState.js - Operation URL builder
packages/react-filerobot-image-editor/src/utils/operationsToCloudimageUrl.js
Other components
- Editor user
Connections 10
- Editor user → VanillaJS API: opens editor
- VanillaJS API → Editor assembly: renders
packages/filerobot-image-editor/src/index.js - Editor user → React component: opens editor
README.md - Save and history → Save image data: requests save
- Save image data → Editor state access: reads state
packages/react-filerobot-image-editor/src/hooks/useTransformedImgData.js - Save image data → Operation URL builder: builds operations URL
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
packages/react-filerobot-image-editor/src/utils/cloudimageQueryToDesignState.js