Stickers and GIFs

Stickers are small ready-made pictures. The editor has a built-in set, and you can add GIPHY, your own collections, or your own sticker service. Each collection is a source in the stickers prop.

SetupCopy Anchor Link

The built-in stickers work with no setup. This example adds a collection of your own and GIPHY:

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

// Your own stickers. Each picture must allow cross-origin requests.
const brandStickers = staticStickers({
  id: 'brand',
  label: 'Our brand',
  items: [
    { id: 'badge', title: 'Brand badge', url: 'https://media.example.com/giphy/still1.png', width: 200, height: 200 },
    { id: 'spinner', title: 'Moving dot', url: 'https://media.example.com/giphy/moving1.gif', width: 200, height: 200 },
  ],
});

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

Built-in stickersCopy Anchor Link

Open the Stickers panel in the tool rail. Without the stickers prop, it shows the built-in collection Essentials: Heart, Star, Sparkle, and Check mark. They are drawings inside the package, so they load with no network request.

View full size

A click on a sticker adds it to the page. When there is more than one source, a row of source names appears under the tabs. The search field searches the source that is selected.

When you pass stickers, list builtInStickers() yourself if you want to keep the built-in collection. stickers={{ sources: [] }} removes the Stickers tool from the editor.

GIPHYCopy Anchor Link

giphyStickers() adds the GIPHY sticker library as a source. Before the user types, it shows the trending stickers. Results arrive 24 at a time, and Load more shows the next 24.

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

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

View full size

GIPHY content is rated pg.

Animated GIFsCopy Anchor Link

The Animated tab shows the stickers that move. A sticker moves on the page when it comes from this tab.

A sticker from the Stickers tab is still. The editor adds the first frame of the picture.

For a GIPHY sticker to appear on the Animated tab, its moving version must be 4 MB or smaller. Larger stickers appear on the Stickers tab only.

PNG, JPEG, and PDF files cannot move. An export holds one frame of each moving sticker.

Custom sticker packsCopy Anchor Link

staticStickers() turns a list of pictures into a source:

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

const brandStickers = staticStickers({
  id: 'brand',
  label: 'Our brand',
  items: [
    { id: 'badge', title: 'Brand badge', url: 'https://media.example.com/badge.png', width: 200, height: 200 },
    { id: 'spinner', title: 'Moving dot', url: 'https://media.example.com/dot.gif', width: 200, height: 200 },
  ],
});

The search field finds a sticker by its title or its id. A .gif or .webp picture appears on the Animated tab too.

Each sticker item has these fields:

Your own sticker serviceCopy Anchor Link

A source is an object with id, label, and a search function. trending is optional: without it, the source shows nothing until the user types.

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

const companyStickers: StickerSource = {
  id: 'company',
  label: 'Company',
  async search(query, { limit, offset }, signal) {
    const url = `/api/stickers?q=${encodeURIComponent(query)}&limit=${limit}&offset=${offset}`;
    const response = await fetch(url, { signal });
    const { items, total } = await response.json();
    return { items, hasMore: offset + items.length < total };
  },
};

search receives limit 24 and an offset that grows by 24 with each Load more. It returns { items, hasMore }. Each source keeps its own results. The editor never mixes the results of two sources.

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.

ConfigurationCopy Anchor Link

The three functions are exported from both @layermetry/media-editor and @layermetry/media-editor/react.

EventsCopy Anchor Link

Stickers have no events of their own. They are part of the design, and they reach you in the exported file through onExport. See Events.

TroubleshootingCopy Anchor Link

Additional resourcesCopy Anchor Link