{"_id":"@autorender/sanity","name":"@autorender/sanity","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@autorender/sanity","version":"0.1.0","description":"AutoRender integration for Sanity Studio — browse and select AutoRender DAM assets as an asset source or a custom schema type.","keywords":["sanity","sanity-plugin","autorender","dam","cdn"],"homepage":"https://github.com/autorender/autorender-sdk#readme","bugs":{"url":"https://github.com/autorender/autorender-sdk/issues"},"repository":{"type":"git","url":"git+https://github.com/autorender/autorender-sdk.git","directory":"packages/sanity"},"license":"MIT","author":{"name":"Autorender"},"type":"module","sideEffects":false,"exports":{".":{"types":"./lib/index.d.ts","source":"./src/index.ts","import":"./lib/index.esm.js","require":"./lib/index.cjs","default":"./lib/index.esm.js"},"./package.json":"./package.json"},"main":"./lib/index.cjs","module":"./lib/index.esm.js","source":"./src/index.ts","types":"./lib/index.d.ts","scripts":{"build":"run-s clean && plugin-kit verify-package --silent && pkg-utils build --strict && pkg-utils --strict","clean":"rimraf lib","link-watch":"plugin-kit link-watch","prepack":"run-s build","prepublishOnly":"run-s build","watch":"pkg-utils watch --strict","typecheck":"tsc --noEmit -p tsconfig.lib.json"},"dependencies":{"@sanity/icons":"^3.7.4","@sanity/ui":"^2.16.4"},"devDependencies":{"@sanity/pkg-utils":"^2.4.10","@sanity/plugin-kit":"^3.1.10","npm-run-all":"^4.1.5","rimraf":"^5.0.0","sanity":"^3.78.1","typescript":"^5.7.3"},"peerDependencies":{"react":"^18.3 || ^19","react-dom":"^18.3 || ^19","sanity":"^3 || ^4 || ^5"},"engines":{"node":">=14"},"sanityPlugin":{"verifyPackage":{"tsconfig":false,"sanityV2Json":false,"eslintImports":false}},"_id":"@autorender/sanity@0.1.0","gitHead":"80614c9784451a9d0fbb101065e45167752a675c","_nodeVersion":"22.23.2","_npmVersion":"10.9.8","dist":{"integrity":"sha512-G8EqfRmdEqjqkSgkUlsfZAAgEccM6skpiGPk8muTaiWjs9lfoaW1vzUssrQKSEPBrzoFnrfB3DV1W0pnGwCN+Q==","shasum":"3a3374c1903cb851c3f27eb781db0f0e43285c3d","tarball":"https://registry.npmjs.org/@autorender/sanity/-/sanity-0.1.0.tgz","fileCount":38,"unpackedSize":603620,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCHFRLFs9CZcmvdX8dhIT7ntquYcboHRJ/3dGSnkkGHjQIhAN4zf6/Gv73qzMU8lQQ3HhTwbYJKaJMKSK+PX38sgC+9"}]},"_npmUser":{"name":"autorender","email":"autorenderhq@gmail.com"},"directories":{},"maintainers":[{"name":"autorender","email":"autorenderhq@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/sanity_0.1.0_1787595310145_0.5215911353788898"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-24T18:15:09.981Z","0.1.0":"2026-08-24T18:15:10.314Z","modified":"2026-08-24T18:15:10.594Z"},"maintainers":[{"name":"autorender","email":"autorenderhq@gmail.com"}],"description":"AutoRender integration for Sanity Studio — browse and select AutoRender DAM assets as an asset source or a custom schema type.","homepage":"https://github.com/autorender/autorender-sdk#readme","keywords":["sanity","sanity-plugin","autorender","dam","cdn"],"repository":{"type":"git","url":"git+https://github.com/autorender/autorender-sdk.git","directory":"packages/sanity"},"author":{"name":"Autorender"},"bugs":{"url":"https://github.com/autorender/autorender-sdk/issues"},"license":"MIT","readme":"# @autorender/sanity\n\n[](https://www.npmjs.com/package/@autorender/sanity)\n[](https://opensource.org/licenses/MIT)\n\n> AutoRender integration for Sanity Studio v3+. Browse, upload to, and pick from your AutoRender media library (images, video, and other files) without leaving the Studio.\n\n[AutoRender](https://autorender.io) is a media/DAM (digital asset management) platform with a built-in image and video CDN. This plugin lets content editors browse, upload, and pick AutoRender assets directly from Sanity Studio, either as a source for Sanity's native `image`/`file` fields, or through a dedicated `autorender.asset` schema type that keeps the asset's AutoRender metadata (dimensions, tags, folder, etc.) attached to the document.\n\n## Table of Contents\n\n- [Quick Start](#quick-start)\n- [Plugin Features](#plugin-features)\n- [Prerequisites](#prerequisites)\n- [Installation](#installation)\n- [Usage](#usage)\n - [1. `autorenderAssetSourcePlugin` — AutoRender as an asset source](#1-autorenderassetsourceplugin--autorender-as-an-asset-source)\n - [2. `autorenderSchemaPlugin` — AutoRender as a custom schema type](#2-autorenderschemaplugin--autorender-as-a-custom-schema-type)\n - [Uploading new files](#uploading-new-files)\n- [Security](#security)\n- [Asset Data Structure](#asset-data-structure)\n- [Working with Asset Data](#working-with-asset-data)\n- [Advanced Topics](#advanced-topics)\n- [License](#license)\n- [Documentation](#documentation)\n\n## Quick Start\n\n```sh\nnpm install @autorender/sanity\n```\n\n```ts\n// sanity.config.ts\nimport {defineConfig} from 'sanity'\nimport {autorenderAssetSourcePlugin, autorenderSchemaPlugin} from '@autorender/sanity'\n\nconst autorenderConfig = {apiKey: process.env.SANITY_STUDIO_AUTORENDER_API_KEY!}\n\nexport default defineConfig({\n // ...\n plugins: [\n autorenderAssetSourcePlugin(autorenderConfig), // adds \"AutoRender\" to image/file field pickers\n autorenderSchemaPlugin(autorenderConfig), // adds the `autorender.asset` schema type\n ],\n})\n```\n\nThat's enough to browse, upload, and pick AutoRender assets from any `image`/`file` field. Read on for the `autorender.asset` schema type (keeps assets served from the AutoRender CDN with full metadata attached) and the rest of the configuration options.\n\nThis plugin only talks to your AutoRender workspace's own endpoints (`GET /files`, `GET /folders`, `POST /uploads`) — it does not rename or delete assets, and it does not manage your DAM beyond that.\n\n## Plugin Features\n\n- Browse AutoRender folders and files from inside Sanity Studio, with search and pagination.\n- Upload new files straight to AutoRender from the same dialog — no need to leave the Studio to add something new to your DAM.\n- Use AutoRender as an asset source for standard `image` and `file` fields — Sanity downloads the selected asset into its own asset pipeline, same as any other third-party asset source.\n- Or use the `autorender.asset` object schema type to store the asset's AutoRender metadata (file number, folder, tags, dimensions, custom metadata, …) directly on your document, and keep serving the file from the AutoRender CDN.\n- \"Add multiple\" support for arrays of `autorender.asset` objects.\n- Diff view and document previews for `autorender.asset` fields.\n- Zero required dependencies beyond `@sanity/ui` and `@sanity/icons` — the browsing UI is built with Sanity's own design system, no iframes or third-party widgets.\n\n## Prerequisites\n\nBefore you begin, you need:\n\n- A Sanity Studio project (**v3 or later**) and a local instance of it running. Refer to Sanity's [official documentation](https://www.sanity.io/docs) if you haven't set one up yet.\n- Node.js and npm/yarn/pnpm installed.\n- An AutoRender workspace and API key (from your AutoRender dashboard).\n\n## Installation\n\nTo install the plugin in your Sanity Studio instance, run one of the following commands from your project's root directory:\n\n```bash\n# Using npm\nnpm install @autorender/sanity\n\n# Using yarn\nyarn add @autorender/sanity\n\n# Using pnpm\npnpm install @autorender/sanity\n```\n\n## Usage\n\nThis package ships two plugins that can be used independently or together.\n\n### 1. `autorenderAssetSourcePlugin` — AutoRender as an asset source\n\nAdd AutoRender as a source editors can pick from when filling in a normal `image` or `file` field.\n\n```ts\n// sanity.config.ts\nimport {defineConfig} from 'sanity'\nimport {autorenderAssetSourcePlugin} from '@autorender/sanity'\n\nexport default defineConfig({\n // ...\n plugins: [\n autorenderAssetSourcePlugin({\n apiKey: process.env.SANITY_STUDIO_AUTORENDER_API_KEY!,\n // baseUrl: 'https://upload.autorender.io/api/v1', // optional, this is the default\n // title: 'AutoRender', // optional, label shown in the asset source list\n }),\n ],\n})\n```\n\nWith this installed, any `image` or `file` field in your schema shows an \"AutoRender\" entry alongside \"Upload\" and \"Browse\" in the asset selection menu. Picking an asset there hands Sanity a plain CDN url; Sanity fetches it and creates a normal Sanity asset document, exactly like any other asset source.\n\n### 2. `autorenderSchemaPlugin` — AutoRender as a custom schema type\n\nUse this when you want to *keep* serving assets from the AutoRender CDN (instead of Sanity's), and want the asset's AutoRender metadata (tags, folder, dimensions, custom metadata) available in GROQ queries.\n\n```ts\n// sanity.config.ts\nimport {defineConfig} from 'sanity'\nimport {autorenderSchemaPlugin} from '@autorender/sanity'\nimport {schemaTypes} from './schemas'\n\nexport default defineConfig({\n // ...\n plugins: [\n autorenderSchemaPlugin({\n apiKey: process.env.SANITY_STUDIO_AUTORENDER_API_KEY!,\n }),\n ],\n schema: {\n types: schemaTypes,\n },\n})\n```\n\nThen reference the `autorender.asset` type from your own document schemas:\n\n```ts\n// schemas/post.ts\nimport {defineType} from 'sanity'\n\nexport default defineType({\n name: 'post',\n type: 'document',\n fields: [\n {name: 'title', type: 'string'},\n {name: 'coverAsset', type: 'autorender.asset', title: 'Cover'},\n {\n name: 'gallery',\n type: 'array',\n title: 'Gallery',\n of: [{type: 'autorender.asset'}],\n },\n ],\n})\n```\n\nA single `autorender.asset` field renders a preview plus \"Select…\"/\"Remove\" buttons. An array of `autorender.asset` gets an extra \"Add multiple\" button so editors can pick several assets from one browsing session.\n\nBoth plugins can be installed together — they share the same `apiKey`/`baseUrl` config shape, so most Studios simply call each with the same object.\n\n### Uploading new files\n\nBoth the asset-source dialog and the `autorender.asset` field's browser include an **\"Upload new\"** button, so editors can add a file straight to AutoRender without leaving Sanity. Uploads go to whichever AutoRender folder is currently open in the dialog (shown just below the folder breadcrumb). A successful upload is selected immediately — same behavior as Sanity's own native \"Upload\" button on an `image` field.\n\n## Security\n\nBrowsing your Autorender library (`GET /files`, `GET /folders`) requires a **private** API key — Autorender's public key is refused with a `403` on everything except uploading. Sanity Studio is a client-side React application, so the private key you pass into either plugin's config is bundled into the Studio's JavaScript and is visible to **anyone with access to the Studio** — including via browser devtools or the network tab, not just people you'd consider \"developers\". A private key can do everything the Autorender API offers in your workspace (list, upload, rename, delete), not just browse and upload.\n\n- Restrict who has access to your Studio deployment appropriately for the sensitivity of your AutoRender workspace — this is the only real mitigation, since browsing requires a private key and there is currently no scoped or read-only key tier to fall back to.\n- Never rely on this plugin, or Studio access control alone, as your only barrier to your AutoRender account — treat the key as public-ish, the same way you'd treat any other client-exposed credential.\n\n## Asset Data Structure\n\nThe `autorender.asset` object stores a camelCase mirror of the fields AutoRender returns from `GET /files`:\n\n```json\n{\n \"_type\": \"autorender.asset\",\n \"_key\": \"a1b2c3d4-e5f6-4a7b-8c9d-0e1f2a3b4c5d\",\n \"fileNo\": \"f_8f3a2c1b\",\n \"name\": \"hero-banner.jpg\",\n \"url\": \"https://assets.autorender.io/wB5HrlVhGq/marketing/hero-banner.jpg\",\n \"thumbnail\": \"https://assets.autorender.io/wB5HrlVhGq/marketing/hero-banner.jpg\",\n \"width\": 2400,\n \"height\": 1350,\n \"format\": \"jpg\",\n \"mimeType\": \"image/jpeg\",\n \"size\": 482113,\n \"path\": \"marketing/hero-banner.jpg\",\n \"folderNo\": \"fo_1a2b3c4d\",\n \"folderName\": \"marketing\",\n \"tags\": [\"hero\", \"homepage\"],\n \"createdAt\": \"2026-01-14T10:32:00.000Z\",\n \"updatedAt\": null,\n \"metadata\": {\n \"alt_text\": \"Hero banner for the spring campaign\",\n \"photographer\": \"J. Rivera\"\n }\n}\n```\n\n### A note on metadata keys\n\nSanity requires every object key stored on a document to match `/^\\$?[a-zA-Z0-9_-]+$/`. AutoRender's custom `metadata` field is arbitrary and user-defined in your AutoRender workspace, so it can contain keys with spaces, dots, or other characters Sanity would reject.\n\nThis plugin sanitizes metadata keys automatically before writing them to a document: any character outside `[a-zA-Z0-9_-]` is replaced with `_` (a leading `$` is valid under the regex above and is left as-is). For example, an AutoRender metadata key of `\"Alt Text\"` is stored as `\"Alt_Text\"`. Sanitization recurses into nested objects and arrays, and two different keys that happen to sanitize to the same string (e.g. `\"a b\"` and `\"a.b\"`) get a numeric suffix so neither value is lost. `createAutorenderClient` applies this sanitization automatically while mapping API responses. The same logic is also exported separately as `sanitizeMetadataKeys`, if you want to reuse it elsewhere.\n\n## Working with Asset Data\n\n### URL usage\n\nAssets picked through `autorenderSchemaPlugin`'s `autorender.asset` type keep their AutoRender CDN url as plain data — use `url` (and `thumbnail` for a poster/preview image) directly:\n\n```tsx\nfunction CoverImage({coverAsset}: {coverAsset: {url: string; name: string} | undefined}) {\n if (!coverAsset) return null\n return 
\n}\n```\n\nThere is no signed-URL or private-file concept in AutoRender — `url`/`thumbnail` are always plain public CDN links, safe to use directly in `![]()
`/`