Skip to main content

Code Editor Guide

The Code Editor provides a full HTML editing experience with syntax highlighting, designed for users who want precise control over the email's structure and styling. A live preview alongside the code updates in real-time as you type.

Editor Layout​

The Code Editor interface is split into two panels:

PanelPurpose
Left panelHTML code editor with syntax highlighting and line numbers
Right panelLive preview of the rendered email. Updates in real-time as you edit the HTML

The toolbar at the top of the editor provides access to the template tabs (Editor, Sender, Test Data, Attachments), action buttons (export, import, upload image, insert variable), preview mode toggle (Desktop/Mobile), the Switch Editor button, and the Send Test Email button.

Writing HTML​

The code editor supports full HTML email markup. Write your HTML in the left panel and see the result rendered in the right panel immediately.

The editor includes:

  • Syntax highlighting for HTML tags, attributes, and values
  • Line numbers for easy reference
  • Standard text editing features (undo, redo, copy, paste, find)

You have full control over the HTML structure, including tables, inline CSS, media queries, and any other HTML email patterns you need.

Toolbar Actions​

The Code Editor toolbar includes several action buttons that help you work with content:

ButtonWhat it does
Export (download icon)Download the template as an .or_code_template file. See Importing and Exporting Templates
Import (upload icon)Upload a previously exported .or_code_template file to restore a template. See Importing and Exporting Templates
Image (picture icon)Upload an image from your device. After upload, an <img> tag with the hosted URL is automatically inserted into your HTML at the cursor position
Variable ({ } icon)Open the variable inserter menu. Select a variable and a variable tag is placed into the HTML at the cursor position. See Test Data and Variables

Working with Images​

To add an image to your email:

  1. Place your cursor in the HTML where you want the image to appear.
  2. Click the image button (picture icon) in the toolbar.
  3. Select a file from your device. An upload spinner appears while the file is being stored.
  4. When the upload completes, an <img> tag is automatically inserted at the cursor position with the src attribute set to the hosted image URL.

You can also write <img> tags manually if you have an image URL available.

Working with Variables​

Variables let you personalise email content for each recipient using data from your contact list.

To insert a variable:

  1. Place your cursor in the HTML where you want the variable to appear.
  2. Click the variable button ({ } icon) in the toolbar.
  3. Select the variable from the menu.
  4. A variable tag is inserted into the HTML at the cursor position, displayed as a pink tag (e.g. a tag showing "first_name").

Variables can be placed inside any HTML element. In the rendered preview, variables resolve to test data values when available, or show the raw placeholder (e.g. {{first_name}}) if no test value is set.

Every email campaign requires an unsubscribe link. In the Code Editor:

  1. Place your cursor where you want the unsubscribe link to appear in the HTML.
  2. Use the toolbar or manually write an <a> tag that includes the unsubscribe variable.
  3. The variable resolves to a unique opt-out URL for each recipient when the email is sent.

The unsubscribe variable is always available in the variable inserter menu.

Preview​

The right panel shows a live rendering of your HTML that updates as you type.

  • Toggle between Desktop and Mobile views using the dropdown in the toolbar
  • Variables resolve to test data values when available
  • The preview matches what recipients will see in their email client

Security​

The Code Editor applies security measures to protect recipients:

  • JavaScript is not executed in the preview or the sent email
  • <script> tags are stripped to prevent cross-site scripting
  • The preview renders inside a sandboxed <iframe> that isolates the content from the surrounding application

You can use any standard HTML and CSS for email layout and styling. Only JavaScript execution is restricted.

Tips​

  • Use table-based layouts for maximum compatibility across email clients. Many email clients have limited support for modern CSS layout features like flexbox and grid.
  • Inline your CSS where possible. Some email clients strip <style> blocks from the <head>, so critical styles should be applied inline.
  • Test across clients by sending test emails using the Send Test Email button. Different email clients render HTML differently, so verify your design in Gmail, Outlook, Apple Mail, and other clients your recipients are likely to use.
  • Use the preview toggle to check both desktop and mobile views. Responsive email patterns (such as @media queries) are reflected in the mobile preview.
  • Export regularly when making significant changes. If something goes wrong, you can import the saved file to restore your work.