> ## Documentation Index
> Fetch the complete documentation index at: https://autorender.io/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# 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](https://app.autorender.io)

## Guide

<Steps>
  <Step title="Install the package.">
    <CodeGroup>
      ```bash npm theme={null}
      npm install @autorender/js
      ```

      ```bash yarn theme={null}
      yarn add @autorender/js
      ```

      ```bash pnpm theme={null}
      pnpm add @autorender/js
      ```

      ```bash bun theme={null}
      bun add @autorender/js
      ```
    </CodeGroup>
  </Step>

  <Step title="Initialize the client.">
    ```javascript {5} theme={null}
    import { createAR } from '@autorender/js/viewtag';

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

  <Step title="Generate your first URL.">
    ```javascript {1} theme={null}
    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.
  </Step>
</Steps>

## Examples

### Transform string only

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

### Video URLs

```javascript theme={null}
// 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.

```javascript {5} theme={null}
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

<CardGroup cols={2}>
  <Card title="Image transformations" icon="wand-magic-sparkles" iconType="solid" href="/docs/transformations/introduction">
    Every parameter `AR.url()` accepts.
  </Card>

  <Card title="Direct upload API" icon="cloud-arrow-up" iconType="solid" href="/docs/api-reference/direct-upload">
    The upload endpoint behind the widget.
  </Card>

  <Card title="Video transformations" icon="film" iconType="solid" href="/docs/video/introduction">
    Build resize, trim, and thumbnail URLs for video.
  </Card>

  <Card title="All SDKs" icon="cubes" iconType="solid" href="/docs/resources/sdks">
    Framework adapters built on this package.
  </Card>
</CardGroup>