Launch checklist

Check these items before your users see the image editor.

ChecklistCopy Anchor Link

LicenseCopy Anchor Link

• Use a production key for your domain. A development key works only on your own computer. See License keys.
• Read the key from your configuration, not from code in your repository.
• Allow requests from the browser to the license server, https://api.layermetry.com/social, or to your own apiUrl. The editor works for 30 days without it, and then stops. See Service outages.
• Log license problems with onLicenseState, so that you see a refused or expiring key before your users report it. See Validation flow.
• Note the expiry date of the key, and plan the renewal. See Expiry and renewal.

Keys of other servicesCopy Anchor Link

• Send AI requests through endpointUrl or requestFn, or use hosted: true with an enterprise licence from Layermetry (coming soon). Never put a key of an AI provider in the page. See AI providers.
• Use endpointUrl for Pexels, Unsplash, and GIPHY. An apiKey is visible to anyone who opens the page. See Stock media.
• Enforce your AI limits on your server. maxPerSession counts in the browser only. See Session limits.
• Check the user's session in every proxy and upload endpoint.

Files and storageCopy Anchor Link

• Handle onExport, and test Save & Exit with each format that your users need: PNG, JPEG, and PDF. See Export.
• If users save templates, pass onUploadAsset, so that pictures go to your storage and templates stay small. See Asset storage.
• Make pictures in your storage allow cross-origin requests from your domain.

InterfaceCopy Anchor Link

• Do not pass showThemeCreator={true} in production. The Customization Studio button is hidden by default, and it is a tool for developers. See Theming.
• Try the editor at the widths your users have. Below 960 pixels, it uses the compact layout. See Layout and sizing.
• Remove or hide the editor when onClose runs.

Content Security PolicyCopy Anchor Link

• If your page sends a Content Security Policy, allow what the editor needs. This policy was tested with the editor, a text template, an uploaded picture, and Save & Exit:

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

The editor adds its styles to the page when it starts, so style-src needs 'unsafe-inline'. Add the addresses of your own services: your AI proxy and your stock proxies to connect-src, and the hosts of your pictures to img-src and connect-src.