Stickers and GIFs

Stickers are small ready-made pictures, still or animated. They come from the built-in set, from packs you provide, and from GIPHY. The Stickers panel shows every source you configure, in your order.

SetupCopy Anchor Link

Without the stickers prop, the panel shows the built-in stickers. With it, you choose the sources:

import { VideoEditor, builtInStickers, giphyStickers, staticStickers } from '@layermetry/media-editor/react';

// Your own sticker pack. Addresses can be on your site or on your CDN.
const brandPack = staticStickers({
  id: 'brand',
  label: 'Our brand',
  items: [
    { id: 'badge', title: 'Badge', url: '/stickers/badge.png', width: 256, height: 256 },
    { id: 'spin', title: 'Spinner', url: '/stickers/spin.gif', width: 160, height: 160 },
  ],
});

export default function App() {
  return (
    <div style={{ position: 'fixed', inset: 0 }}>
      <VideoEditor
        licenseKey="YOUR_LICENSE_KEY"
        onClose={() => console.log('The editor was closed')}
        stickers={{
          sources: [brandPack, builtInStickers(), giphyStickers({ endpointUrl: '/api/giphy' })],
        }}
      />
    </div>
  );
}

stickers={{ sources: [] }} removes the sticker tools.

Built-in stickersCopy Anchor Link

The built-in set, Essentials, has four stickers: Heart, Star, Sparkle, and Check mark. They are drawn as vector graphics and carried inside the package, so they need no network.

Click a sticker to add it to the canvas. A sticker stays on screen for a set time, like a picture.

View full size

Insert Emoji in the toolbar above the canvas adds one sticker when you choose an emoji. The picker shows Loading emoji… while its picture loads. If the picture cannot be loaded within the time limit, it shows Emoji not added.

The picker and inserted stickers use Twemoji 17.0.3. The picker credits "Emoji graphics: Twemoji by Twitter, Jason Sofonia, Justine De Caires and other contributors, CC-BY 4.0". The package’s THIRD-PARTY-NOTICES.md includes this content under Content loaded at run time.

GIPHYCopy Anchor Link

giphyStickers adds GIPHY's stickers, with search. The panel shows the trending stickers first. It shows the "Powered by GIPHY" mark that GIPHY's terms require.

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

export default function App() {
  return <VideoEditor
    licenseKey="YOUR_LICENSE_KEY" onClose={() => console.log('Editor closed')}
    stickers={{ sources: [builtInStickers(), giphyStickers({ endpointUrl: 'https://api.example.com/giphy' })] }}
  />;
}

GIPHY asks for stickers rated pg. A proxy adds your key and returns GIPHY's answer unchanged.

Animated GIFsCopy Anchor Link

The Animated tab shows only stickers that move. A GIPHY sticker appears there when it has a moving version that the editor can play and export.

A sticker of your own moves when its address ends in .gif or .webp, or when you give it an animatedUrl. The still url is then used for the Stickers tab.

A GIF from the user's computer, added under Media > Photo, also plays in the video. It appears as a GIF row in the timeline.

Custom sticker packsCopy Anchor Link

staticStickers turns a list of pictures into a source. The panel search matches the words in title and id:

For a pack that lives on your server, write your own source: an object with id, label, and a search(query, page, signal) function that returns { items, hasMore }. trending(page, signal) is optional, and fills the panel before the user searches.

Generated stickersCopy Anchor Link

Enable ai.sticker to generate transparent picture stickers.

import type { EditorAIConfig } from '@layermetry/media-editor';

export const ai: EditorAIConfig = {
  endpointUrl: '/api/ai',
  sticker: {
    style: { options: ['Flat', 'Line art', 'Clay'], defaultValue: 'Flat', allowCustom: false },
    promptTemplate: 'a sticker of {subject}, {style}, centred, on a transparent background, no text',
    count: { options: [1, 2, 4], defaultValue: 2 },
    size: '1024x1024', quality: 'low',
    outline: { width: 4, color: '#ffffff' },
    transparencyCheck: true, maxPerSession: 10,
  },
};

Sticker generation has its own models, transport and session limit. image: false does not disable it. sticker: false does not disable pictures.

DefaultsCopy Anchor Link

Omitted sticker settings retain these defaults.

Style accepts typed values of at most 60 characters by default. Set allowCustom: false for a closed list, or fixed: true for one style. style: false removes the choice and its prompt wording. Hidden choices use their defaults; fixed choices refuse another value. Both retain the resolved values in the summary.

Prompt templates accept at most 500 characters. promptTemplate: '{subject}' sends the user’s subject unchanged. The style remains in input.style. On the classic route, options.count and options.n carry the same count.

Model settingsCopy Anchor Link

A model field bound to count replaces the built-in Results control.

import { defineGenerationModel, type EditorAIConfig } from '@layermetry/media-editor';

const stickerModel = defineGenerationModel({
  label: 'Cut-out stickers', operation: 'sticker',
  fields: [
    { name: 'n', label: 'Results', type: 'number', integer: true, min: 1, max: 4, defaultValue: 2, bindTo: 'count' },
    { name: 'size', label: 'Size', options: ['1024x1024'], defaultValue: '1024x1024', fixed: true },
    { name: 'quality', label: 'Quality', options: ['low'], defaultValue: 'low', hidden: true, fixed: true },
    { name: 'background', label: 'Background', options: ['transparent'], defaultValue: 'transparent', hidden: true, fixed: true },
  ],
});
export const ai: EditorAIConfig = { endpointUrl: '/api/ai', sticker: { models: [stickerModel] } };

With custom models, ai.sticker.size and ai.sticker.quality are refused. Describe those provider settings in model fields instead. The model returns { items: [{ url: "https://cdn.example.com/sticker.png" }] }. With custom classic providers, put size and quality in buildRequest instead.

The built-in size choices are 1024x1024, 1536x1024, 1024x1536 and auto. Quality choices are low, medium, high and auto. Your server must implement those settings; the SDK does not call a provider directly. The built-in size and quality are not summary fields. Describe them as model fields when users need to see them before generation.

OutlineCopy Anchor Link

The editor draws the outline around transparent picture edges. Thickness is 0–25% of the shorter side and color is #rrggbb. Users can change it in Effects. Preview and exported files include it.

An outline cannot extend beyond the picture boundary. Animated GIFs are not outlined.

TransparencyCopy Anchor Link

The edge check detects a visible background after a result loads. Remove background uses your mediaApiUrl background-removal route. A failed removal or an unreadable replacement keeps the original sticker.

The check needs CORS permission to read pixels from another origin. It reports when it cannot check. Known JPEG addresses are refused because JPEG cannot preserve transparency. Other image formats can still contain an opaque background; the host owns the result’s transparency.

Generated listCopy Anchor Link

Results remain in the session’s Generated list. A chosen sticker is placed as a picture with normal move, resize and Undo behavior. The placed picture can also be animated.

ConfigurationCopy Anchor Link

EventsCopy Anchor Link

Stickers have no events of their own. They reach you inside the exported video through onExport. See Events.

TroubleshootingCopy Anchor Link

Additional resourcesCopy Anchor Link