{"id":47669286,"url":"https://github.com/imagekit-developer/sanity-plugin-imagekit","last_synced_at":"2026-04-02T12:24:34.802Z","repository":{"id":325460608,"uuid":"1044940324","full_name":"imagekit-developer/sanity-plugin-imagekit","owner":"imagekit-developer","description":"A Sanity Studio plugin that provides seamless integration with ImageKit.io, enabling you to browse, manage, and deliver optimized media directly from your Sanity Studio.","archived":false,"fork":false,"pushed_at":"2026-02-23T12:06:20.000Z","size":1405,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-03-08T10:30:55.252Z","etag":null,"topics":["imagekit","plugin","sanity-cms","sanity-io"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/sanity-plugin-imagekit","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-08-26T12:26:54.000Z","updated_at":"2026-02-23T12:03:01.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/imagekit-developer/sanity-plugin-imagekit","commit_stats":null,"previous_names":["imagekit-developer/sanity-plugin-imagekit"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/imagekit-developer/sanity-plugin-imagekit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imagekit-developer%2Fsanity-plugin-imagekit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imagekit-developer%2Fsanity-plugin-imagekit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imagekit-developer%2Fsanity-plugin-imagekit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imagekit-developer%2Fsanity-plugin-imagekit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/imagekit-developer","download_url":"https://codeload.github.com/imagekit-developer/sanity-plugin-imagekit/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imagekit-developer%2Fsanity-plugin-imagekit/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31306024,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-02T09:48:21.550Z","status":"ssl_error","status_checked_at":"2026-04-02T09:48:19.196Z","response_time":89,"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":["imagekit","plugin","sanity-cms","sanity-io"],"created_at":"2026-04-02T12:24:34.362Z","updated_at":"2026-04-02T12:24:34.793Z","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# Sanity Plugin for ImageKit.io\n\n[![npm version](https://img.shields.io/npm/v/sanity-plugin-imagekit)](https://www.npmjs.com/package/sanity-plugin-imagekit)\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 Sanity Studio plugin that provides seamless integration with [ImageKit.io](https://imagekit.io/), enabling you to browse, manage, and deliver optimized media directly from your Sanity Studio.\n\nImageKit is a complete media storage, optimization, and transformation solution with an image and video CDN. It integrates with your existing infrastructure (AWS S3, web servers, CDN, custom domains) to deliver optimized images in minutes with minimal code changes.\n\n## Table of Contents\n\n- [Sanity Plugin for ImageKit.io](#sanity-plugin-for-imagekitio)\n  - [Table of Contents](#table-of-contents)\n  - [Features](#features)\n  - [Prerequisites](#prerequisites)\n  - [Installation](#installation)\n  - [Usage](#usage)\n    - [ImageKit as an asset source](#imagekit-as-an-asset-source)\n    - [ImageKit as a custom schema type](#imagekit-as-a-custom-schema-type)\n  - [Asset Data Structure](#asset-data-structure)\n  - [Advanced Topics](#advanced-topics)\n    - [Working with Asset URLs](#working-with-asset-urls)\n    - [Accessing Asset Metadata in Your Frontend](#accessing-asset-metadata-in-your-frontend)\n    - [Custom Metadata](#custom-metadata)\n  - [Contributing](#contributing)\n  - [License](#license)\n  - [Support](#support)\n\n## Features\n\n- **Media Library Integration**: Browse and manage your ImageKit media library directly in Sanity Studio\n- **Asset Source Integration**: Integrates seamlessly with Sanity's image fields\n- **Custom Schema Support**: Provides `imagekit.asset` schema type for custom configurations\n- **Rich Asset Data**: Access complete asset metadata including dimensions, file size, and more.\n- **No Configuration Required**: Works out of the box without additional configuration\n- **Video Support**: Browse and select both images and video content from ImageKit\n- **Asset Preview**: View thumbnails and asset information before selection\n\n## Prerequisites\n\nBefore you begin, you need:\n\n- A Sanity Studio project (v3 or later)\n- Node.js and npm/yarn installed\n- An [ImageKit account](https://imagekit.io/registration/) (sign up if you don't have one)\n\nYou can refer to Sanity's [official documentation](https://www.sanity.io/docs) to understand the prerequisites for setting up your Sanity Studio instance.\n\n## Installation\n\nTo install the ImageKit plugin in your Sanity Studio, run one of the following commands from your project's root directory:\n\n```bash\n# Using npm\nnpm install sanity-plugin-imagekit\n\n# Using yarn\nyarn add sanity-plugin-imagekit\n\n# Using pnpm\npnpm install sanity-plugin-imagekit\n```\n\n## Usage\n\nThis package exports two plugins:\n- `imagekitAssetSourcePlugin` - use this if you intend to use ImageKit as an asset source for image fields in your Sanity Studio.\n- `imagekitSchemaPlugin` - use this if you intend to define a custom schema type that stores comprehensive asset metadata from ImageKit, allowing you to access detailed information about each asset in your content.\n### ImageKit as an asset source\n\nTo start using this plugin, first import it from the package in your `sanity.config.ts`.\n\n```typescript\n// sanity.config.ts\nimport { defineConfig } from 'sanity'\nimport { imagekitAssetSourcePlugin } from 'sanity-plugin-imagekit'\n\nexport default defineConfig({\n  projectId: 'your-project-id',\n  dataset: 'production',\n  // ... other configuration\n  plugins: [\n    imagekitAssetSourcePlugin(),\n  ],\n})\n```\n\nOnce done, the plugin will now be available as an asset source for image fields in your Sanity Studio. When you add an image field to your schema, ImageKit will automatically appear as an option in the asset source dropdown.\n\nFor most use cases, you can simply use the standard Sanity image field like:\n\n```typescript\n{\n  type: \"image\",\n  name: \"heroImage\",\n  title: \"Hero Image\",\n  // ImageKit will appear as an option in the asset source dropdown\n}\n```\n\n\u003cimg src=\"https://raw.githubusercontent.com/imagekit-developer/sanity-plugin-imagekit/main/static/imagekit-asset-source-plugin.png\"\u003e\n\n### ImageKit as a custom schema type\n\nFor more control, you can also use the custom `imagekit.asset` schema type.\n\n\u003cimg src=\"https://raw.githubusercontent.com/imagekit-developer/sanity-plugin-imagekit/main/static/imagekit-schema-type-plugin.png\"\u003e\n\nTo do this, first import the `imagekitSchemaPlugin` from the package.\n\n```typescript\nimport { imagekitSchemaPlugin } from 'sanity-plugin-imagekit'\n\n// Add to plugins array\nplugins: [imagekitSchemaPlugin()]\n\n// Use in schema\n{\n  type: \"imagekit.asset\",\n  name: \"imagekitImage\",\n  title: \"ImageKit Image\",\n  description: \"Select an image from your ImageKit media library\"\n}\n```\n\nThis custom type stores comprehensive asset metadata from ImageKit, allowing you to access detailed information about each asset in your content.\n\n## Asset Data Structure\n\nWhen you select an image from ImageKit, it's stored with the following comprehensive metadata:\n\n```json\n{\n  \"_type\": \"imagekit.asset\",\n  \"fileId\": \"unique_file_id\",\n  \"name\": \"image_name.jpg\",\n  \"url\": \"https://ik.imagekit.io/your_account/image.jpg\",\n  \"width\": 1920,\n  \"height\": 1080,\n  \"fileType\": \"image\",\n  \"size\": 245760,\n  \"createdAt\": \"2024-01-01T00:00:00Z\",\n  \"mime\": \"image/jpeg\",\n  // other fields\n}\n```\n\n**NOTE**: Since Sanity Studio expects object keys to be matching the regex `/^\\$?[a-zA-Z0-9_-]+$/` and ImageKit's Custom Metadata allows characters outside of this set, this plugin sanitizes the keys to replace non-supported characters with underscore i.e. `_`.\n\n## Advanced Topics\n\n### Working with Asset URLs\n\nThe stored `url` field provides a direct link to your asset on the ImageKit CDN. You can use this URL directly in your frontend, or apply ImageKit's real-time transformation URLs for optimization:\n\n```typescript\n// Direct URL\nconst directUrl = asset.url;\n\n// With transformation (example: resize to 300px width)\nconst transformedUrl = `${asset.url}?tr=w-300`;\n```\n\n### Accessing Asset Metadata in Your Frontend\n\nWhen querying your Sanity documents, the asset data is available for use:\n\n```typescript\n// Example query\nconst query = `*[_type == \"article\"][0] { heroImage { url, width, height } }`;\n\n// Result\n{\n  \"heroImage\": {\n    \"url\": \"https://ik.imagekit.io/your_account/image.jpg\",\n    \"width\": 1920,\n    \"height\": 1080\n  }\n}\n```\n\n### Custom Metadata\n\nImageKit's custom metadata feature allows you to store additional information with your assets. This data is accessible through the plugin:\n\n```json\n{\n  \"customMetadata\": {\n    \"alt\": \"Hero image for homepage\",\n    \"photographer\": \"John Doe\",\n    \"license\": \"CC0\"\n  }\n}\n```\n## Contributing\n\nContributions are welcome! Please read our [contributing guidelines](CONTRIBUTING.md) before submitting pull requests.\n\n## License\n\nMIT - see the [LICENSE](LICENSE) file for details.\n\n## Support\n\nFor support, please:\n- Open an issue in the [GitHub repository](https://github.com/imagekit-developer/sanity-plugin-imagekit)\n- Contact [ImageKit Support](https://imagekit.io/dashboard/support/)\n- Visit [ImageKit Documentation](https://imagekit.io/docs/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimagekit-developer%2Fsanity-plugin-imagekit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fimagekit-developer%2Fsanity-plugin-imagekit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimagekit-developer%2Fsanity-plugin-imagekit/lists"}