@magicpattern/js-sdk

The official library for integrating MagicPattern into your webapp.

Interested? Just hit us up at [e-mail]

Website · Twitter

_{Made by Jim Raptis ✨}

Installation

With NPM

npm i @magicpattern/js-sdk

With yarn

yarn add @magicpattern/js-sdk

Usage

Be aware that we restrict the integration of MagicPattern by platforms at the moment. Are you interested? Hit me up at [e-mail]

import { openMagicPattern } from '@magicpattern/js-sdk';

async function() {
  try {
    const blob = await openMagicPattern(
      {
        provider: "YOUR PRODUCT'S NAME", // The name of your own product
        toolId: "TOOL_ID_TO_OPEN", // Optional: input image to editor
        canChangeTool: false, // Optional: can the user choose a different tool
        width: 1200, // Optional
        height: 900, // Optional
        src: "IMAGE_URL_TO_EDIT", // Optional: Used only on specific tools like the Fractral Glass generator
      }
    );

    // do something with the blob, e.g. create an object url to show it in an img tag:
    // URL.createObjectURL(blob);
  } catch (error) {
    // error handling
  }
}

All the available toolId values are:

const toolIds = [
  "confetti-generator",
  "grid-patterns",
  "polka-patterns",
  "noise-generator",
  "blob-compositions",
  "geometric-patterns",
  "seamless-patterns",
  "blurry-gradients",
  "wave-generator",
  "css-patterns",
  "chart-generator",
  "mesh-gradients",
  "blob-generator",
  "doodle-backgrounds",
  "iphone-13-gradients",
  "fractal-glass",
];

Demo

Demo for React.js