Branding Colors

Provide a curated set of brand colors in the editor's color picker so users stay on-brand without memorizing hex codes.

React

import { useRef } from 'react';
import { PexelizeEditor, PexelizeEditorRef } from '@pexelize/react-editor';

function BrandedColorEditor() {
  const editorRef = useRef<PexelizeEditorRef>(null);

  return (
    <PexelizeEditor
      ref={editorRef}
      editorKey="pk_your_key"
      editorMode="email"
      options={{
        brandingColors: {
          colors: [
            { label: 'Primary', value: '#6366f1' },
            { label: 'Secondary', value: '#ec4899' },
            { label: 'Dark', value: '#1e1b4b' },
            { label: 'Light', value: '#f5f3ff' },
            { label: 'Success', value: '#10b981' },
            { label: 'Warning', value: '#f59e0b' },
          ],
          recentColors: true,
        },
      }}
    />
  );
}

Vue

<template>
  <PexelizeEditor
    ref="editorRef"
    editor-key="pk_your_key"
    editor-mode="email"
    :branding-colors="brandingConfig"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { PexelizeEditor } from '@pexelize/vue-editor';

const editorRef = ref<InstanceType<typeof PexelizeEditor>>();

const brandingConfig = {
  colors: [
    { label: 'Primary', value: '#6366f1' },
    { label: 'Secondary', value: '#ec4899' },
    { label: 'Dark', value: '#1e1b4b' },
    { label: 'Light', value: '#f5f3ff' },
  ],
  recentColors: true,
};
</script>

Angular

import { Component, ViewChild } from '@angular/core';
import { PexelizeEditorComponent } from '@pexelize/angular-editor';

@Component({
  selector: 'app-branded-color-editor',
  standalone: true,
  imports: [PexelizeEditorComponent],
  template: `
    <pexelize-editor
      #editor
      editorKey="pk_your_key"
      editorMode="email"
      [brandingColors]="brandingConfig"
    ></pexelize-editor>
  `,
})
export class BrandedColorEditorComponent {
  @ViewChild('editor') editorComp!: PexelizeEditorComponent;

  brandingConfig = {
    colors: [
      { label: 'Primary', value: '#6366f1' },
      { label: 'Secondary', value: '#ec4899' },
      { label: 'Dark', value: '#1e1b4b' },
    ],
    recentColors: true,
  };
}

Vanilla JS

pexelize.init({
  containerId: 'editor-container',
  editorKey: 'pk_your_key',
  editorMode: 'email',
  options: {
    brandingColors: {
      colors: [
        { label: 'Primary', value: '#6366f1' },
        { label: 'Secondary', value: '#ec4899' },
        { label: 'Dark', value: '#1e1b4b' },
        { label: 'Light', value: '#f5f3ff' },
      ],
      recentColors: true,
    },
  },
});

Brand colors appear as a dedicated row of swatches at the top of every color picker in the editor.

Update colors at runtime

// React
editorRef.current?.editor?.setBrandingColors({
  colors: [
    { label: 'New Primary', value: '#2563eb' },
    { label: 'New Secondary', value: '#7c3aed' },
  ],
  recentColors: true,
});

// Vanilla JS
pexelize.setBrandingColors({
  colors: [
    { label: 'New Primary', value: '#2563eb' },
    { label: 'New Secondary', value: '#7c3aed' },
  ],
});

Recent colors

Set recentColors: true to show a "Recently used" row below the brand colors. This tracks the last 8 colors the user selected during the session.

Color format

Colors must be 6-digit hex values (e.g., #6366f1). The label is shown as a tooltip when hovering over the swatch.

Method reference

Method	Returns	Description
setBrandingColors(config)	void	Replace brand color palette at runtime

Next steps

• Custom Fonts — complete brand kit with typography
• Customize Appearance — theme the editor's own UI colors
• Header & Footer — lock branded header/footer sections