# AutoRender Docs - [Introduction](https://autorender.io/docs/introduction.md): Deliver your first optimized image using the Autorender URL API — no SDK, package, or build step required. - [Create an API Key](https://autorender.io/docs/create-an-api-key.md): Autorender gives every workspace a public key for uploading and lets you create private keys for everything else. Manage both in the dashboard. - [Introduction](https://autorender.io/docs/storage/introduction.md): Connect an existing storage bucket to Autorender and transform its assets in place — no migration, no re-upload. - [Amazon S3](https://autorender.io/docs/storage/amazon-s3.md): Connect an Amazon S3 bucket to Autorender and transform your AWS-hosted assets in place. - [Google Cloud Storage](https://autorender.io/docs/storage/google-cloud-storage.md): Connect a Google Cloud Storage bucket to Autorender and transform your GCS-hosted assets in place. - [Azure Blob Storage](https://autorender.io/docs/storage/azure-blob.md): Connect an Azure Blob container to Autorender and transform your Azure-hosted assets in place. - [Source Path](https://autorender.io/docs/storage/source-path.md): Point Autorender at any public web server and deliver its images optimized — without moving a single file. - [Introduction](https://autorender.io/docs/native/introduction.md): Add one script tag and Autorender Native turns plain HTML attributes into optimized, lazy-loaded, responsive images — no build step, no JavaScript to write. - [Platforms](https://autorender.io/docs/native/platforms.md): Where the Autorender Native script tag goes in Shopify, WordPress, Webflow, Google Tag Manager, and plain HTML — and when to use a platform integration instead. - [Attributes](https://autorender.io/docs/native/attributes.md): Every data-ar-* attribute Autorender Native reads — sources, backgrounds, transforms, intrinsic size, eager loading, and view containers. - [Hero and LCP](https://autorender.io/docs/native/hero.md): Preload your largest image so Autorender Native never delays Largest Contentful Paint — the one pattern to hand-build instead of marking with data-ar-src. - [Configuration](https://autorender.io/docs/native/configuration.md): Configure Autorender Native from the script URL — workspace, device pixel ratio, resize request volume, lazy-load lookahead, and debug logging. - [Events and classes](https://autorender.io/docs/native/events.md): The CSS classes and DOM events Autorender Native puts on every element it manages — for styling load states and hooking your own JavaScript into the image lifecycle. - [Troubleshooting](https://autorender.io/docs/native/troubleshooting.md): Diagnose Autorender Native when images don't load, resize, or size the way you expect — starting from the console. - [Introduction](https://autorender.io/docs/transformations/introduction.md): Transform images and videos in real time from the delivery URL — resize, crop, rotate, optimize, and overlay, with no stored variants. - [Resize and aspect ratio](https://autorender.io/docs/transformations/resize-and-aspect-ratio.md): Resize images by width, height, or aspect ratio using the w_, h_, and ar_ URL parameters. - [Crop](https://autorender.io/docs/transformations/crop.md): Crop images to exact dimensions with crop modes, positional gravity, and face or object detection. - [Rotate](https://autorender.io/docs/transformations/rotate.md): Rotate images by any angle, or auto-orient them from EXIF data, using the r_ parameter. - [Flip](https://autorender.io/docs/transformations/flip.md): Mirror images horizontally, vertically, or both using the flip_ parameter. - [Zoom](https://autorender.io/docs/transformations/zoom.md): Magnify a region of an image before cropping or resizing using the z_ parameter. - [Border radius](https://autorender.io/docs/transformations/border-radius.md): Add rounded corners or circular crops to images using the br_ parameter. - [Text layers](https://autorender.io/docs/transformations/text-layers.md): Composite text overlays onto images with control over font, size, color, and position using l_text. - [Image layers](https://autorender.io/docs/transformations/image-layers.md): Overlay logos, watermarks, and other images onto a base image using l_image. - [Introduction](https://autorender.io/docs/transformations/effects/introduction.md): Adjust color, tone, sharpness, and apply filters to any image with e_ effect tokens. - [Brightness](https://autorender.io/docs/transformations/effects/brightness.md): Lighten or darken an image across the whole frame with the e_brightness token. - [Contrast](https://autorender.io/docs/transformations/effects/contrast.md): Widen or narrow the gap between light and dark areas with the e_contrast token. - [Exposure](https://autorender.io/docs/transformations/effects/exposure.md): Apply a camera-style exposure shift to correct under- or overexposed images with the e_exposure token. - [Grayscale](https://autorender.io/docs/transformations/effects/grayscale.md): Convert an image to black and white by removing all color with the e_grayscale token. - [Saturation](https://autorender.io/docs/transformations/effects/saturation.md): Increase or decrease color intensity with the e_saturation token. - [Sharpen](https://autorender.io/docs/transformations/effects/sharpen.md): Enhance edges and detail so images look crisper with the e_sharpen token. - [Recipes](https://autorender.io/docs/transformations/recipes.md): Store common transformation combinations as short, reusable t_ tokens. - [Automatic](https://autorender.io/docs/optimization/automatic.md): Autorender picks the format, width, and parameter order for each request so you deliver optimized images with no per-device configuration. - [Introduction](https://autorender.io/docs/video/introduction.md): Transform video straight from a URL — thumbnails, resizing, trimming, rotation, and GIF, with no SDK or build step. - [Thumbnail](https://autorender.io/docs/video/thumbnail.md): Generate a WebP preview image from any video while preserving its aspect ratio. - [Resize & Aspect Ratio](https://autorender.io/docs/video/resize.md): Set exact video dimensions or force an aspect ratio for any player or platform. - [Trim](https://autorender.io/docs/video/trim.md): Clip a video segment by start and end offset, or by start and duration. - [Rotate](https://autorender.io/docs/video/rotate.md): Reorient a video by 90, 180, or 270 degrees to correct or match a playback layout. - [Flip](https://autorender.io/docs/video/flip.md): Mirror a video horizontally, vertically, or both. - [GIF](https://autorender.io/docs/video/gif.md): Convert a video segment into a lightweight GIF animation. - [Pad resize](https://autorender.io/docs/video/pad-resize.md): Fit a video into fixed dimensions with padding and a background color. - [MCP Server](https://autorender.io/docs/mcp-server.md): Connect Autorender to AI models over the Model Context Protocol so they can upload, manage, and transform assets in your workspace. - [Overview](https://autorender.io/docs/resources/sdks.md): Pick the Autorender SDK for your stack — front-end components for rendering optimized media, backend clients for uploads and file management. - [React](https://autorender.io/docs/resources/sdks/react.md): Render optimized, responsive images and video in React with `` and upload files with the Autorender uploader widget. - [Next.js](https://autorender.io/docs/resources/sdks/nextjs.md): Render optimized images with `` on top of `next/image`, plus config and upload helpers for Next.js apps. - [Vue.js](https://autorender.io/docs/resources/sdks/vuejs.md): Render optimized, responsive images and video in Vue 3 with `` and ``, plus a browser upload widget. - [JavaScript](https://autorender.io/docs/resources/sdks/javascript.md): Generate transformation URLs and add the upload widget with the core Autorender SDK that every framework adapter builds on. - [Angular](https://autorender.io/docs/resources/sdks/angular.md): Render optimized, responsive images and video in Angular with standalone components and an injectable service, plus a browser upload widget. - [Svelte](https://autorender.io/docs/resources/sdks/svelte.md): Render optimized, responsive images and video in Svelte with `` and ``, plus an uploader action for browser uploads. - [Node.js / TypeScript](https://autorender.io/docs/resources/sdks/nodejs.md): Upload files, manage folders, and call the full Autorender API from your Node.js or TypeScript server. - [Python](https://autorender.io/docs/resources/sdks/python.md): Upload files, manage folders, and call the full Autorender API from your Python server. - [Java](https://autorender.io/docs/resources/sdks/java.md): Upload files, manage folders, and call the full Autorender API from your Java server. Requires Java 8 or later. - [C# / .NET](https://autorender.io/docs/resources/sdks/dotnet.md): Upload files, manage folders, and call the full Autorender API from your .NET server. - [Ruby](https://autorender.io/docs/resources/sdks/ruby.md): Upload files, manage folders, and call the full Autorender API from your Ruby server. - [Sanity](https://autorender.io/docs/integrations/sanity.md): Browse, upload, and pick Autorender assets directly from Sanity Studio — as a source for image and file fields, or as a dedicated schema type that keeps Autorender metadata on your documents. - [Shopify](https://autorender.io/docs/integrations/shopify.md): Route Shopify store images through Autorender for automatic optimization and modern format delivery. - [Strapi](https://autorender.io/docs/integrations/strapi.md): Use Autorender as your Strapi Media Library upload provider, and browse and import existing Autorender assets into Strapi without re-uploading any bytes. - [WordPress](https://autorender.io/docs/integrations/wordpress.md): Integrate Autorender into your WordPress site to automatically optimize media delivery and use the native Gutenberg media picker. - [Anything Autorender Integration](https://autorender.io/docs/guides/anything-integration.md): Add Autorender as the image infrastructure behind an Anything project, whether you're new to Autorender or already have a workspace. - [Lovable Autorender Integration](https://autorender.io/docs/guides/lovable-integration.md): Add Autorender as the image infrastructure behind a Lovable project, whether you're new to Autorender or already have a workspace. - [v0 Autorender Integration](https://autorender.io/docs/guides/v0-integration.md): Add Autorender as the image infrastructure behind a v0 project, whether you're new to Autorender or already have a workspace. - [Bolt.new Autorender Integration](https://autorender.io/docs/guides/bolt-new-integration.md): Add Autorender as the image infrastructure behind a Bolt.new project, whether you're new to Autorender or already have a workspace. - [Replit Autorender Integration](https://autorender.io/docs/guides/replit-integration.md): Add Autorender as the image infrastructure behind a Replit project, whether you're new to Autorender or already have a workspace. - [Base44 Autorender Integration](https://autorender.io/docs/guides/base44-integration.md): Add Autorender as the image infrastructure behind a Base44 project, whether you're new to Autorender or already have a workspace. - [Emergent Autorender Integration](https://autorender.io/docs/guides/emergent-integration.md): Add Autorender as the image infrastructure behind an Emergent project, whether you're new to Autorender or already have a workspace. - [Autorender API](https://autorender.io/docs/api-reference/introduction.md): Upload, manage, and organize files in your Autorender workspace over HTTPS. - [Direct upload](https://autorender.io/docs/api-reference/direct-upload.md): Upload a file with multipart/form-data using an API key. - [Remote URL upload](https://autorender.io/docs/api-reference/remote-upload.md): Fetch a file from a remote URL and store it in your Autorender workspace. - [Multipart start](https://autorender.io/docs/api-reference/multipart-start.md): Create a multipart session and receive part size plus presigned PUT URLs. - [Upload parts](https://autorender.io/docs/api-reference/multipart-upload-parts.md): PUT each file chunk to its presigned URL from Multipart start. - [Multipart complete](https://autorender.io/docs/api-reference/multipart-complete.md): Finalize the multipart upload after all parts are uploaded. - [List files](https://autorender.io/docs/api-reference/list-files.md): Paginated files with sort, folder filter, and meta pagination. - [File details](https://autorender.io/docs/api-reference/get-file-details.md): Full metadata for one file by file number. - [Rename file](https://autorender.io/docs/api-reference/rename-file.md): Change a file display name; server may normalize extension. - [Delete file](https://autorender.io/docs/api-reference/delete-file.md): Permanently remove a file by file number. - [List folders](https://autorender.io/docs/api-reference/list-folders.md): List folders, optionally under a parent folder. - [Create folder](https://autorender.io/docs/api-reference/create-folder.md): Create a folder under an optional parent. - [Rename folder](https://autorender.io/docs/api-reference/rename-folder.md): Rename an existing folder by folder number. - [Delete folder](https://autorender.io/docs/api-reference/delete-folder.md): Delete a folder by folder number. - [List sources](https://autorender.io/docs/api-reference/list-sources.md): Paginated sources (S3, Azure, Google Cloud, or image source) with search and type filter. - [Create source](https://autorender.io/docs/api-reference/create-source.md): Create a new source: S3, Azure, Google Cloud, or image source. - [Source details](https://autorender.io/docs/api-reference/get-source-details.md): Full record for one source by its id. - [Update source](https://autorender.io/docs/api-reference/update-source.md): Partially update a source by its id. - [Delete source](https://autorender.io/docs/api-reference/delete-source.md): Delete a source by its id. ## OpenAPI Specs - [json](https://upload.autorender.io/api-docs/json) This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.