Svelte

Key type: use your workspace public key here. This code ships to the browser, where anyone can read the key, so it must be one that can only upload — which is exactly what the public key is. Copy it from API Keys in the dashboard; it is always visible there.A private key would also upload, but never put one in client-side code: it can read, rename, and delete everything in your workspace. See Create an API key.

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
A Svelte project

Guide

Install the package.

npm install @autorender/svelte

yarn add @autorender/svelte

pnpm add @autorender/svelte

bun add @autorender/svelte

Set up the provider.

Wrap the components that need transformed images with AutoRenderProvider:

App.svelte

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

Render your first image.

Product.svelte

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

Examples

Complete transform example

Hero.svelte

<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

ProductVideo.svelte

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

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

Uploader.svelte

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

<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

Image transformations

Every parameter you can pass to transformations.

Direct upload API

The upload endpoint behind the uploader.

Video transformations

Resize, trim, and thumbnail video for <ARVideo>.

All SDKs

Front-end and backend SDKs for every stack.

Get started

Storage

Native (HTML)

Transformations

Optimization

Video

AI Tools

Resources

Prerequisites

Guide

Examples

Complete transform example

Video component

Upload widget

API reference

`autorenderUploader` (Svelte action)

`<ARImage />`

`<ARVideo />`

Next steps

Image transformations

Direct upload API

Video transformations

All SDKs

​Prerequisites

​Guide

​Examples

​Complete transform example

​Video component

​Upload widget

​API reference

​autorenderUploader (Svelte action)

​<ARImage />

​<ARVideo />

​Next steps

Image transformations

Direct upload API

Video transformations

All SDKs

Prerequisites

Guide

Examples

Complete transform example

Video component

Upload widget

API reference

`autorenderUploader` (Svelte action)

`<ARImage />`

`<ARVideo />`

Next steps