Video Editor UI

Installation

The Video Editor UI is published as a web component, which means you can drop it into any page regardless of framework.

Credentials

Before you install, gather these keys:

Rendley license: required. Get one free at app.rendleysdk.com.
Pexels API key: optional, powers the images and videos in the Stock tab. Get a key.
Giphy API key: optional, powers the GIFs and stickers in the Stock tab. Get a key.

Pexels and Giphy share one Stock tab, and both keys are needed to enable it. With one or neither, the tab still shows but reads “Missing stock media API keys”. To drop it entirely, hide the stock module in the JSON config.

Setup

<script type="module">
  import { defineCustomElements } from "https://cdn.rendleysdk.com/sdk/video-editor/1.0.0/loader/index.js";
  defineCustomElements();
</script>

<rendley-video-editor
  id="rendley"
  licensename="YOUR_LICENSE_NAME"
  licensekey="YOUR_LICENSE_KEY"
  pexelsapikey="YOUR_PEXELS_API_KEY"
  giphyapikey="YOUR_GIPHY_API_KEY"
  theme="dark"
></rendley-video-editor>

Pin the version in the URL so your editor doesn’t silently update to a breaking release.

npm install @rendley/video-editor-ui

Then register the custom element once per page:

import { defineCustomElements } from "@rendley/video-editor-ui/loader";

defineCustomElements();

Use the tag in your template the same way as with the CDN setup:

<rendley-video-editor
  id="rendley"
  licensename="YOUR_LICENSE_NAME"
  licensekey="YOUR_LICENSE_KEY"
  theme="dark"
></rendley-video-editor>

Sizing

The editor fills 100% of its parent container. Give the parent an explicit height, a common choice is 100vh:

<div style="height: 100vh; width: 100%">
  <rendley-video-editor
    licensename="..."
    licensekey="..."
  ></rendley-video-editor>
</div>

Framework integrations

Because the editor is a standards-compliant custom element, it works natively in every framework that supports custom elements. A few host-specific notes:

React

React treats unknown JSX tags as HTML and forwards kebab-case props as attributes, so the tag works in-place:

import { useEffect } from "react";
import { defineCustomElements } from "@rendley/video-editor-ui/loader";

export function Editor() {
  useEffect(() => {
    defineCustomElements();
  }, []);

  return (
    <rendley-video-editor
      licensename="YOUR_LICENSE_NAME"
      licensekey="YOUR_LICENSE_KEY"
      theme="dark"
    />
  );
}

If you use TypeScript and want typed props, StencilJS can generate a React-specific package (@rendley/video-editor-ui/react-output-target). See Stencil’s framework integration docs for the wrapper setup.

Vue

Vue 3 supports custom elements out of the box. Tell Vue to leave the tag alone in your app config:

// main.ts
import { createApp } from "vue";
import { defineCustomElements } from "@rendley/video-editor-ui/loader";
import App from "./App.vue";

defineCustomElements();

const app = createApp(App);
app.config.compilerOptions.isCustomElement = (tag) =>
  tag.startsWith("rendley-");
app.mount("#app");

Then use the tag:

<template>
  <rendley-video-editor
    licensename="YOUR_LICENSE_NAME"
    licensekey="YOUR_LICENSE_KEY"
    theme="dark"
  />
</template>

Angular

Add CUSTOM_ELEMENTS_SCHEMA to your module and call defineCustomElements once during app init:

// app.module.ts
import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import { defineCustomElements } from "@rendley/video-editor-ui/loader";

defineCustomElements();

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  // ...
})
export class AppModule {}

Verifying the setup

Once the page loads, the editor shows a loading screen while the SDK initializes. When it’s done, you’ll see the composition canvas, timeline, and sidebar. If nothing appears:

Check the browser console for license errors.
Make sure the parent element has a non-zero height.
Confirm the CDN URL is reachable (for CDN installs) or that defineCustomElements() ran (for npm installs).