License keys

The image editor does not start without a license key. A key is valid for one domain and its subdomains, and for your own computer.

Obtaining a keyCopy Anchor Link

You create and manage your keys at app.layermetry.com/licenses. The editor links to the same address when it refuses a key.

A production key names the domain it is for, for example app.example.com. It also works on every subdomain of that domain, and on your own computer. A development key works only on your own computer.

The key is not a secret. It is part of your web page, so anyone can read it. This is safe, because the key works only on its own domain.

ConfigurationCopy Anchor Link

Pass the key as licenseKey.

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

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

The custom element also reads the key from the license-key attribute: <media-editor-image license-key="YOUR_LICENSE_KEY">. Use the props property when you also pass functions, because an attribute carries only text.

Use one key for all editors on a page. When a page sets a second, different key, the console shows a warning.

These props control the license check:

Local developmentCopy Anchor Link

Every valid key, production or development, works 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 .localhost or .local.

The port does not matter. http://localhost:5173 and http://localhost:3000 both work.

A development key works only there. On any other domain, the editor refuses it. Use a production key for staging and production servers.

Expiry and renewalCopy Anchor Link

Every key has an expiry date. From 30 days before that date, the editor writes a warning in the browser console each time it starts:

[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.

To read the date in your own code, pass onLicenseState. In the last 30 days, the running state carries expiringAt, in milliseconds since 1 January 1970:

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

function handleLicenseState(report: LicenseStateReport) {
  const { state } = report;
  if (state.status === 'blocked') {
    // Send this to your own logging. It never contains the key.
    console.error(`License blocked (${state.reason}): ${report.reference}`);
  }
  if (state.status === 'running' && state.expiringAt) {
    console.warn(`The license key expires on ${new Date(state.expiringAt).toDateString()}`);
  }
}

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

When the key has expired, the editor does not start. It shows "License Validation Failed" and the sentence "This licence key expired on" with the date.

The expiry date is part of the signed key, so a key cannot be extended. To renew, create a new key at app.layermetry.com/licenses. Then replace the old key in your configuration.