Customize Appearance

Control the editor's visual theme, accent color, panel layout, and loader. Configuration can be set at init time or changed at runtime.

React

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

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

  return (
    <PexelizeEditor
      ref={editorRef}
      editorKey="pk_your_key"
      editorMode="email"
      options={{
        appearance: {
          theme: 'dark',
          accentColor: 'indigo',
        },
      }}
    />
  );
}

Vue

<template>
  <PexelizeEditor
    ref="editorRef"
    editor-key="pk_your_key"
    editor-mode="email"
    :appearance="{
      theme: 'dark',
      accentColor: 'indigo',
    }"
  />
</template>

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

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

Angular

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

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

  appearance: AppearanceConfig = {
    theme: 'dark',
    accentColor: 'indigo',
  };
}

Vanilla JS

pexelize.init({
  containerId: 'editor-container',
  editorKey: 'pk_your_key',
  editorMode: 'email',
  options: {
    appearance: {
      theme: 'dark',
      accentColor: 'indigo',
    },
  },
});

You should see the editor render with a dark background and indigo-tinted controls.

Themes

Four built-in themes are available:

Theme	Description
'light'	Generic light theme with customizable accent color
'dark'	Generic dark theme with customizable accent color
'pexelize-light'	Pexelize branded light theme (fixed indigo accent)
'pexelize-dark'	Pexelize branded dark theme (fixed gray/white accent)

The light and dark themes respect the accentColor setting. The pexelize-light and pexelize-dark themes use fixed brand colors and ignore accentColor.

Accent colors

25 accent colors are available, based on Radix UI color scales:

gray	gold	bronze	brown	yellow
amber	orange	tomato	red	ruby
crimson	pink	plum	purple	violet
iris	indigo	blue	cyan	teal
jade	green	grass	mint	sky

Set accent color at init or at runtime:

// At init (via options)
options: {
  appearance: {
    accentColor: 'violet',
  },
}

// At runtime
editor.setAppearance({ accentColor: 'violet' });

Change theme at runtime

Call setAppearance() to switch themes without reloading the editor:

React

const toggleTheme = () => {
  editorRef.current?.editor?.setAppearance({
    theme: 'dark',
    accentColor: 'cyan',
  });
};

Vue

function toggleTheme() {
  editorRef.value?.setAppearance({
    theme: 'dark',
    accentColor: 'cyan',
  });
}

Angular

toggleTheme() {
  this.sdk?.setAppearance({
    theme: 'dark',
    accentColor: 'cyan',
  });
}

Vanilla JS

pexelize.setAppearance({
  theme: 'dark',
  accentColor: 'cyan',
});

You should see the editor immediately switch to the new theme and accent color.

Panel layout

Control the side panel position, width, and collapsibility:

options: {
  appearance: {
    sidePanel: {
      dock: 'right',           // 'left' | 'right' (default: 'right')
      width: 380,              // Panel width in pixels (default: 380)
      collapsible: true,       // Allow user to collapse (default: false)
      accordionsCollapsed: false, // Start accordion sections expanded (default: false)
      tabs: {
        content: { visible: true },   // Content tools tab
        modules: { visible: true },   // Modules/rows tab
        styles: { visible: true },    // Styles tab
      },
    },
  },
}

Feature visibility

Show or hide the preview and undo/redo buttons:

options: {
  appearance: {
    features: {
      preview: true,     // Show preview button (default: true)
      undoRedo: true,    // Show undo/redo buttons (default: true)
    },
  },
}

Action bar placement

Move the floating action bar that appears when a row or content is selected:

options: {
  appearance: {
    actionBar: {
      placement: 'top_right', // 'top' | 'bottom' | 'top_left' | 'top_right' | 'bottom_left' | 'bottom_right'
      compact: false,          // Smaller buttons (default: false)
    },
  },
}

Custom loader

Replace the default loading spinner with your own:

options: {
  appearance: {
    loader: {
      // Option 1: Image URL (GIF, PNG, SVG, etc.)
      url: 'https://example.com/loading.gif',

      // Option 2: Inline SVG
      svg: '<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="20" fill="none" stroke="#6366f1" stroke-width="4"><animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="1s" repeatCount="indefinite"/></circle></svg>',

      // Option 3: Custom HTML + CSS
      html: '<div class="my-loader">Loading...</div>',
      css: '.my-loader { font-size: 18px; color: #6366f1; }',
    },
  },
}

Priority: svg > url > html + css > default spinner.

Full appearance config

options: {
  appearance: {
    theme: 'light',
    accentColor: 'indigo',
    features: {
      preview: true,
      undoRedo: true,
    },
    actionBar: {
      placement: 'top',
      compact: false,
    },
    sidePanel: {
      dock: 'right',
      width: 380,
      collapsible: false,
      accordionsCollapsed: false,
      tabs: {
        content: { visible: true },
        modules: { visible: true },
        styles: { visible: true },
      },
    },
    loader: {
      url: 'https://example.com/loading.gif',
    },
  },
}

Method reference

Method	Returns	Description
setAppearance(config)	void	Update appearance at runtime (theme, accent, panels, etc.)

Next steps

• Configure Tools — enable, disable, and reorder content tools
• Branding Colors — set brand color palettes for color pickers