High-performance video for your Remix.js application

Mux is the best way to quickly add video to your Remix.js application. Mux solves the hard problems with embedding, storing, streaming, and customizing video.

Start building Read the docs

export default function Page() {
  const { playbackId } = useLoaderData();
  return (
    <MuxPlayer
      playbackId={playbackId}
    />
  );
}

Bring state of the art video infrastructure to your Remix.js application

Adaptive Bitrate Streaming

Leverage the latest technology in video streaming, and deliver optimized video to your viewers based on their network environment for the best possible viewing experience

Easily integrate into your app

Mux will integrate into whatever app you're building. Integrate with your CMS, or use our APIs to build your own video workflow

Full control of your playback

Mux Player gives you a customizable, accessible player with features like thumbnails and Chromecast built right in. Need more? You can bring your own HLS-compatible player, too.

Data for your viewing experience

Mux Data measures video quality-of-experience metrics, the same way you measure front-end page performance

How to add video to Remix.js

Want to build your own video workflow? Here's an example of what you can do with the Mux API.

Let's start by creating an upload URL using the Mux Node SDK and the Direct Uploads API. Users will upload to that URL with Mux Uploader:

app/routes/upload.jsx


import { json } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import MuxUploader from "@mux/mux-uploader-react";
import mux from "~/lib/mux.server";

export const loader = async () => {
  const upload = await mux.video.uploads.create({
    new_asset_settings: {
      playback_policy: ["public"],
      encoding_tier: "baseline",
    },
    cors_origin: "*",
  });
  return json({ url: upload.url });
};

export default function UploadPage() {
  const { url } = useLoaderData();
  return <MuxUploader endpoint={url} />
}

Next, we'll listen for Mux webhooks. When we receive the notification that the video is ready, we'll add it to our database.

app/routes/mux.webhook.js


import { json } from "@remix-run/node";

export const action = async ({ request }) => {
  if (request.method !== "POST") {
    return new Response("Method not allowed", { status: 405 });
  }

  const { type, data } = await request.json();
  if (type === "video.asset.ready") {
    saveAssetToDatabase(data);
  } else {
    /* handle other event types */
  }

  return json({ message: "ok" })
};

Finally, let's make a playback page. We retrieve the video from our database, and play it by passing its playbackId to Mux Player:

app/routes/playback.$playbackId.jsx


import MuxPlayer from "@mux/mux-player-react";
import { useLoaderData, useParams } from "@remix-run/react";

export const loader = async ({ params, request }) => {
  const { title } = getAssetFromDatabase(params);
  const userId = getUser(request);
  return json({ title, userId });
};

export default function Page() {
  const { title, userId } = useLoaderData();
  const { playbackId } = useParams();
  return (
    <MuxPlayer
      playbackId={playbackId}
      metadata={{
        video_title: title,
        viewer_user_id: userId
      }}
    />
  );
}

And we've got upload and playback. Nice!

What's next? Check out our full walkthrough in the docs, or the example project below:

Example Project

remix-examples/mux-video

This is a bare-bones starter application with Remix.js that uses: 

View Project

They said it best

@MuxHQ was an absolute lifesaver for videos on a previous project. Thumbnails, truly instant play via livestreaming, resizing, whole bit. I’m often skeptical of third-party services but I never could’ve competed with the UX they let me deliver

Lachlan Campbell (@lachlanjc)
WWW designer-developer for climate @watershed

They said it best