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 { PexelizeEditor, PexelizeEditorRef } from '@pexelize/react-editor';

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

  return (
    <PexelizeEditor
      ref={editorRef}
      editorKey="pk_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>
  <PexelizeEditor
    ref="editorRef"
    editor-key="pk_your_key"
    editor-mode="email"
    :display-conditions="displayConditionsConfig"
  />
</template>

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

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

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 { PexelizeEditorComponent } from '@pexelize/angular-editor';

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

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

Vanilla JS

pexelize.init({
  containerId: 'editor-container',
  editorKey: 'pk_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
pexelize.setDisplayConditions({ enabled: true, conditions: [/* ... */] });

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.

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
• Modules — create reusable conditional content blocks
• Validation — verify condition rules before sending