> ## Documentation Index
> Fetch the complete documentation index at: https://autorender.io/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Overview

> Pick the Autorender SDK for your stack — front-end components for rendering optimized media, backend clients for uploads and file management.

Autorender ships **11 SDKs** across two jobs: rendering optimized images and video in the browser (ViewTag), and uploading and managing files from your app or server (Upload). Every front-end SDK is built on `@autorender/js`.

You can use an Autorender SDK to:

* Render responsive, lazy-loaded `<img>` and video with transforms applied at the URL.
* Add a drop-in upload widget to your app, with camera and local-file sources.
* Upload files from your server and generate delivery URLs in code.
* Create, rename, and delete files and folders programmatically.

<Info>The URL API needs no SDK — you can build delivery URLs by hand. See the [Introduction](/docs/introduction). Reach for an SDK when you want prebuilt components, uploads, or a URL builder.</Info>

## Front-end

Components for responsive images, lazy loading, device-pixel-ratio handling, and uploads.

<div className="grid grid-cols-2 gap-2 mb-4">
  <img src="https://assets.autorender.io/LOKVTtKVGb/upload-sdk.png" className="rounded-lg border border-gray-200 dark:border-gray-800 max-h-[150px] object-contain mx-auto" />

  <img src="https://assets.autorender.io/LOKVTtKVGb/upload-sdk-complete.png" className="rounded-lg border border-gray-200 dark:border-gray-800 max-h-[150px] object-contain mx-auto" />
</div>

<CardGroup cols={2}>
  <Card title="React" icon="react" iconType="brands" href="/docs/resources/sdks/react">
    `<ARImage>`, `<ARVideo>`, and the upload widget for React apps.
  </Card>

  <Card title="Next.js" icon="n" iconType="solid" href="/docs/resources/sdks/nextjs">
    `<ARImage>` on top of `next/image`, plus config and upload helpers.
  </Card>

  <Card title="Vue.js" icon="vuejs" iconType="brands" href="/docs/resources/sdks/vuejs">
    Vue 3 components and a Vite plugin for video support.
  </Card>

  <Card title="Angular" icon="angular" iconType="brands" href="/docs/resources/sdks/angular">
    Standalone components and an injectable service for Angular.
  </Card>

  <Card title="Svelte" icon="bolt" iconType="solid" href="/docs/resources/sdks/svelte">
    Svelte components and an uploader action.
  </Card>

  <Card title="JavaScript" icon="js" iconType="brands" href="/docs/resources/sdks/javascript">
    The core SDK every framework adapter is built on.
  </Card>
</CardGroup>

## Backend

Server-side clients for uploads, file management, folder operations, and URL generation.

<CardGroup cols={3}>
  <Card title="Node.js / TypeScript" icon="node-js" iconType="brands" href="/docs/resources/sdks/nodejs">
    Upload files and manage folders from Node.js **18+**.
  </Card>

  <Card title="Python" icon="python" iconType="brands" href="/docs/resources/sdks/python">
    The `autorender` package for Python **3.8+**.
  </Card>

  <Card title="Java" icon="java" iconType="brands" href="/docs/resources/sdks/java">
    `io.autorender:autorender-java` for Java **8+**.
  </Card>

  <Card title="C# / .NET" icon="microsoft" iconType="brands" href="/docs/resources/sdks/dotnet">
    The `Autorender` package for .NET **6+**.
  </Card>

  <Card title="Ruby" icon="gem" iconType="solid" href="/docs/resources/sdks/ruby">
    The `autorender` gem for Ruby **3.0+**.
  </Card>
</CardGroup>

## Next steps

<CardGroup cols={2}>
  <Card title="Image transformations" icon="wand-magic-sparkles" iconType="solid" href="/docs/transformations/introduction">
    Every transform parameter the SDKs accept, with examples.
  </Card>

  <Card title="Direct upload API" icon="cloud-arrow-up" iconType="solid" href="/docs/api-reference/direct-upload">
    The upload endpoint every backend SDK calls under the hood.
  </Card>
</CardGroup>