---
title: "VPE 2.0 React overview"
slug: "vpe-v2-react-sdk"
updated: 2026-09-17T09:22:36Z
published: 2026-09-17T09:22:36Z
canonical: "guide.ncloud-docs.com/vpe-v2-react-sdk"
stale: true
---

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

# VPE 2.0 React overview

Available in Classic and VPC

Video Player Enhancement V2 (or VPE 2.0) is the next-generation web video player SDK provided by NAVER Cloud. The SDK supports a JSON-based layout system along with custom component insertion capabilities, and it delivers extensive compatibility with diverse streaming protocols.

## Key features

The key features that VPE 2.0 React provides include the following:

1. JSON layout system: You can declaratively define the control bar, button placement, and layout components using JSON objects.
2. Custom components: You can insert React components or HTML elements directly into the player.
3. HLS and DASH streaming: You can integrate `hls.js` and `dash.js` through external injection to optimize bundle size.
4. Layouts by device: You can create independent layouts for desktop, mobile, and Full screen environments.
5. Override default behavior: You can intercept default actions such as play, pause, and seek to implement custom logic.
6. DRM support: Supports Widevine, FairPlay, and PlayReady to protect content securely.

## SDK package contents

VPE 2.0 React provides the following SDK packages:

| Package | Description |
| --- | --- |
| @sgrsoft/vpe-react-sdk | Player component for React and Next.js |

## Supported environments

VPE 2.0 React supports the following environments:

| Environment | Supported version |
| --- | --- |
| React | 18 or later |
| Next.js | 13 or later (App Router) |
| UMD (CDN) | Modern browsers (Chrome, Firefox, Safari, and Edge) |
| Mobile | iOS Safari 15+, Android Chrome |

## Quick start

Install the package via npm to begin integration right away.

```
npm i @sgrsoft/vpe-react-sdk hls.js dashjs
```

```
"use client";

import Hls from "hls.js";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";

export default function Player() {
    return (
        <VpePlayer
            hls={Hls}
            accessKey="YOUR_ACCESS_KEY"
            options={{
                playlist: [{
                    file: "<https://example.com/video/master.m3u8>",
                }],
                autostart: true,
                muted: true,
            }}
        />
    );
}
```