React

Render optimized, responsive images and video in React with <ARImage> and upload files with the Autorender uploader widget.

The @autorender/react SDK gives React two building blocks: <ARImage> and <ARVideo> components that render optimized, responsive media from an Autorender delivery URL, and an <AutorenderUploader> widget for uploading files from the browser.

Prerequisites

• An Autorender account with a workspace ID — create one in the dashboard
• A React project (Vite, Create React App, Next.js, or similar)

Guide

1. Install the package.

   npm

   npm install @autorender/react
   

   yarn add @autorender/react
   

   pnpm add @autorender/react
   

   bun add @autorender/react
   
2. Set up the provider.

   Wrap your app with AutoRenderProvider so child components can read your workspace configuration.

   App.tsx

   import { AutoRenderProvider } from '@autorender/react/viewtag';
   
   function App() {
     return (
       <AutoRenderProvider
         baseUrl="https://assets.autorender.io"
         workspace="LOKVTtKVGb"
         defaults={{}}
       >
         <YourComponents />
       </AutoRenderProvider>
     );
   }
   

3. Render your first image.

   Use <ARImage> in place of <img> for transforms, responsive srcset, and lazy loading.

   ProductImage.tsx

   import { ARImage } from '@autorender/react/viewtag';
   
   function ProductImage() {
     return (
       <ARImage
         src="products/chair.jpg"
         width={400}
         height={400}
         alt="Chair"
         transformations={{ fit: 'cover' }}
         responsive={true}
         lazy={true}
         sizes="(min-width: 800px) 50vw, 100vw"
       />
     );
   }
   

   This renders an <img> resized to 400×400 px, cropped to fill, with a responsive srcset and native lazy loading.

Examples

Complete transform example

AdvancedImage.tsx

import { ARImage } from '@autorender/react/viewtag';

function AdvancedImage() {
  return (
    <ARImage
      src="hero.jpg"
      width={1200}
      height={800}
      alt="Hero image"
      transformations={{
        // Size & crop
        w: 1200,
        h: 800,
        fit: 'cover',
        ar: '16:9',
        position: 'center',

        // Transform
        r: 0,
        z: 1.2,
        flip: 'h',
        br: 20,

        // Format & quality
        f: 'auto',
        q: 'auto',

        // Effects
        improve: true,
        sharpen: 50,
        blur: 0,

        // Layers
        layers: [
          {
            type: 'image',
            imagePath: 'logo.png',
            width: 200,
            placement: 'north-east',
            opacity: 80,
          },
          {
            type: 'text',
            text: 'Autorender',
            fontFamily: 'arial',
            fontSize: 24,
            fontColor: 'FFFFFF',
            placement: 'south',
          }
        ],
        blend: 'overlay',
      }}
      responsive={true}
      lazy={true}
      className="product-image"
    />
  );
}

Video component (Video.js)

ProductVideo.tsx

import { ARVideo } from '@autorender/react/viewtag';

function ProductVideo() {
  return (
    <ARVideo
      src="docs/skateboarding.mp4"
      width={720}
      height={405}
      controls
      preload="metadata"
      transformations={{ w: 720, h: 405 }}
    />
  );
}

<ARVideo> accepts MP4, HLS (.m3u8), and DASH (.mpd) sources.

Upload widget

Pass the API key from an environment variable — the widget runs in the browser, so use a public-prefixed key scoped to uploads. Never hardcode the key.

App.tsx

import { AutorenderUploader } from '@autorender/react';
import '@autorender/react/styles';

function App() {
  return (
    <AutorenderUploader
      apiKey={process.env.VITE_AUTORENDER_API_KEY}  {/* NEXT_PUBLIC_AUTORENDER_API_KEY for Next.js, REACT_APP_AUTORENDER_API_KEY for CRA */}
      type="inline"
      allowMultiple
      theme="system"
      sources={['local', 'camera']}
      onSuccess={({ files }) => console.log('Uploaded', files)}
    />
  );
}

For imperative access (calling .destroy() or .reset()), use the useAutorenderUploader hook:

App.tsx

import { AutorenderUploader, useAutorenderUploader } from '@autorender/react';

function App() {
  const uploaderRef = useAutorenderUploader({
    apiKey: import.meta.env.VITE_AUTORENDER_API_KEY,
    type: 'inline',
    onSuccess: ({ files }) => console.log('Uploaded', files),
  });

  return (
    <AutorenderUploader
      ref={uploaderRef}
      apiKey={import.meta.env.VITE_AUTORENDER_API_KEY}
      type="inline"
      onSuccess={({ files }) => console.log('Uploaded', files)}
    />
  );
}

API reference

<AutorenderUploader />

React component that wraps the uploader.

Props: all CreateUploaderOptions except target, which the component handles.

<AutoRenderProvider />

React context provider that makes the AR instance available to child components.

Props:

• baseUrl?: string — base URL (default 'https://assets.autorender.io')
• workspace: string — your workspace ID
• defaults?: { f?: string, q?: string | number } — default transformations
• enableDPR?: boolean — device-pixel-ratio handling (default true)
• enableResponsive?: boolean — responsive images (default true)

<ARImage />

React component that wraps <img> with Autorender transformations.

Props:

• src: string — image source path (required)
• width?: number — image width in pixels
• height?: number — image height in pixels
• transformations?: TransformOptions — transformation options
• responsive?: boolean — responsive images (default true)
• lazy?: boolean — lazy loading (default true)
• sizes?: string — sizes attribute for responsive images
• preset?: string — named preset mapped to a t_<preset> URL segment (e.g. preset="thumbnail" → t_thumbnail)

useAutorenderUploader(options)

Hook that returns a ref to the uploader instance for imperative access (calling .destroy() or .reset()). Pass the ref to <AutorenderUploader> to populate it.

Returns: MutableRefObject<UploaderInstance | null>

Next steps

Image transformations

Every parameter you can pass to transformations.

Direct upload API

The upload endpoint behind the widget.

Video transformations

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

All SDKs

Front-end and backend SDKs for every stack.