@mypixia/simplex-designer NPM

Mypixia is a powerful, customizable JavaScript custom product designer that allows users to create, edit, and customize designs for T-shits, mugs, hats and much more in the browser. With support for text, stickers, shapes, icons, images, QR codes, and barcodes, Mypixia provides a comprehensive toolkit for building interactive design experiences in your web applications.

Features

🎨 Fully customizable themes. Provide colors that match your product reqyuirements
📱 Responsive design works on all devices
🧩 Modular architecture with configurable components
🖼️ Support for various design elements (text, stickers, shapes, icons, images)
📊 QR code and barcode generation
🔄 Extensive API for integration with your application
💾 Export designs in various formats (PNG, JPG, PDF, SVG and WEBP)
🔌 Custom action buttons for extended functionality

Demo

https://docs.mypixia.com/

Usage

npm install @mypixia/simplex-designer --save

React

import React from "react";
import Mypixia  from "@mypixia/simplex-designer";



function App() {
    const handleGetDesign = (design) => {
        //default to DOM
        const designObj = document.getElementById('my-canva')?.instance?.getDesignFormats();
        if (designObj) {
            designObj.getPNG().then(pngFiles=> {
                console.log('PNG Data:', pngFiles);
                // Handle File submission here
            });

            // designObj.getJPEG().then(jpegFiles => {
            //     console.log('JPEG Data:', jpegFiles);
            //     // Handle JPEG data here
            // });
            //
            // designObj.getWEBP().then(webpFiles => {
            //     console.log('Webp Data:', webpFiles);
            //     // Handle webp files here
            // });
            //
            // designObj.getSVG().then(svgFiles => {
            //     console.log('SVG Data:', svgFiles);
            //     // Handle svg files here
            // });
        } else {
            console.error('Canvas instance not found or getDesignFormats method not available');
        }

    }


    return (
        <div style={{marginLeft:'150px', marginRight:'150px'}}>

            <button onClick={() => handleGetDesign()}>
                Get design
            </button>
            <br/><br/>
            <hr/>
            <Mypixia
                canvasId="my-canva"
                theme={{
                    primaryColor: "#000000",
                    primaryColorLight: "#cf7e52",
                    secondaryColor: "#cf7e52",
                    tertiaryColor: "#FFFFFF"
                }}
                apiKey={'YOUR_API_KEY'}
                apiEndpoint={'GET_FROM_EMAIL+OR_ACCOUNT_SETTINGS'}
                isPlainColor = "Y"
                product={
                    {
                        name: "Premium Crew Neck T-Shirt",
                        category: "Tshirts",
                        description: "Men's crew neck t-shirts",
                        plainColor: "Y",
                        mainImage : "https://static.mypixia.com/prod/products/96ca4acb-c426-4619-a2c4-7acd95b78451.png",
                        colorSettings: ["#FF0000", "#0000FF", "#008000", "#000000", "#FFFFFF", "#808080", "#FFFF00"],
                        sections: [
                            {
                                sectionName: "Sleeve-left",
                                sectionImage: "https://static.mypixia.com/prod/products/27b8c138-af4e-4ea0-833d-88b10fbd3cf7.png"
                            },
                            {
                                sectionName: "Back",
                                sectionImage: "https://static.mypixia.com/prod/products/d4c53776-7b7d-41c5-a6b5-2bf5876cd26e.png"
                            }
                        ]
                    }
                }

                enabledModules = {['STICKERS', 'SHAPES', 'ICONS', 'TXT', 'IMAGE',  'QRCODE', 'BARCODE']}
                actionButtons={{
                    share: true, //share Design
                    download: false, // download button
                }}

                additionalActionButton={
                    {
                        btnLabel:  "Your Custom Action Button",
                        btnAction: () => {
                            console.log("handle you custom Button clicked");

                            //Example, grab the image that is being edited
                            const designObj = document.getElementById('my-canva')?.instance?.getDesignFormats();
                            if (designObj) {
                                designObj.getPNG().then(pngFiles => {
                                    console.log('PNG Data:', pngFiles);
                                });
                            }
                        },
                        btnColor: '#008000',//defaults to primary theme color
                    }

                }
            />

        </div>
    )
}

export default App

VUE.js

