For developers

Drop in an editor.

Image and video. One package. Every export runs in the tab.

Open the demo Read the docs

localhost:3000

The layermetry image editor running in a page: the tool rail on the left, a product photo on the canvas, the pages strip below

Open the image editor →

One bundle

Mount it in six lines.

$npm i @layermetry/media-editor

Editor.tsx

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

export default function Studio() {
  return (
    <ImageEditor licenseKey={KEY} theme={brand} onExport={save} />
  );
}

1 package45 MB installed1.1 MB gzippedNo ffmpeg

localhost:3000

What those six lines render.

No interface at all

The same bundle, headless.

batch.tsx

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

// headless: no interface at all. The same bundle, driven by a list of calls.
<ImageEditor
  licenseKey={KEY}
  headless
  defaultTemplate={productCard}
  calls={rows.map(r => ({ fn: setText, args: { id: 'title', value: r.title } }))}
  callback={file => upload(file)}
/>;

one templateone row per pieceruns in the tab

localhost:3000

A product photograph of an amber bottle on a dark surface

One template and a spreadsheet, exported in the tab.

Theme Studio

It looks like your product.

theme.ts

export const brand = {
  colors: { accent: '#C98F4A', surface: '#101418' },
  radius: 10,
  fontFamily: 'Inter, system-ui',
  logo: { src: '/brand.svg', href: 'https://acme.example' },
};

every colourevery radiusyour font

your-product.example.com

The layermetry image editor running in a page, dark theme

Every colour, radius and font can be replaced.

31 MB → 0

ffmpeg removed, today

4.4× faster

than our previous exporter

Fails open

the editor keeps working when we are unreachable

Your storage

templates, brand kits and stock keys stay yours

Start building today.

Free while you build. One key when you ship.

Start free Read the docs Pricing