Launch checklist

Check each item before the video editor reaches your users.

Checklist

Use a production key

A development key works only on your own computer. A production key works on the domain it was made for and on every subdomain. See License keys.

Serve the page over HTTPS

Away from localhost, a page on plain http loses the browser features the editor needs to export video and to use the camera. The license check works the same on both.

Let the browser reach the license server

The editor sends POST to https://api.layermetry.com/social/license/validate, or to {apiUrl}/license/validate when you set apiUrl. Allow it in your firewall and in your Content Security Policy. See License validation.

Watch the license state

Log each report from onLicenseState. Its reference line identifies your license for support, and state.expiringAt warns you 30 days before the key ends.

Store media files

Pass onUploadAsset. Without it, a design that contains a video or a sound file cannot be saved. See Asset storage.

Keep AI keys on your server

Use endpointUrl or requestFn, so the keys of your AI vendors never reach the browser. See AI providers.

Keep the Google Fonts key off the page

Use googleFonts instead of googleFontsApiKey. A key in googleFontsApiKey is sent from the browser, where anyone can copy it. See Fonts.

Tell users which browsers export sound

Firefox, and Chrome and Edge on Linux and on Chromebooks, cannot save sound in an MP4 video. There the editor exports a video with sound as a WebM file. Instagram does not accept WebM. Safari before 26 cannot save sound in either file. See Browser requirements.

Handle every exit

onClose must remove or hide the editor. onExport must store the file, and onSaveTemplate must store the design. See Events.

Set a Content Security Policy

Use the policy below, and test it with your own page.

Content Security Policy

This policy runs the video editor, export included. It allows the license server, pictures and videos from stock media sites, and Google Fonts. The editor downloads no code from other sites:

default-src 'self';
script-src 'self' blob:;
style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
font-src 'self' data: https://fonts.gstatic.com;
img-src 'self' data: blob: https:;
media-src 'self' data: blob: https:;
connect-src 'self' data: blob: https://api.layermetry.com;
worker-src 'self' blob:

Each part has a reason:

Directive	Why
`script-src blob:`	The editor's sound processing runs from files it creates in the browser.
`worker-src blob:`	Export runs in background workers that the editor creates in the browser. Without them, export still works, but the editor does the work on the page itself.
`img-src`, `media-src` with `blob:`	Files the user adds are shown from the browser's memory.
`img-src`, `media-src` with `https:`	Stock media and AI results come from other sites. List those sites instead, if you know them.
`style-src`, `font-src` with Google Fonts	Text designs and the font picker load fonts from Google Fonts.
`connect-src https://api.layermetry.com`	The license check. Add your own `apiUrl`, `statusUrl`, `mediaApiUrl`, AI proxy, and upload server.

With no font source or mediaApiUrl, the font picker uses its built-in families and makes no font-list request. If you omit googleFonts and googleFontsApiKey, it reads the font list from mediaApiUrl only when you set that address and provide a license key.

With googleFonts={{ hosted: true }}, the font list comes from https://api.layermetry.com, or from mediaApiUrl when you set it. With googleFonts={{ endpointUrl }}, add your endpoint to connect-src. With the deprecated googleFontsApiKey, add https://www.googleapis.com to connect-src. Loading a selected font file still needs the Google Fonts permissions listed above.

ChecklistCopy Anchor Link