Pixeasy Customizer SDK

Framework-agnostic SDK to embed the Pixeasy customizer in Angular, React, Vue, or any ESM app.

Install

npm install @pixeasy/customizer

Quick start

import { createPixeasyBuilder } from '@pixeasy/customizer';
import '@pixeasy/customizer/styles.css';

const builder = createPixeasyBuilder();

builder.open({
  container: 'pixeasyBuilder',
  apiKey: 'dk_xxx_yyy',
  productId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
});

container can be an element id (string) or an HTMLElement.

API

createPixeasyBuilder()

Returns an instance of PixeasyBuilder.

PixeasyBuilder.open(options)

type PixeasyOpenOptions = {
  container: string | HTMLElement;
  apiKey: string;
  productId: string;
  locale?: string;
  theme?: string;
  readonly?: boolean;
};

PixeasyBuilder events

• manifest-loaded
• sdk-ready
• design-change
• design:created
• error
• closed

Usage:

builder
  .on('sdk-ready', (event) => console.log(event.productId))
  .on('design:created', (event) => console.log(event.data.designs))
  .on('error', (event) => console.error(event.code, event.message));

Framework examples

React

import { useEffect } from 'react';
import { createPixeasyBuilder } from '@pixeasy/customizer';
import '@pixeasy/customizer/styles.css';

export function CustomizerHost() {
  useEffect(() => {
    const builder = createPixeasyBuilder();
    builder.open({
      container: 'pixeasyBuilder',
      apiKey: 'dk_xxx_yyy',
      productId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
    });
    return () => builder.close();
  }, []);

  return <div id="pixeasyBuilder" />;
}

Vue

import { onMounted, onBeforeUnmount } from 'vue';
import { createPixeasyBuilder } from '@pixeasy/customizer';
import '@pixeasy/customizer/styles.css';

const builder = createPixeasyBuilder();

onMounted(() => {
  builder.open({
    container: 'pixeasyBuilder',
    apiKey: 'dk_xxx_yyy',
    productId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
  });
});

onBeforeUnmount(() => builder.close());

Exports

• createPixeasyBuilder
• PixeasyBuilder
• definePixeasyCustomizerElement
• typed options/events (PixeasyOpenOptions, ManifestLoadedEventDetail, etc.)
• stylesheet export: @pixeasy/customizer/styles.css