{"id":46705163,"url":"https://github.com/imagekit-developer/imagekit-editor","last_synced_at":"2026-03-09T08:07:55.995Z","repository":{"id":309895585,"uuid":"919720020","full_name":"imagekit-developer/imagekit-editor","owner":"imagekit-developer","description":null,"archived":false,"fork":false,"pushed_at":"2026-03-05T16:07:01.000Z","size":25327,"stargazers_count":2,"open_issues_count":1,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2026-03-05T16:09:56.376Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/imagekit-developer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-01-20T22:07:11.000Z","updated_at":"2025-12-25T02:13:43.000Z","dependencies_parsed_at":"2025-08-14T12:32:32.669Z","dependency_job_id":"04db6f12-c47c-441f-9878-913f2ab3ba0c","html_url":"https://github.com/imagekit-developer/imagekit-editor","commit_stats":null,"previous_names":["imagekit-developer/imagekit-editor"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/imagekit-developer/imagekit-editor","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imagekit-developer%2Fimagekit-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imagekit-developer%2Fimagekit-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imagekit-developer%2Fimagekit-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imagekit-developer%2Fimagekit-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/imagekit-developer","download_url":"https://codeload.github.com/imagekit-developer/imagekit-editor/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imagekit-developer%2Fimagekit-editor/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30287460,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-09T02:57:19.223Z","status":"ssl_error","status_checked_at":"2026-03-09T02:56:26.373Z","response_time":61,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-03-09T08:07:55.513Z","updated_at":"2026-03-09T08:07:55.984Z","avatar_url":"https://github.com/imagekit-developer.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[\u003cimg width=\"250\" alt=\"ImageKit.io\" src=\"https://raw.githubusercontent.com/imagekit-developer/imagekit-javascript/master/assets/imagekit-light-logo.svg\"/\u003e](https://imagekit.io)\n\n# ImageKit Editor\n\n[![npm version](https://img.shields.io/npm/v/@imagekit/editor)](https://www.npmjs.com/package/@imagekit/editor)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![Twitter Follow](https://img.shields.io/twitter/follow/imagekitio?label=Follow\u0026style=social)](https://twitter.com/ImagekitIo)\n\nA powerful, React-based image editor component powered by ImageKit transformations. This editor provides an intuitive interface for applying various image transformations, managing transformation history, and exporting edited images.\n\n## Features\n\n- 🖼️ **Visual Image Editor**: Interactive UI for applying ImageKit transformations\n- 📝 **Transformation History**: Track and manage applied transformations using ImageKit's chain transformations\n- 🎨 **Multiple Transformation Types**: Support for resize, crop, focus, quality adjustments, and more\n- 🖥️ **Desktop Interface**: Modern interface built with Chakra UI for desktop environments\n- 🔧 **TypeScript Support**: Full TypeScript support with comprehensive type definitions\n\n## Installation\n\nInstall the package using npm or yarn:\n\n```bash\nnpm install @imagekit/editor\n```\n\n### Peer Dependencies\n\nThe editor requires the following peer dependencies to be installed in your project:\n\n```bash\nnpm install @chakra-ui/icons@1.1.1 @chakra-ui/react@~1.8.9 @emotion/react@^11.14.0 @emotion/styled@^11.14.1 framer-motion@6.5.1 react@^17.0.2 react-dom@^17.0.2 react-select@^5.2.1\n```\n\n## Quick Start\n\n```tsx\nimport {\n  Icon,\n  Portal,\n} from '@chakra-ui/react';\nimport { DownloadIcon } from '@chakra-ui/icons';\nimport type { ImageKitEditorProps, ImageKitEditorRef } from '@imagekit/editor';\nimport { ImageKitEditor } from '@imagekit/editor';\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\ninterface Props {\n  selectedFiles: Array\u003c{\n    url: string;\n    name: string;\n    // ... other file properties\n  }\u003e;\n  onClose(): void;\n}\n\nconst ImageEditor = ({ selectedFiles, onClose }: Props) =\u003e {\n  const [editorProps, setEditorProps] = useState\u003cImageKitEditorProps\u003e();\n  const imagekitEditorRef = useRef\u003cImageKitEditorRef\u003e(null);\n\n  const initEditor = useCallback(async () =\u003e {\n    const initialImages = selectedFiles.map(file =\u003e ({\n      src: file.url,\n      metadata: {\n        requireSignedUrl: file.url.includes('ik-s='),\n        ...file,\n      },\n    }));\n\n    setEditorProps({\n      initialImages,\n      onClose,\n      // Optional: Add signer for private images\n      signer: async ({ metadata, transformation }) =\u003e {\n        // Your URL signing logic here\n        return getSignedUrl(metadata, transformation);\n      },\n      // Optional: Add custom export options\n      exportOptions: {\n        label: 'Download Options',\n        icon: \u003cIcon boxSize=\"5\" as={DownloadIcon} /\u003e,\n        options: [\n          {\n            label: 'Download',\n            isVisible: (imageList: string[]) =\u003e imageList.length === 1,\n            onClick: (imageList: string[]) =\u003e {\n              // Your single file download logic here\n            },\n          },\n          {\n            label: 'Copy URLs',\n            isVisible: (imageList: string[]) =\u003e imageList.length \u003e 0,\n            onClick: async (imageList: string[]) =\u003e {\n              // Your copy URLs logic here\n\n              const urlsText = imageList.join('\\n');\n              await navigator.clipboard.writeText(urlsText);\n            },\n          },\n        ],\n      },\n    });\n  }, [selectedFiles, onClose]);\n\n  useEffect(() =\u003e {\n    initEditor();\n  }, [initEditor]);\n\n  if (!editorProps) {\n    return null;\n  }\n\n  return (\n    \u003cPortal\u003e\n      \u003cImageKitEditor ref={imagekitEditorRef} {...editorProps} /\u003e\n    \u003c/Portal\u003e\n  );\n};\n\nexport default ImageEditor;\n```\n\n## API Reference\n\n### ImageKitEditor Props\n\n| Prop | Type | Required | Description |\n|------|------|----------|-------------|\n| `onClose` | `() =\u003e void` | ✅ | Callback function called when the editor is closed |\n| `initialImages` | `Array\u003cstring \\| FileElement\u003e` | ❌ | Initial images to load in the editor |\n| `signer` | `Signer` | ❌ | Function to generate signed URLs for private images |\n| `onAddImage` | `() =\u003e void` | ❌ | Callback function for adding new images |\n| `exportOptions` | `ExportOptions` | ❌ | Configuration for export functionality |\n| `focusObjects` | `string[]` | ❌ | Custom list of selectable focus objects for object-based focus |\n\n### ImageKitEditor Ref Methods\n\nThe editor exposes the following methods through a ref:\n\n```tsx\ninterface ImageKitEditorRef {\n  loadImage: (image: string | FileElement) =\u003e void;\n  loadImages: (images: Array\u003cstring | FileElement\u003e) =\u003e void;\n  setCurrentImage: (imageSrc: string) =\u003e void;\n}\n```\n\n### Export Options\n\nYou can configure export functionality in two ways:\n\n#### Simple Export\n```tsx\nexportOptions={{\n  label: 'Download',\n  icon: \u003cDownloadIcon /\u003e,\n  onClick: (images: string[]) =\u003e {\n    // Handle export\n  }\n}}\n```\n\n#### Multiple Export Options\n```tsx\nexportOptions={{\n  label: 'Export',\n  options: [\n    {\n      label: 'Download JSON',\n      isVisible: true,\n      onClick: (images: string[]) =\u003e {\n        // Export transformation data\n      }\n    },\n    {\n      label: 'Copy URLs',\n      isVisible: (images) =\u003e images.length \u003e 0,\n      onClick: (images: string[]) =\u003e {\n        // Copy image URLs\n      }\n    }\n  ]\n}}\n```\n\n### Focus Objects\n\nYou can override the list of selectable focus objects used when a transformation's focus is set to \"Object\" (e.g., Maintain Aspect Ratio, Forced Crop, Extract). If not provided, the editor defaults to ImageKit's supported objects (e.g., person, bicycle, car, dog, etc.).\n\nSee the supported object list in the ImageKit docs: https://imagekit.io/docs/image-resize-and-crop#supported-object-list\n\n```tsx\n\u003cImageKitEditor\n  focusObjects={[\"person\", \"cat\", \"car\", \"customObject\"]}\n  // ... other props\n/\u003e\n```\n\n### File Element Interface\n\nFor advanced use cases with metadata and signed URLs:\n\n```tsx\ninterface FileElement\u003cMetadata = RequiredMetadata\u003e {\n  src: string;\n  metadata: Metadata \u0026 {\n    requireSignedUrl?: boolean;\n  };\n}\n```\n\nThe `metadata` object can contain any contextual information your application needs, such as file IDs, user context, etc. This metadata is passed to the signer function, allowing you to generate appropriate signed URLs based on the specific file and user context.\n\n## Advanced Usage\n\n### Signed URLs\n\nFor private images that require signed URLs, you can pass file metadata that will be available in the signer function:\n\n```tsx\nimport { Signer, ImageKitEditor } from '@imagekit/editor';\n\ninterface Metadata {\n  requireSignedUrl: boolean; // Required for signed URL generation\n  \n  // Add any other metadata properties you need, for example:\n  fileId: string;\n  userId: string;\n}\n\nconst signer: Signer\u003cMetadata\u003e = async (signerRequest, abortController) =\u003e {\n  // Access file context from the signer request\n  const { url, transformation, metadata } = signerRequest;\n  const { fileId, userId } = metadata;\n  \n  // Your signing logic using the metadata context\n  // The abortController can be used to cancel the request if needed\n  return await generateSignedUrl({\n    url,\n    fileId,\n    userId,\n    transformation,\n    signal: abortController?.signal, // Pass abort signal to your API call\n  });\n};\n\n\u003cImageKitEditor\n  signer={signer}\n  initialImages={[\n    {\n      src: 'https://ik.imagekit.io/demo/private-image.jpg',\n      metadata: {\n        requireSignedUrl: true,\n        fileId: 'file_123',\n        userId: 'user_456',\n        // ... other metadata\n      }\n    }\n  ]}\n  // ... other props\n/\u003e\n```\n\n## TypeScript Support\n\nThe editor is built with TypeScript and provides comprehensive type definitions. You can import types for better development experience:\n\n```tsx\nimport type { \n  ImageKitEditorProps, \n  ImageKitEditorRef, \n  FileElement, \n  Signer \n} from '@imagekit/editor';\n```\n\n## Contributing\n\nWe welcome contributions! Please see our [contributing guidelines](./CONTRIBUTING.md) for more details.\n\n## Support\n\n- 📖 [Documentation](https://imagekit.io/docs)\n- 💬 [Community Forum](https://community.imagekit.io)\n- 📧 [Support Email](mailto:support@imagekit.io)\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n---\n\nMade with ❤️ by [ImageKit](https://imagekit.io)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimagekit-developer%2Fimagekit-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fimagekit-developer%2Fimagekit-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimagekit-developer%2Fimagekit-editor/lists"}