JavaScript

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

Install the package.

npm install @autorender/js

yarn add @autorender/js

pnpm add @autorender/js

bun add @autorender/js

Initialize the client.

import { createAR } from '@autorender/js/viewtag';

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

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');

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.

Get started

Storage

Native (HTML)

Transformations

Optimization

Video

AI Tools

Resources

Prerequisites

Guide

Examples

Transform string only

Video URLs

Upload widget

API reference

`createAR(config: CreateARConfig): ARInstance`

Next steps

Image transformations

Direct upload API

Video transformations

All SDKs

​Prerequisites

​Guide

​Examples

​Transform string only

​Video URLs

​Upload widget

​API reference

​createAR(config: CreateARConfig): ARInstance

​Next steps

Image transformations

Direct upload API

Video transformations

All SDKs

Prerequisites

Guide

Examples

Transform string only

Video URLs

Upload widget

API reference

`createAR(config: CreateARConfig): ARInstance`

Next steps