Autorender Svelte SDK

Introduction

Autorender Svelte SDK provides a simple way to integrate Autorender with your Svelte applications. It allows you to:

• Upload files with a fully-featured, customizable upload widget (autorenderUploader action)
• Serve optimized images with automatic format selection, responsive sizes, and real-time transformations (<ARImage>, <AutoRenderProvider>)
• Stream video with HLS and DASH support via an optional Video.js integration (<ARVideo>)

TypeScript support

The SDK is written in TypeScript with full type definitions included. No additional @types packages needed.

Installation

npm install @autorender/svelte

Upload SDK Usage

<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,
    theme: 'system',
    sources: ['local', 'camera'],
    onSuccess: ({ files }) => console.log('Uploaded', files),
  };
</script>

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

ViewTag SDK Usage

Setup Provider

<script lang="ts">
  import { AutoRenderProvider, ARImage } from '@autorender/svelte';
  import type { TransformOptions } from '@autorender/js';
</script>

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

Use ARVideo Component (Video.js)

Install video.js when you use <ARVideo> (optional peer dependency):

npm install video.js

<script lang="ts">
  import { AutoRenderProvider, ARVideo } from '@autorender/svelte';
</script>

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

Supports MP4, HLS (.m3u8), and DASH (.mpd) sources.

Use AR Instance Directly

<script lang="ts">
  import { getContext } from 'svelte';
  import type { ARInstance, TransformOptions } from '@autorender/js';
  
  const AR: ARInstance = getContext('autorender');
  
  const imageUrl = $derived(AR.url('image.jpg', { w: 300, h: 300, fit: 'cover' }));
  const transformString = $derived(AR.transformString({ w: 300, h: 300 }));
  const dpr = $derived(AR.getDPR());
    
  const attrs = $derived(AR.responsiveImageAttributes({
    src: 'hero.jpg',
    width: 1200,
    sizes: '(min-width: 800px) 50vw, 100vw',
    transform: { fit: 'cover' }
  }));
</script>

<img 
  src={imageUrl} 
  srcset={attrs.srcSet} 
  sizes={attrs.sizes} 
  width={attrs.width} 
  alt="Image" 
/>

API Reference

Upload SDK

autorenderUploader(node, options)

Svelte action that attaches the uploader to an element.

Parameters:

• node: HTMLElement - Target element
• options: AutorenderUploaderParameters - Uploader options

ViewTag SDK

<AutoRenderProvider />

Svelte component that provides AR instance via context.

Props:

• baseUrl?: string - Base URL (default: 'https://assets.autorender.io')
• workspace: string - Your workspace ID
• defaults?: { f?: string, q?: string | number } - Default transformations
• deviceBreakpoints?: number[] - Device breakpoints
• imageBreakpoints?: number[] - Image breakpoints
• enableDPR?: boolean - Enable device pixel ratio (default: true)
• enableResponsive?: boolean - Enable responsive images (default: true)

<ARImage />

Svelte component that wraps <img> with AutoRender transformations.

Props:

• src: string - Image source path (required)
  • Supports workspace paths (e.g., products/shoe.jpg) and absolute remote URLs (e.g., https://example.com/image.jpg).
• width?: number - Image width in pixels
• height?: number - Image height in pixels
• transformations?: TransformOptions - Transformation options
• responsive?: boolean - Enable responsive images (default: true)
• lazy?: boolean - Enable lazy loading (default: true)
• sizes?: string - Sizes attribute for responsive images
• All standard <img> HTML attributes are forwarded (e.g., alt, class, style, on:click, etc.)

Context: 'autorender'

Access the AR instance via Svelte's getContext('autorender').

Type: ARInstance with methods:

• url(src: string, transform?: TransformOptions): string - Generate image URL
• transformString(transform: TransformOptions): string - Get transformation string only
• responsiveImageAttributes(options: ResponsiveOptions): ResponsiveAttributes - Generate responsive image attributes
• getDPR(): number - Get device pixel ratio

Documentation

See the full documentation for complete API reference.