Skip to content
Welcome to the new, unified Livepeer documentation! 👋
Getting Started

Getting Started


These docs are written for a React or React Native developer building on livepeer.js. For Node.js or alternative frameworks, you can use the vanilla JS library (docs coming soon).


Install livepeer.js using your favorite package manager.

npm i @livepeer/react

Quick Start

1. Create a livepeer client

First, create a livepeer Client instance using createReactClient, and pass a provider to it.

import { createReactClient, studioProvider } from '@livepeer/react';
const client = createReactClient({
  provider: studioProvider({ apiKey: 'yourStudioApiKey' }),

Note: If you choose to use Studio as a provider, you will need to configure an API key for the studioProvider which is CORS-protected API key.

Read more about client configuration

2. Wrap app with LivepeerConfig

Next, wrap the app with the LivepeerConfig component, passing the client to it.

This is added to _app.js for Next.js or App.js with Create React App, so that the LivepeerConfig React Context is available across every component.

import {
} from '@livepeer/react';
const client = createReactClient({
  provider: studioProvider({ apiKey: 'yourStudioApiKey' }),
function App() {
  return (
    <LivepeerConfig client={client}>
      <SomeComponent />

3. Enjoy!

Use hooks! Every component inside the LivepeerConfig is now set up to use the livepeer hooks.

import { useAsset } from '@livepeer/react';
function SomeComponent() {
  const asset = useAsset({ assetId: 'd8e8b87d-6774-4083-a2d7-4e85872d18cd' });
  return <div>Asset: {}</div>;

Want to learn more? Continue reading the documentation for more details.