License keys

The editor needs a license key to start. The key says which domain may run the editor and when the license ends.

Obtaining a keyCopy Anchor Link

Create a key in the Layermetry portal at app.layermetry.com/licenses.

There are two kinds of key:

A key is one long line of text with three parts separated by dots. The editor checks its signature in the browser, so the editor appears at once, without waiting for the network.

The key is visible to anyone who opens your page. That is expected: a production key works only on its own domain.

ConfigurationCopy Anchor Link

Pass the key as licenseKey. The custom element also reads it from the license-key attribute.

import { VideoEditor } from '@layermetry/media-editor/react';

export default function App() {
  return (
    <div style={{ position: 'fixed', inset: 0 }}>
      <VideoEditor
        licenseKey="YOUR_LICENSE_KEY"
        onClose={() => console.log('The editor was closed')}
      />
    </div>
  );
}

When the key is missing or not valid, the editor shows License Validation Failed and one sentence with the reason:

The same screen shows a reference line and a link to manage keys. Your users can quote the reference line to you, and you can quote it to Layermetry support. See License validation for every state of the license check.

The editor sends the key to the Layermetry license server, and to your media server (mediaApiUrl) in the x-license-key header. It never sends the key to your AI proxy or to your own request function.

Local developmentCopy Anchor Link

Both kinds of key work on your own computer. The editor treats these host names as your own computer:

• localhost, 127.0.0.1, ::1, and 0.0.0.0;
• any name that ends in .local or .localhost, such as my-app.localhost.

The port does not matter. localhost:5173 and localhost:3000 are both localhost.

A development key on any other host name shows "This licence key is not valid for" and the host name. Use a production key there.

Expiry and renewalCopy Anchor Link

Every key has an end date. In its last 30 days, the editor keeps working and prints one warning in the browser console:

[MediaEditor] This licence key expires in 6 days. The editor works normally until then, and stops working when it expires. Renew at https://app.layermetry.com/licenses.

After the end date, the editor does not start. It shows "This licence key expired on" and the date, for example 2026-10-04.

To warn your own users before that happens, pass onLicenseState. While the key is in its last 30 days, the state carries expiringAt, in milliseconds since 1970:

import { VideoEditor, type LicenseStateReport } from '@layermetry/media-editor/react';

function handleLicenseState(report: LicenseStateReport) {
  const { state } = report;
  if (state.status === 'running' && state.expiringAt !== undefined) {
    const date = new Date(state.expiringAt).toISOString().slice(0, 10);
    console.warn(`The license key expires on ${date}. Reference: ${report.reference}`);
  }
  if (state.status === 'blocked') {
    console.error(`The editor is blocked (${state.reason}): ${state.message}`);
  }
}

export default function App() {
  return (
    <div style={{ position: 'fixed', inset: 0 }}>
      <VideoEditor
        licenseKey="YOUR_LICENSE_KEY"
        onClose={() => console.log('The editor was closed')}
        onLicenseState={handleLicenseState}
      />
    </div>
  );
}

The browser console shows:

The license key expires on 2026-10-04. Reference: running · 2b8ca13e · lm-dev-2026-09 · sdk 1.0.0 · 2026-09-28T18:16Z

To renew, create a new key in the portal and replace the value of licenseKey.

The editor allows the device clock to be wrong by up to 5 minutes. A clock that is wrong by more can make a good key look expired, or not yet valid.