Configure Tools

Control which content tools appear in the editor, their order, and their default property values.

React

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

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

  return (
    <PexelizeEditor
      ref={editorRef}
      editorKey="pk_your_key"
      editorMode="email"
      options={{
        tools: {
          image: { enabled: true, position: 1 },
          heading: { enabled: true, position: 2 },
          text: { enabled: true, position: 3 },
          button: { enabled: true, position: 4 },
          divider: { enabled: true, position: 5 },
          // Disable tools you don't need
          video: { enabled: false },
          html: { enabled: false },
          timer: { enabled: false },
          form: { enabled: false },
        },
      }}
    />
  );
}

Vue

<template>
  <PexelizeEditor
    ref="editorRef"
    editor-key="pk_your_key"
    editor-mode="email"
    :tools="{
      image: { enabled: true, position: 1 },
      heading: { enabled: true, position: 2 },
      text: { enabled: true, position: 3 },
      button: { enabled: true, position: 4 },
      divider: { enabled: true, position: 5 },
      video: { enabled: false },
      html: { enabled: false },
      timer: { enabled: false },
      form: { enabled: false },
    }"
  />
</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 { ToolsConfig } from '@pexelize/editor-types';

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

  toolsConfig: ToolsConfig = {
    image: { enabled: true, position: 1 },
    heading: { enabled: true, position: 2 },
    text: { enabled: true, position: 3 },
    button: { enabled: true, position: 4 },
    divider: { enabled: true, position: 5 },
    video: { enabled: false },
    html: { enabled: false },
    timer: { enabled: false },
    form: { enabled: false },
  };
}

Vanilla JS

pexelize.init({
  containerId: 'editor-container',
  editorKey: 'pk_your_key',
  editorMode: 'email',
  options: {
    tools: {
      image: { enabled: true, position: 1 },
      heading: { enabled: true, position: 2 },
      text: { enabled: true, position: 3 },
      button: { enabled: true, position: 4 },
      divider: { enabled: true, position: 5 },
      video: { enabled: false },
      html: { enabled: false },
      timer: { enabled: false },
      form: { enabled: false },
    },
  },
});

You should see only the enabled tools in the side panel, ordered by their position value.

Built-in tools

All 14 built-in content tools:

Tool	Key	Description
Paragraph	paragraph	Body text block
Text	text	Rich text editor
Heading	heading	H1–H6 heading
Button	button	Call-to-action button
Image	image	Image with alt text and link
Divider	divider	Horizontal line separator
Menu	menu	Navigation menu links
HTML	html	Raw HTML code block
Social	social	Social media icon links
Video	video	Embedded video
Table	table	Data table
Timer	timer	Countdown timer
Form	form	Input form fields
Spacer	spacer	Vertical spacing block

Enable/disable tools

Set enabled: false to hide a tool from the side panel. Users cannot drag disabled tools onto the canvas:

tools: {
  html: { enabled: false },    // Hide the HTML tool
  form: { enabled: false },    // Hide the Form tool
  timer: { enabled: false },   // Hide the Timer tool
}

Tools not mentioned in the config remain enabled by default.

Reposition tools

Set the position property to control the display order. Lower numbers appear first:

tools: {
  button: { enabled: true, position: 1 },   // First
  image: { enabled: true, position: 2 },     // Second
  text: { enabled: true, position: 3 },      // Third
  heading: { enabled: true, position: 4 },   // Fourth
}

Override default property values

Set default values for tool properties. These apply when a user drags a new instance onto the canvas:

tools: {
  button: {
    enabled: true,
    properties: {
      text: { value: 'Get Started' },
      backgroundColor: { value: '#6366f1' },
      borderRadius: { value: '8px' },
    },
  },
  heading: {
    enabled: true,
    properties: {
      fontSize: { value: '28px' },
      fontWeight: { value: '700' },
    },
  },
  image: {
    enabled: true,
    properties: {
      altText: { editable: true },  // Ensure alt text is always editable
    },
  },
}

Lock a property

Set editable: false to prevent users from changing a property:

tools: {
  button: {
    properties: {
      // Users cannot change the border radius
      borderRadius: { value: '8px', editable: false },
    },
  },
}

Update tools at runtime

Call setToolsConfig() to change tool configuration without reinitializing the editor:

React

const disableHtml = () => {
  editorRef.current?.editor?.setToolsConfig({
    html: { enabled: false },
  });
};

Vue

function disableHtml() {
  editorRef.value?.setToolsConfig({
    html: { enabled: false },
  });
}

Angular

disableHtml() {
  this.sdk?.setToolsConfig({
    html: { enabled: false },
  });
}

Vanilla JS

pexelize.setToolsConfig({
  html: { enabled: false },
});

Minimal config for simple editors

For a stripped-down email editor, disable advanced tools and only keep the essentials:

tools: {
  text: { enabled: true, position: 1 },
  heading: { enabled: true, position: 2 },
  image: { enabled: true, position: 3 },
  button: { enabled: true, position: 4 },
  divider: { enabled: true, position: 5 },
  spacer: { enabled: true, position: 6 },
  // Disable everything else
  paragraph: { enabled: false },
  menu: { enabled: false },
  html: { enabled: false },
  social: { enabled: false },
  video: { enabled: false },
  table: { enabled: false },
  timer: { enabled: false },
  form: { enabled: false },
}

ToolConfig type reference

interface ToolConfig {
  /** Show/hide the tool in the side panel */
  enabled?: boolean;
  /** Display order (lower = higher) */
  position?: number;
  /** Override default property values */
  properties?: Record<string, {
    value?: unknown;
    editable?: boolean;
  }>;
}

Method reference

Method	Returns	Description
setToolsConfig(config)	void	Update tool configuration at runtime

Next steps

• Custom Tools — build your own drag-and-drop content tools
• Customize Appearance — themes, colors, and panel layout
• Modules — create reusable content blocks from rows