@mypixia/simplex-designer
v4.2.7
Published
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 b
Downloads
1,972
Maintainers
mypixiaReadme
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 --saveReact
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 capabilitiesSTICKERS- Sticker librarySHAPES- `Basic shapes (circle, rectangle, etc.)ICONS- Icon libraryIMAGE- Image upload and manipulationQRCODE- QR code generationBARCODE- 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.
Browser Support
Mypixia supports all modern browsers:
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
License
This project has a mix licensed - see the LICENSE file for details.
Support
For additional help and support, please visit our documentation site or contact our support team.