JavaScript

Generate transformation URLs and add the upload widget with the core Autorender SDK that every framework adapter builds on.

The @autorender/js SDK is the core package: an Upload SDK for browser file uploads and a ViewTag SDK for building transformation and responsive-image URLs. Every framework adapter (React, Vue, Angular, Svelte) builds on it.

Prerequisites

• An Autorender account with a workspace ID — create one in the dashboard

Guide

1. Install the package.

   npm

   npm install @autorender/js
   

   yarn add @autorender/js
   

   pnpm add @autorender/js
   

   bun add @autorender/js
   
2. Initialize the client.

   import { createAR } from '@autorender/js/viewtag';
   
   const AR = createAR({
     baseUrl: 'https://assets.autorender.io',
     workspace: 'LOKVTtKVGb',
   });
   

3. Generate your first URL.

   const url = AR.url('products/chair.jpg', {
     w: 400,
     h: 400,
     fit: 'cover'
   });
   // https://assets.autorender.io/LOKVTtKVGb/w_400,h_400,c_fill,f_auto,q_auto/products/chair.jpg
   

   This resizes to 400×400 px (w_400,h_400), crops to fill (c_fill), and applies f_auto,q_auto defaults.

Examples

Transform string only

const transformString = AR.transformString({ w: 300, h: 300, fit: 'cover', q: 70 });
// w_300,h_300,c_fill,q_70

Video URLs

// MP4
const mp4Url = AR.url('docs/skateboarding.mp4', { w: 960, h: 540 });

// HLS master playlist
const hlsUrl = AR.url('st_240_360_480_720/docs/skateboarding.mp4/ar-master.m3u8');

// DASH manifest
const dashUrl = AR.url('processing/docs/skateboarding.mp4/dash/manifest.mpd');

Upload widget

The widget runs in the browser, so read the API key from an environment variable rather than hardcoding it.

import { createUploader } from '@autorender/js';
import '@autorender/js/styles';

const uploader = createUploader({
  apiKey: process.env.AUTORENDER_API_KEY,
  target: '#uploader-container',
  type: 'inline',
  allowMultiple: true,
  onSuccess: ({ files }) => {
    console.log('Uploaded:', files);
  },
});

API reference

createAR(config: CreateARConfig): ARInstance

Creates an Autorender client instance for image transformations.

Config options:

• 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 for responsive images
• imageBreakpoints?: number[] — image breakpoints for responsive images

Next steps

Image transformations

Every parameter AR.url() accepts.

Direct upload API

The upload endpoint behind the widget.

Video transformations

Build resize, trim, and thumbnail URLs for video.

All SDKs

Framework adapters built on this package.