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

Guide

1. Install the package.

   npm

   npm install @autorender/svelte
   

   yarn add @autorender/svelte
   

   pnpm add @autorender/svelte
   

   bun add @autorender/svelte
   
2. 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>
   

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

Upload widget

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.