Autorender Upload SDK

Production-grade JavaScript SDK for embedding Autorender's upload experience into any web application. The SDK ships with a customizable widget, an API client, and framework adapters for React, Vue, Angular, Svelte, and React Native.

📦 Packages

The SDK is split into separate packages for optimal bundle size. Each framework package is standalone - you only need to install one package:

• @autorender/sdk-react - React adapter (~1.4KB + core)
• @autorender/sdk-vue - Vue adapter (~842B + core)
• @autorender/sdk-angular - Angular adapter (~273B + core)
• @autorender/sdk-svelte - Svelte adapter (~678B + core)
• @autorender/sdk-react-native - React Native adapter (~14KB + core)
• autorender_uploader - Flutter adapter (WebView bridge, pub.dev)
• @autorender/sdk-core - Core functionality (use for vanilla JS)

Why separate packages? Each adapter is a thin wrapper around the core. This reduces bundle size by ~70% compared to a monolithic package. Users only install what they need.

🚀 Quick Start

React

npm install @autorender/sdk-react

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

function App() {
  return (
    <AutorenderUploader
      apiKey={process.env.REACT_APP_AUTORENDER_KEY}
      type="inline"
      allowMultiple
      theme="system"
      sources={['local', 'camera']}
      onSuccess={(files) => console.log('Uploaded', files)}
      onProgress={(progress) => console.log('Progress', progress)}
      onError={(error) => console.error('Upload failed', error)}
    />
  );
}

Vue

npm install @autorender/sdk-vue

<script setup>
import { onMounted, onUnmounted, ref } from 'vue';
import { createAutorenderUploader } from '@autorender/sdk-vue';
import '@autorender/sdk-vue/styles';

const containerRef = ref(null);
let uploader = null;

onMounted(() => {
  if (containerRef.value) {
    uploader = createAutorenderUploader(containerRef.value, {
      apiKey: import.meta.env.VITE_AUTORENDER_KEY,
      type: 'inline',
      allowMultiple: true,
      onSuccess: (files) => console.log('Uploaded', files),
    });
  }
});

onUnmounted(() => {
  uploader?.destroy();
});
</script>

<template>
  <div ref="containerRef"></div>
</template>

Angular

npm install @autorender/sdk-angular

import { Component, ElementRef, OnInit, OnDestroy } from '@angular/core';
import { bootstrapAutorenderUploader, type UploaderInstance } from '@autorender/sdk-angular';
import '@autorender/sdk-angular/styles';

@Component({
  selector: 'app-upload',
  template: '<div class="uploader"></div>',
  standalone: true,
})
export class UploadComponent implements OnInit, OnDestroy {
  private uploader: UploaderInstance | null = null;

  constructor(private host: ElementRef<HTMLElement>) {}

  ngOnInit() {
    const target = this.host.nativeElement.querySelector('.uploader');
    if (target) {
      this.uploader = bootstrapAutorenderUploader(target, {
        apiKey: environment.autorenderKey,
        type: 'inline',
        allowMultiple: true,
        onSuccess: (files) => console.log('Uploaded', files),
      });
    }
  }

  ngOnDestroy() {
    this.uploader?.destroy();
  }
}

Svelte

npm install @autorender/sdk-svelte

<script>
  import { autorenderUploader } from '@autorender/sdk-svelte';
  import '@autorender/sdk-svelte/styles';

  const options = {
    apiKey: import.meta.env.VITE_AUTORENDER_KEY,
    type: 'inline',
    allowMultiple: true,
    onSuccess: (files) => console.log('Uploaded', files),
  };
</script>

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

React Native

npm install @autorender/sdk-react-native react-native-webview

import { AutorenderUploaderNative } from '@autorender/sdk-react-native';

export function UploadScreen() {
  return (
    <AutorenderUploaderNative
      apiKey={process.env.EXPO_PUBLIC_AUTORENDER_KEY}
      type="inline"
      allowMultiple
      containerStyle={{ height: 520 }}
      onSuccess={(files) => console.log('Uploaded', files)}
    />
  );
}

Vanilla JS / HTML

Option 1: With Import Maps (Standalone HTML)

For standalone HTML files without a bundler, use import maps to resolve module specifiers:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Autorender Uploader</title>
  <!-- Option A: Link stylesheet directly (recommended for standalone HTML) -->
  <link rel="stylesheet" href="https://esm.sh/@autorender/sdk-core@latest/dist/styles.css" />
  <!-- Option B: Or use import map for styles -->
  <script type="importmap">
  {
    "imports": {
      "@autorender/sdk-core": "https://esm.sh/@autorender/sdk-core@latest"
    }
  }
  </script>
</head>
<body>
  <div id="uploader"></div>
  <script type="module">
    import { createUploader } from '@autorender/sdk-core';
    // If using Option B above, uncomment this:
    // import '@autorender/sdk-core/styles';

    createUploader({
      target: '#uploader',
      apiKey: 'your-api-key',
      type: 'inline',
      allowMultiple: true,
      theme: 'system',
      sources: ['local', 'camera'],
      onSuccess: (files) => console.log('Uploaded', files),
    });
  </script>
</body>
</html>

