Skip to main content

​
Quick start

Column extensions are included in StarterKit by default; no extra imports are needed. 
import { StarterKit } from '@react-email/editor/extensions';
import { EditorProvider } from '@tiptap/react';

const extensions = [StarterKit];

export function MyEditor() {
  return <EditorProvider extensions={extensions} content={content} />;
}

​
Inserting columns programmatically

Use the insertColumns command to add a column layout. 
// Insert a 2-column layout
editor.chain().focus().insertColumns(2).run();

// Insert a 3-column layout
editor.chain().focus().insertColumns(3).run();

// Insert a 4-column layout
editor.chain().focus().insertColumns(4).run();

​
Building a toolbar

Here’s a complete example with a toolbar for inserting column layouts. It uses the slotBefore prop to position the toolbar above the editor. 
import { StarterKit } from '@react-email/editor/extensions';
import { EditorProvider, useCurrentEditor } from '@tiptap/react';
import { Columns2, Columns3, Columns4 } from 'lucide-react';

const extensions = [StarterKit];

function ToolbarButton({
  label,
  icon,
  onClick,
}: {
  label: string;
  icon?: React.ReactNode;
  onClick: () => void;
}) {
  return (
    <button type="button" onClick={onClick}>
      {icon}
      {label}
    </button>
  );
}

function Toolbar() {
  const { editor } = useCurrentEditor();
  if (!editor) return null;

  return (
    <div style={{ display: 'flex', gap: '8px', marginBottom: '16px' }}>
      <ToolbarButton
        label="2 columns"
        icon={<Columns2 size={16} />}
        onClick={() => editor.chain().focus().insertColumns(2).run()}
      />
      <ToolbarButton
        label="3 columns"
        icon={<Columns3 size={16} />}
        onClick={() => editor.chain().focus().insertColumns(3).run()}
      />
      <ToolbarButton
        label="4 columns"
        icon={<Columns4 size={16} />}
        onClick={() => editor.chain().focus().insertColumns(4).run()}
      />
    </div>
  );
}

export function MyEditor() {
  return (
    <EditorProvider
      extensions={extensions}
      content={content}
      slotBefore={<Toolbar />}
    />
  );
}
Use slotBefore to render custom UI above the editor, and useCurrentEditor() to access the editor instance from child components.

​
Column spacing

Column layouts render as email-safe tables. Space between columns is stored as the cellspacing attribute on the column layout and exported as the cellSpacing prop on the underlying Row. Select a 2, 3, or 4 column layout in the editor and use Column spacing in the inspector to adjust the gap between columns.
Column spacing controls the gap between columns. Padding on an individual column controls the space inside that column.

​
Slash commands

The default slash commands include column layouts. Type / and search for “columns”:
  • Two Columns: TWO_COLUMNS
  • Three Columns: THREE_COLUMNS
  • Four Columns: FOUR_COLUMNS
See Slash Commands for setup details.

​
Examples

See column layouts in action with a runnable example:

Column Layouts

Toolbar-driven 2/3/4 column insertion.