Display Conditions

Conditionally show or hide content rows based on recipient attributes, enabling targeted content within a single design.

React

import { useRef } from "react";
import { DragbleEditor, DragbleEditorRef } from "dragble-react-editor";

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

  return (
    <DragbleEditor
      ref={editorRef}
      editorKey="db_your_key"
      editorMode="email"
      options={{
        displayConditions: {
          enabled: true,
          conditions: [
            {
              label: "Subscription Plan",
              field: "plan",
              operators: ["equals", "not_equals"],
              values: [
                { label: "Free", value: "free" },
                { label: "Pro", value: "pro" },
                { label: "Enterprise", value: "enterprise" },
              ],
            },
            {
              label: "Country",
              field: "country",
              operators: ["equals", "not_equals", "contains"],
              values: [
                { label: "United States", value: "US" },
                { label: "United Kingdom", value: "GB" },
                { label: "Germany", value: "DE" },
              ],
            },
          ],
        },
      }}
    />
  );
}

Vue

<template>
  <DragbleEditor
    ref="editorRef"
    editor-key="db_your_key"
    editor-mode="email"
    :display-conditions="displayConditionsConfig"
  />
</template>

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

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

const displayConditionsConfig = {
  enabled: true,
  conditions: [
    {
      label: "Subscription Plan",
      field: "plan",
      operators: ["equals", "not_equals"],
      values: [
        { label: "Free", value: "free" },
        { label: "Pro", value: "pro" },
      ],
    },
  ],
};
</script>

Angular

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

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

  conditionsConfig = {
    enabled: true,
    conditions: [
      {
        label: "Subscription Plan",
        field: "plan",
        operators: ["equals", "not_equals"],
        values: [
          { label: "Free", value: "free" },
          { label: "Pro", value: "pro" },
        ],
      },
    ],
  };
}

Vanilla JS

dragble.init({
  containerId: "editor-container",
  editorKey: "db_your_key",
  editorMode: "email",
  options: {
    displayConditions: {
      enabled: true,
      conditions: [
        {
          label: "Subscription Plan",
          field: "plan",
          operators: ["equals", "not_equals"],
          values: [
            { label: "Free", value: "free" },
            { label: "Pro", value: "pro" },
            { label: "Enterprise", value: "enterprise" },
          ],
        },
      ],
    },
  },
});

Users can right-click any row and select Display Condition to apply rules. Rows with conditions show a badge in the editor.

Update conditions at runtime

// React
editorRef.current?.editor?.setDisplayConditions({
  enabled: true,
  conditions: [
    {
      label: "VIP Status",
      field: "is_vip",
      operators: ["equals"],
      values: [
        { label: "Yes", value: "true" },
        { label: "No", value: "false" },
      ],
    },
  ],
});

// Vanilla JS
dragble.setDisplayConditions({
  enabled: true,
  conditions: [
    /* ... */
  ],
});

:::info Conditions are metadata only The editor stores conditions as metadata in the design JSON. Your sending platform is responsible for evaluating conditions and filtering rows at render time. :::

:::tip Operators Available operators: equals, not_equals, contains, not_contains, starts_with, ends_with, greater_than, less_than. :::

Method reference

Method	Returns	Description
setDisplayConditions(config)	void	Replace display conditions configuration at runtime

Next steps

• Merge Tags -- personalize content with dynamic tokens
• Dynamic Images -- personalize images using merge tags in URLs
• Modules -- create reusable conditional content blocks
• Validation -- verify condition rules before sending