<template>
  <div :style="{ marginLeft: '150px', marginRight: '150px' }">
    <button @click="handleGetDesign">
      Get design
    </button>
    <br /><br />
    <hr />
    <Mypixia
        canvas-id="my-canva"
        :theme="theme"
        :api-key="apiKey"
        :api-endpoint="apiEndpoint"
        :is-plain-color="isPlainColor"
        :product="product"
        :enabled-modules="enabledModules"
        :action-buttons="actionButtons"
        :additional-action-button="additionalActionButton"
    />
  </div>
</template>

<script>
  import Mypixia from '@mypixia/simplex-designer';

  export default {
    name: 'App',
    components: {
      Mypixia
    },
    data() {
      return {
        apiKey: 'YOUR_API_KEY',
        apiEndpoint: 'GET_FROM_EMAIL+OR_ACCOUNT_SETTINGS',
        isPlainColor: 'Y',
        theme: {
          primaryColor: "#000000",
          primaryColorLight: "#cf7e52",
          secondaryColor: "#cf7e52",
          tertiaryColor: "#FFFFFF"
        },
        product: {
          name: "Premium Crew Neck T-Shirt",
          category: "Tshirts",
          description: "Men's crew neck t-shirts",
          plainColor: "Y",
          mainImage: "https://static.mypixia.com/prod/products/96ca4acb-c426-4619-a2c4-7acd95b78451.png",
          colorSettings: ["#FF0000", "#0000FF", "#008000", "#000000", "#FFFFFF", "#808080", "#FFFF00"],
          sections: [
            {
              sectionName: "Sleeve-left",
              sectionImage: "https://static.mypixia.com/prod/products/27b8c138-af4e-4ea0-833d-88b10fbd3cf7.png"
            },
            {
              sectionName: "Back",
              sectionImage: "https://static.mypixia.com/prod/products/d4c53776-7b7d-41c5-a6b5-2bf5876cd26e.png"
            }
          ]
        },
        enabledModules: ['STICKERS', 'SHAPES', 'ICONS', 'TXT', 'IMAGE', 'QRCODE', 'BARCODE'],
        actionButtons: {
          share: true, // Share Design
          download: false // Download button
        }
      };
    },
    computed: {
      additionalActionButton() {
        return {
          btnLabel: "Your Custom Action Button",
          btnAction: () => {
            console.log("handle you custom Button clicked");

            // Example, grab the image that is being edited
            const designObj = document.getElementById('my-canva')?.instance?.getDesignFormats();
            if (designObj) {
              designObj.getPNG().then(pngFiles => {
                console.log('PNG Data:', pngFiles);
              });
            }
          },
          btnColor: '#008000' // Defaults to primary theme color
        };
      }
    },
    methods: {
      handleGetDesign() {
        // Default to DOM
        const designObj = document.getElementById('my-canva')?.instance?.getDesignFormats();
        if (designObj) {
          designObj.getPNG().then(pngFiles => {
            console.log('PNG Data:', pngFiles);
            // Handle File submission here
          });

          // designObj.getJPEG().then(jpegFiles => {
          //   console.log('JPEG Data:', jpegFiles);
          //   // Handle JPEG data here
          // });
          //
          // designObj.getWEBP().then(webpFiles => {
          //   console.log('Webp Data:', webpFiles);
          //   // Handle webp files here
          // });
          //
          // designObj.getSVG().then(svgFiles => {
          //   console.log('SVG Data:', svgFiles);
          //   // Handle svg files here
          // });
        } else {
          console.error('Canvas instance not found or getDesignFormats method not available');
        }
      }
    }
  };
</script>

Angular

