Integrate Mux Uploader into your web application

In this guide, you will learn about Mux Uploader and how to use it in your web application.

Install Mux Uploader

Mux Uploader has 2 packages:

@mux/mux-uploader: the web component, compatible with all frontend frameworks
@mux/mux-uploader-react: the React component, for usage in React

Both are built with TypeScript and can be installed either via npm, yarn or the hosted option on jsdelivr.

NPM

npm install @mux/mux-uploader@latest #or @mux/mux-uploader-react@latest

Yarn

yarn add @mux/mux-uploader@latest #or @mux/mux-uploader-react@latest

Hosted

<script src="https://cdn.jsdelivr.net/npm/@mux/mux-uploader"></script>
<!--
or src="https://cdn.jsdelivr.net/npm/@mux/mux-uploader-react"
-->

Providing attributes

The only required value to use Mux uploader is endpoint.

Examples

HTML element

<!-- Replace endpoint value with a valid Mux Video Direct Upload URL -->
<mux-uploader
  endpoint="https://httpbin.org/put"
></mux-uploader>

Open Sandbox

Using in HTML just requires adding the hosted <script> tag to your page and then adding the <mux-uploader> element where you need it.

React

import MuxUploader from "@mux/mux-uploader-react";

export default function App() {
  return (
    <MuxUploader endpoint="https://httpbin.org/put" />
  );
}

Open Sandbox

For our React implementation, you can use it just like you would any other React component.

Svelte

Because Svelte supports web components, it doesn't need a separate wrapper component like React. View the SveltKit example in the Mux Elements repo for a fully functioning example.

<script context="module" lang="ts">
  export const prerender = true;
</script>

<script lang="ts">
  // this prevents the custom elements from being redefined when the REPL is updated and reloads, which throws an error
  // this means that any changes to the custom element won't be picked up without saving and refreshing the REPL
  // const oldRegister = customElements.define;
  // customElements.define = function(name, constructor, options) {
  // 	if (!customElements.get(name)) {
  // 		oldRegister(name, constructor, options);
  // 	}
  // }
  // import { page } from '$app/stores';
  import { onMount } from "svelte";
  onMount(async () => {
    await import("@mux/mux-uploader");
  });
</script>

<mux-uploader endpoint="https://httpbin.org/put" />

Vue

Because Vue supports web components, it doesn't need a separate wrapper component like React. View the Vue example in the Mux Elements repo for a fully functioning example.

<script setup lang="ts">
  import "@mux/mux-uploader";
</script>

<template>
  <main>
    <mux-uploader endpoint="https://httpbin.org/put" />
  </main>
</template>

Customize the look and feel

Customize Mux Uploader to match your brand

Read the guide

On this page

Integrate Mux Uploader into your web application

Customize the look and feel