The Meme Fighter Meme Maker

Drop-in meme creation for web apps.

Getting Started

With Your Favorite Framework

• React Sandbox
• Svelte Sandbox

Basic Example

npm i @memefighter/maker-core

import { start } from "@memefigher/maker-core";

function handler(memeImgUrl: string) {
  // Do something with the meme created by the user
}

function makeAMeme() {
  // Create an iframe element and retrieve a reference
  const iframe = document.querySelector("iframe");

  // Customize the appearance
  const styleVariables = {
    "--background-color": "#121212",
  };

  // Start the meme creation flow and pass the result to our handler
  start({
    iframe,
    styleVariables,
  }).then(handler);
}

⚠️ We recommend using the following style rule on your iframe:

iframe {
  aspect-ratio: 1;
  max-width: 100%;
  width: auto;
  height: auto;
}

Interface

The meme maker provides a basic level of aesthetic customization, and returns a url string pointing to the meme created by the user, which you can use in your app as you please.

function start ({
  /** Reference to the iframe which will house the meme maker. */
  iframe: HTMLIFrameElement;
  /** Customize the appearance of the meme maker. */
  styleVariables?: {
    /** Background color for the meme maker iframe. */
    "--background-color"?: string;
    /** Text color for the meme maker iframe. */
    "--foreground-color"?: string;
    /** Button color for the meme maker iframe. */
    "--button-color"?: string;
  };
}): string;