// app.component.ts
import { Component, AfterViewInit, ElementRef, ViewChild } from '@angular/core';
import * as Mypixia from '@mypixia/simplex-designer';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
    @ViewChild('mypixiaContainer') mypixiaContainer: ElementRef;

    // Define properties used for the Mypixia widget
    theme = {
        primaryColor: "#000000",
        primaryColorLight: "#cf7e52",
        secondaryColor: "#cf7e52",
        tertiaryColor: "#FFFFFF"
    };

    product = {
        name: "Premium Crew Neck T-Shirt",
        category: "Tshirts",
        description: "Men's crew neck t-shirts",
        plainColor: "Y",
        mainImage: "https://static.mypixia.com/prod/products/96ca4acb-c426-4619-a2c4-7acd95b78451.png",
        colorSettings: ["#FF0000", "#0000FF", "#008000", "#000000", "#FFFFFF", "#808080", "#FFFF00"],
        sections: [
            {
                sectionName: "Sleeve-left",
                sectionImage: "https://static.mypixia.com/prod/products/27b8c138-af4e-4ea0-833d-88b10fbd3cf7.png"
            },
            {
                sectionName: "Back",
                sectionImage: "https://static.mypixia.com/prod/products/d4c53776-7b7d-41c5-a6b5-2bf5876cd26e.png"
            }
        ]
    };

    enabledModules = ['STICKERS', 'SHAPES', 'ICONS', 'TXT', 'IMAGE', 'QRCODE', 'BARCODE'];

    actionButtons = {
        share: true, // Share Design
        download: false // Download button
    };

    additionalActionButton = {
        btnLabel: "Your Custom Action Button",
        btnAction: () => {
            console.log("handle you custom Button clicked");

            // Example, grab the image that is being edited
            const designObj = document.getElementById('my-canva')?.instance?.getDesignFormats();
            if (designObj) {
                designObj.getPNG().then(pngFiles => {
                    console.log('PNG Data:', pngFiles);
                });
            }
        },
        btnColor: '#008000' // Defaults to primary theme color
    };

    ngAfterViewInit() {
        this.initMypixia();
    }

    initMypixia() {
        if (this.mypixiaContainer && this.mypixiaContainer.nativeElement) {
            const mypixiaInstance = new Mypixia({
                container: this.mypixiaContainer.nativeElement,
                canvasId: "my-canva",
                theme: this.theme,
                apiKey: 'YOUR_API_KEY',
                apiEndpoint: 'GET_FROM_EMAIL+OR_ACCOUNT_SETTINGS',
                isPlainColor: "Y",
                product: this.product,
                enabledModules: this.enabledModules,
                actionButtons: this.actionButtons,
                additionalActionButton: this.additionalActionButton
            });
        }
    }

    handleGetDesign() {
        // Default to DOM
        const designObj = document.getElementById('my-canva')?.instance?.getDesignFormats();
        if (designObj) {
            designObj.getPNG().then(pngFiles => {
                console.log('PNG Data:', pngFiles);
                // Handle File submission here
            });

            // designObj.getJPEG().then(jpegFiles => {
            //   console.log('JPEG Data:', jpegFiles);
            //   // Handle JPEG data here
            // });
            //
            // designObj.getWEBP().then(webpFiles => {
            //   console.log('Webp Data:', webpFiles);
            //   // Handle webp files here
            // });
            //
            // designObj.getSVG().then(svgFiles => {
            //   console.log('SVG Data:', svgFiles);
            //   // Handle svg files here
            // });
        } else {
            console.error('Canvas instance not found or getDesignFormats method not available');
        }
    }
}

