npm package: @rendley/video-editor-ui
Description: A Video Editor UI for Rendley SDK
Latest version: 1.8.19

# Video Editor UI

The Video Editor UI is a user interface built on top of the Rendley SDK that enables you to create and edit videos directly in your browser.

![Video Editor Cover](https://docs.rendley.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fvideo-editor-cover.a87618bd.webp&w=3840&q=75 "Video Editor Cover")

## Overview

This project is developed using the following technologies:

- [**StencilJS**](https://stenciljs.com/): For building the user interface as web components.
- [**SASS**](https://sass-lang.com/): For efficient and organized styling.
- [**MobX**](https://mobx.js.org/README.html): For state management, ensuring smooth and reactive UI updates.

## Getting Started

Follow these steps to set up and run the project.

### Installation

1. **Clone the Repository:**

```bash
git clone https://github.com/rendleyhq/video-editor-ui.git
cd video-editor-ui
```

2. **Install Dependencies:**

Use npm to install the necessary packages:

```bash
npm install
```

3. **Initial Build:**

Before running the project for the first time, build it by executing:

```bash
npm run build
```

4. **Credentials:**

To function correctly, the video editor requires a set of API keys, which should be provided in the `index.html` file. Below are the steps to obtain these keys:

- Giphy API Key: To enable GIF search functionality, you'll need a Giphy API key. You can request one by following the instructions here: [Request a Giphy API Key](https://support.giphy.com/hc/en-us/articles/360020283431-Request-A-GIPHY-API-Key).

- Pexels API Key: For accessing the Pexels image library, you'll need a Pexels API key. Obtain it by visiting: [How to Get a Pexels API Key](https://help.pexels.com/hc/en-us/articles/900004904026-How-do-I-get-an-API-key).

- Rendley License Key: For rendering to work, you need a Rendley license key. You can get one at [app.rendley.com](https://app.rendley.com).

Ensure that these API keys are correctly set in your project to enable all features of the video editor.

### Running the Project

To start the development server and view the project in action, use the following command:

```bash
npm run start
```

### Building the Project

The project is designed as a web component, making it easy to embed in any web application. To create a production-ready build, run:

```bash
npm run build
```

The build output is located in the `dist` folder. There are several ways to integrate this into your project:

#### 1. Embed the Web Component

Host the contents of the `dist` folder in your `public` directory or on a CDN. Once hosted, you can import the video editor component by referencing the appropriate path, as outlined in the [Rendley documentation](https://docs.rendley.com/video-editor-ui/overview.html).

#### 2. Export as an NPM Package

Stencil provides the capability to package the project for different frameworks such as React.js, Vue.js, or Angular. These packages include TypeScript types, offering a familiar development experience. To learn more about setting this up, refer to the [StencilJS Documentation](https://stenciljs.com/docs/overview).

## FAQ

### Why is `@rollup/plugin-image` being used?

We use `@rollup/plugin-image` to bundle image assets directly into your JavaScript as base64-encoded strings. This approach helps avoid encapsulation issues by keeping everything self-contained, making the assets easily accessible within the web components without worrying about external file paths or loading times.