Note: For production, replace @latest with a specific version (e.g., @0.1.5) for stability.

Option 2: With a Bundler (Vite/Webpack/etc.)

npm install @autorender/sdk-core

<div id="uploader"></div>
<script type="module">
  import { createUploader } from '@autorender/sdk-core';
  import '@autorender/sdk-core/styles';

  createUploader({
    target: '#uploader',
    apiKey: 'your-api-key',
    type: 'inline',
    allowMultiple: true,
    onSuccess: (files) => console.log('Uploaded', files),
  });
</script>

📚 Documentation

• React Guide
• Vue Guide
• Angular Guide
• Svelte Guide
• React Native Guide
• Core API

🎨 Features

• 🔐 API-key authenticated uploads against Autorender's public API
• 📁 Drag & drop, multi-select, and large batch uploads
• 🚀 Chunked upload pipeline with live per-file progress
• 🎨 Light/dark/system theming with CSS variables
• 🧩 Framework adapters for React, Vue, Angular, Svelte, React Native
• 📦 Optimized bundles - only install what you need

⚙️ Configuration

API Key

Get your API key from the Autorender dashboard. Pass it via:

• Environment variable: VITE_AUTORENDER_KEY, REACT_APP_AUTORENDER_KEY, etc.
• Direct prop: apiKey="your-key-here"

Options

interface CreateUploaderOptions {
  apiKey: string;                    // Required: Your Autorender API key
  target: string | HTMLElement;      // Required (core only): DOM target
  assetDeliveryBaseUrl?: string;     // Override CDN base (default https://dev.autorender.io)
  type?: 'button' | 'inline';        // 'button' = modal, 'inline' = embed
  allowMultiple?: boolean;           // Enable multi-file selection
  theme?: 'light' | 'dark' | 'system'; // Theme preset
  sources?: string | string[];       // Upload sources: 'local', 'camera', 'gdrive', etc.
  fileLayout?: 'list' | 'grid';      // File list layout
  showGridFileName?: boolean;        // Show filenames in grid view
  folderPath?: string;               // Default folder path
  uploadSettings?: {                  // Upload settings
    pretransformations?: string;     // Image transformations (e.g., "w_100,h_200")
    tags?: string[];                  // Tags for uploaded files
    is_unique_suffix_name?: boolean; // Generate unique filename suffixes
  };
  onSuccess?: (files) => void;       // Upload success callback (sanitized files)
  onError?: (payload) => void;       // Upload error callback
  onProgress?: (payload) => void;    // Batch progress callback
  onFileProgress?: (payload) => void; // Per-file progress callback
}

onSuccess result

onSuccess receives a sanitized array of uploaded files:

[
  {
    "id": "cd8a7a89-eaad-46f7-8729-9dd6a10a6510",
    "previewUrl": "blob:https://app.local/abc123",
    "file_no": "7891252802",
    "name": "Screenshot.png",
    "url": "https://dev.autorender.io/vVgGFwGYaI/FgRjV36XpS/Screenshot.png",
    "input_file_size": 5637,
    "output_file_size": 5210,
    "path": "FgRjV36XpS/Screenshot.png",
    "width": 100,
    "height": 100,
    "format": "png"
  }
]

Use assetDeliveryBaseUrl if you need to point file URLs at a different domain (e.g., production CDN).

🎨 Theming

Import styles from your framework package:

import '@autorender/sdk-react/styles';      // React
import '@autorender/sdk-vue/styles';        // Vue
import '@autorender/sdk-angular/styles';    // Angular
import '@autorender/sdk-svelte/styles';     // Svelte
import '@autorender/sdk-core/styles';       // Vanilla JS

Override CSS variables for custom styling:

autorender-uploader {
  --ar-color-accent: #0ea5e9;
  --ar-radius: 16px;
  --ar-font-family: 'Inter', sans-serif;
}

See Theming Guide for all available variables.

📖 API Reference

UploaderInstance

interface UploaderInstance {
  openFileDialog(): void;                    // Open file picker
  startUpload(): Promise<void>;               // Start upload
  reset(): void;                              // Clear queue
  destroy(): void;                            // Remove widget
  updateOptions(options: Partial<Options>): void; // Update config
  getState(): {                               // Get current state
    items: UploadItem[];
    isUploading: boolean;
    progress: number;
  };
}

🧪 Development

Playground

Test the SDK locally:

cd playground/react  # or vue, angular, svelte
npm install
npm run dev

Build

Build all packages:

npm run build              # Build all packages
npm run build:core        # Build core only
npm run build:react      # Build React adapter

📦 Publishing

Publish packages to npm:

# Build all packages
npm run build

# Publish each package
cd packages/sdk-core && npm publish --access public
cd packages/sdk-react && npm publish --access public
cd packages/sdk-vue && npm publish --access public
cd packages/sdk-angular && npm publish --access public
cd packages/sdk-svelte && npm publish --access public
cd packages/sdk-react-native && npm publish --access public

Or use the publish script:

npm run publish:all

📄 License

MIT

🤝 Support

• Documentation: See package-specific READMEs in packages/
• Issues: Open an issue in the Autorender repository
• API: The SDK targets /api/public/assets/* on Autorender