Plain JavaScript

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Designer</title>
    <script src="https://cdn.mypixia.com/index.umd.js"></script>
    <style>
        .container {
            margin-left: 150px;
            margin-right: 150px;
        }
        button {
            padding: 8px 16px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="container">
    <button id="getDesignBtn">Get design</button>
    <br><br>
    <hr>
    <div id="mypixia-container"></div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Initialize the Mypixia designer
        initMypixia();

        // Add event listener for the Get Design button
        document.getElementById('getDesignBtn').addEventListener('click', handleGetDesign);

        function initMypixia() {
            const container = document.getElementById('mypixia-container');

            if (typeof Mypixia !== 'undefined' && container) {
                Mypixia.render(container, {
                    canvasId: "my-canva",
                    theme: {
                        primaryColor: "#000000",
                        primaryColorLight: "#cf7e52",
                        secondaryColor: "#cf7e52",
                        tertiaryColor: "#FFFFFF"
                    },
                    apiKey: 'YOUR_API_KEY',
                    apiEndpoint: 'GET_FROM_EMAIL+OR_ACCOUNT_SETTINGS',
                    isPlainColor: "Y",
                    product: {
                        name: "Premium Crew Neck T-Shirt",
                        category: "Tshirts",
                        description: "Men's crew neck t-shirts",
                        plainColor: "Y",
                        mainImage: "https://static.mypixia.com/prod/products/96ca4acb-c426-4619-a2c4-7acd95b78451.png",
                        colorSettings: ["#FF0000", "#0000FF", "#008000", "#000000", "#FFFFFF", "#808080", "#FFFF00"],
                        sections: [
                            {
                                sectionName: "Sleeve-left",
                                sectionImage: "https://static.mypixia.com/prod/products/27b8c138-af4e-4ea0-833d-88b10fbd3cf7.png"
                            },
                            {
                                sectionName: "Back",
                                sectionImage: "https://static.mypixia.com/prod/products/d4c53776-7b7d-41c5-a6b5-2bf5876cd26e.png"
                            }
                        ]
                    },
                    enabledModules: ['STICKERS', 'SHAPES', 'ICONS', 'TXT', 'IMAGE', 'QRCODE', 'BARCODE'],
                    actionButtons: {
                        share: true, // Share Design
                        download: false // Download button
                    },
                    additionalActionButton: {
                        btnLabel: "Your Custom Action Button",
                        btnAction: () => {
                            console.log("handle you custom Button clicked");

                            // Example, grab the image that is being edited
                            const designObj = document.getElementById('my-canva')?.instance?.getDesignFormats();
                            if (designObj) {
                                designObj.getPNG().then(pngFiles => {
                                    console.log('PNG Data:', pngFiles);
                                });
                            }
                        },
                        btnColor: '#008000' // Defaults to primary theme color
                    }
                });
            } else {
                console.error('Mypixia not loaded yet or container not found');
            }
        }

        function handleGetDesign() {
            // Default to DOM
            const designObj = document.getElementById('my-canva')?.instance?.getDesignFormats();
            if (designObj) {
                designObj.getPNG().then(pngFiles => {
                    console.log('PNG Data:', pngFiles);
                    // Handle File submission here
                });

                // Uncomment below to use other export formats as needed
                // designObj.getJPEG().then(jpegFiles => {
                //     console.log('JPEG Data:', jpegFiles);
                //     // Handle JPEG data here
                // });
                //
                // designObj.getWEBP().then(webpFiles => {
                //     console.log('Webp Data:', webpFiles);
                //     // Handle webp files here
                // });
                //
                // designObj.getSVG().then(svgFiles => {
                //     console.log('SVG Data:', svgFiles);
                //     // Handle svg files here
                // });
            } else {
                console.error('Canvas instance not found or getDesignFormats method not available');
            }
        }
    });
  </script>
 </body>
</html>

Configuration Options

Option	Type	Description
`canvasId`	string	Unique identifier for the canvas element
`theme`	object	Custom theme configuration (colors, etc.)
`apiKey`	string	API key for accessing premium features
`apiEndpoint`	string	Custom API endpoint URL
`instance.getDesignFormats()`	function	Callback to get current design. You will get a list of files, one print ready and the other is a full design of applicable product
`enabledModules`	array	List of enabled feature modules
`actionButtons`	object	Configure built-in action buttons
`additionalActionButton`	object	Add a custom action button

Theme Configuration

{
  primaryColor: "#000000",      // Main theme color
  primaryColorLight: "#cf7e52", // Lighter version of primary color
  secondaryColor: "#cf7e52",    // Secondary color for accents
  tertiaryColor: "#FFFFFF"      // Tertiary color for contrast
}

Available Modules

TXT - Text editing capabilities
STICKERS - Sticker library
SHAPES - `Basic shapes (circle, rectangle, etc.)
ICONS - Icon library
IMAGE - Image upload and manipulation
QRCODE - QR code generation
BARCODE - Barcode generation

API Methods

The design object passed to callbacks provides several methods for working with the design:

const designObj = document.getElementById('my-canva')?.instance?.getDesignFormats();
if (designObj) {
    designObj.getPNG().then(pngFiles=> {
        console.log('PNG Data:', pngFiles);
        // Handle Files submission here
    });

Getting an API Key

To access premium features and additional design assets, you will need an API key. Visit our documentation site for more information on obtaining an API key and pricing plans.