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 { DragbleEditor, DragbleEditorRef } from "dragble-react-editor";

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

  return (
    <DragbleEditor
      ref={editorRef}
      editorKey="db_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" },
          ],
          defaultColors: true,
        },
      }}
    />
  );
}

Vue

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

<script setup lang="ts">
import { ref } from "vue";
import { DragbleEditor } from "dragble-vue-editor";

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

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

Angular

import { Component, ViewChild } from "@angular/core";
import { DragbleEditorComponent } from "dragble-angular-editor";

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

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

Vanilla JS

dragble.init({
  containerId: "editor-container",
  editorKey: "db_your_key",
  editorMode: "email",
  options: {
    brandingColors: {
      colors: [
        { label: "Primary", value: "#6366f1" },
        { label: "Secondary", value: "#ec4899" },
        { label: "Dark", value: "#1e1b4b" },
        { label: "Light", value: "#f5f3ff" },
      ],
      defaultColors: 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" },
  ],
  defaultColors: true,
});

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

:::tip Default colors Set defaultColors: true (default) to show the default preset colors below the brand colors. Set defaultColors: false to hide them and only show brand colors. :::

:::info 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