> ## 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.

# Svelte

> Render optimized, responsive images and video in Svelte with `<ARImage>` and `<ARVideo>`, plus an uploader action for browser uploads.

The `@autorender/svelte` SDK provides Svelte components — `<ARImage>` and `<ARVideo>` — that render optimized media from an Autorender delivery URL, an `AutoRenderProvider` for workspace config, and an `autorenderUploader` action for browser uploads.

## Prerequisites

* An Autorender account with a workspace ID — [create one in the dashboard](https://app.autorender.io)
* A Svelte project

## Guide

<Steps>
  <Step title="Install the package.">
    <CodeGroup>
      ```bash npm theme={null}
      npm install @autorender/svelte
      ```

      ```bash yarn theme={null}
      yarn add @autorender/svelte
      ```

      ```bash pnpm theme={null}
      pnpm add @autorender/svelte
      ```

      ```bash bun theme={null}
      bun add @autorender/svelte
      ```
    </CodeGroup>
  </Step>

  <Step title="Set up the provider.">
    Wrap the components that need transformed images with `AutoRenderProvider`:

    ```svelte App.svelte {6} theme={null}
    <script lang="ts">
      import { AutoRenderProvider, ARImage } from '@autorender/svelte/viewtag';
    </script>

    <AutoRenderProvider
      baseUrl="https://assets.autorender.io"
      workspace="LOKVTtKVGb"
      defaults={{}}
    >
      <!-- your components go here -->
    </AutoRenderProvider>
    ```
  </Step>

  <Step title="Render your first image.">
    ```svelte Product.svelte {11} theme={null}
    <script lang="ts">
      import { AutoRenderProvider, ARImage } from '@autorender/svelte/viewtag';
    </script>

    <AutoRenderProvider
      baseUrl="https://assets.autorender.io"
      workspace="LOKVTtKVGb"
      defaults={{}}
    >
      <ARImage
        src="products/chair.jpg"
        width={400}
        height={400}
        alt="Chair"
        transformations={{ fit: 'cover' }}
        responsive={true}
        lazy={true}
      />
    </AutoRenderProvider>
    ```

    This renders an `<img>` resized to **400×400 px**, cropped to fill, with a responsive `srcset` and lazy loading.
  </Step>
</Steps>

## Examples

### Complete transform example

```svelte Hero.svelte theme={null}
<script lang="ts">
  import { AutoRenderProvider, ARImage } from '@autorender/svelte/viewtag';
  import type { TransformOptions } from '@autorender/js/viewtag';

  const transform: TransformOptions = {
    w: 1200,
    h: 800,
    fit: 'cover',
    ar: '16:9',
    position: 'center',
    improve: true,
    sharpen: 50,
    layers: [
      {
        type: 'image',
        imagePath: 'logo.png',
        width: 200,
        placement: 'north-east',
      }
    ],
    blend: 'overlay',
  };
</script>

<AutoRenderProvider
  baseUrl="https://assets.autorender.io"
  workspace="LOKVTtKVGb"
  defaults={{}}
>
  <ARImage
    src="hero.jpg"
    width={1200}
    height={800}
    alt="Hero image"
    transformations={transform}
    responsive={true}
    class="hero-image"
  />
</AutoRenderProvider>
```

### Video component

```svelte ProductVideo.svelte theme={null}
<script lang="ts">
  import { AutoRenderProvider, ARVideo } from '@autorender/svelte/viewtag';
</script>

<AutoRenderProvider
  baseUrl="https://assets.autorender.io"
  workspace="LOKVTtKVGb"
  defaults={{}}
>
  <ARVideo
    src="docs/skateboarding.mp4"
    width={960}
    height={540}
    controls={true}
    preload="metadata"
    transformations={{ w: 960, h: 540 }}
  />
</AutoRenderProvider>
```

### Upload widget

The uploader runs in the browser, so read the API key from `import.meta.env` rather than hardcoding it.

```svelte Uploader.svelte {5} theme={null}
<script lang="ts">
  import { autorenderUploader } from '@autorender/svelte';
  import '@autorender/svelte/styles';

  const options = {
    apiKey: import.meta.env.VITE_AUTORENDER_KEY,
    type: 'inline',
    allowMultiple: true,
    onSuccess: ({ files }) => console.log('Uploaded', files),
  };
</script>

<div use:autorenderUploader={options}></div>
```

## API reference

### `autorenderUploader` (Svelte action)

Svelte action that mounts the uploader into a DOM element. Pass options as the action argument.

```svelte theme={null}
<div use:autorenderUploader={{ apiKey: '...', type: 'inline' }}></div>
```

### `<ARImage />`

**Props:**

* `src: string` — image source path (required)
* `width?: number` — image width in pixels
* `height?: number` — image height in pixels
* `alt?: string` — alt text (default `''`)
* `transformations?: TransformOptions` — transformation options
* `responsive?: boolean` — responsive images (default `true`)
* `lazy?: boolean` — lazy loading (default `true`)
* `sizes?: string` — `sizes` attribute for responsive images

### `<ARVideo />`

Video.js-based player. Props: `src`, `width`, `height`, `controls`, `preload`, `transformations`.

## Next steps

<CardGroup cols={2}>
  <Card title="Image transformations" icon="wand-magic-sparkles" iconType="solid" href="/docs/transformations/introduction">
    Every parameter you can pass to `transformations`.
  </Card>

  <Card title="Direct upload API" icon="cloud-arrow-up" iconType="solid" href="/docs/api-reference/direct-upload">
    The upload endpoint behind the uploader.
  </Card>

  <Card title="Video transformations" icon="film" iconType="solid" href="/docs/video/introduction">
    Resize, trim, and thumbnail video for `<ARVideo>`.
  </Card>

  <Card title="All SDKs" icon="cubes" iconType="solid" href="/docs/resources/sdks">
    Front-end and backend SDKs for every stack.
  </Card>
</CardGroup>