> ## Documentation Index
> Fetch the complete documentation index at: https://loops.so/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# The editor

> Loops' email editor has writing mode, themes, dynamic personalization, reusable content blocks, keyboard/Markdown shortcuts and more.

We have built a powerful editor for creating emails. Create any email with our flexible design tools, and write distraction free with Writing mode.

Here are a few of the editor's stand-out features:

* Customizable custom themes to keep your designs consistent
* Writing mode, distraction-free editing which hides the editor interface
* Auto-saves as you type
* Mobile-friendly so you can write and design emails on any device
* Support for images, buttons, social icons, dividers and columns
* The same interface for marketing and transactional emails
* Personalize emails with contact and event properties
* Helpful keyboard and Markdown shortcuts for adding content and formatting text

<Tip>
  If you would rather upload emails into Loops, you can [import
  MJML](/creating-emails/uploading-custom-email) instead of using the editor.
</Tip>

## Formatting text

Once you have written content in your email, you will see formatting options appear in the right-hand panel. These options will change depending on the element you have selected in the email.

<img src="https://mintcdn.com/loops/aOtgyczWtTw7x5Xz/images/formatting-toolbar.png?fit=max&auto=format&n=aOtgyczWtTw7x5Xz&q=85&s=21e2f59a41276140a35a208f82f3c160" alt="Email editor formatting toolbar options" width="2280" height="1544" data-path="images/formatting-toolbar.png" />

You can choose between different headings, style text **bold**, *italic*, <u>underline</u> as well as add links. You can also change text size and color.

Text can also be easily changed into lists, quotes and [code blocks](/creating-emails/editor/code-blocks).

<img src="https://mintcdn.com/loops/aOtgyczWtTw7x5Xz/images/editor-text.png?fit=max&auto=format&n=aOtgyczWtTw7x5Xz&q=85&s=8440661dbb0e172623dac6c5a11f14c9" alt="Formatted text options in the Loops email editor" width="2280" height="1844" data-path="images/editor-text.png" />

<Note>
  You can also use [keyboard shortcuts](#keyboard-shortcuts) and [Markdown formatting](/creating-emails/editor/markdown) to format your text.
</Note>

## Writing mode

To focus on writing your email, you can enter Writing mode.

To toggle writing mode, use the switch just above the editor or use the `⌘+/` (Mac) or `Ctrl+/` (Windows) keyboard shortcut.

<img src="https://mintcdn.com/loops/aOtgyczWtTw7x5Xz/images/writing-mode.png?fit=max&auto=format&n=aOtgyczWtTw7x5Xz&q=85&s=8200fc6fa5e295c22b4cb7c953c04cda" alt="Writing mode" width="2280" height="1653" data-path="images/writing-mode.png" />

When in Writing mode, you can edit styles by clicking the **Show styles** button that appears above selected elements. This will open a slide-in editor panel on the right

<img src="https://mintcdn.com/loops/1DdZd7QTRR4Srm-l/images/writing-mode-styles.png?fit=max&auto=format&n=1DdZd7QTRR4Srm-l&q=85&s=d599bee9ef5a9f080a49c537d60687ca" alt="Writing mode styles" width="2280" height="1310" data-path="images/writing-mode-styles.png" />

## Adding elements

Emails can be more than just text. You can add the following elements to your emails:

* images
* links
* buttons
* dividers
* social icons
* columns
* sections
* arrays

You can add elements from the toolbar above the editor, or by hovering over an existing element in your email and clicking the `+` plus icon on the left.

<img src="https://mintcdn.com/loops/aOtgyczWtTw7x5Xz/images/editor-adding.png?fit=max&auto=format&n=aOtgyczWtTw7x5Xz&q=85&s=9f95ac6bd1de88b0a7cf186757237d5a" alt="Adding an element using the plus icon in the editor" width="2280" height="1152" data-path="images/editor-adding.png" />

You can also add elements by typing `/` in the editor:

<img src="https://mintcdn.com/loops/rokkEwZACl7I-q-f/images/slash-menu.png?fit=max&auto=format&n=rokkEwZACl7I-q-f&q=85&s=77c5754a085c8857fddf1fbeb7814558" alt="Slash menu for inserting email blocks" width="2280" height="1739" data-path="images/slash-menu.png" />

If you continue typing, you can narrow down the selections. You can use your arrow keys to select items and pressing Enter will confirm your selection.

<img src="https://mintcdn.com/loops/Z7viZoAUCPxaqCl2/images/slash-typed.png?fit=max&auto=format&n=Z7viZoAUCPxaqCl2&q=85&s=b09bfe99479781587e54f9b6118f35ea" alt="Filtering slash menu options by typing" width="2280" height="1217" data-path="images/slash-typed.png" />

When adding dynamic content like contact properties to [personalize emails](/creating-emails/personalizing-emails), you can type "\{" to open the dynamic content menu.

<img src="https://mintcdn.com/loops/EgyPhKkeXp9wCnWY/images/brace-menu.png?fit=max&auto=format&n=EgyPhKkeXp9wCnWY&q=85&s=27c73e902ab6b876bc16065bd09134aa" alt="Dynamic content menu opened by typing the opening brace" width="2280" height="1532" data-path="images/brace-menu.png" />

<Note>
  You can also use [keyboard shortcuts](#keyboard-shortcuts) and [Markdown formatting](#markdown-formatting) to add certain elements to your email.
</Note>

<CardGroup cols={2}>
  <Card title="Images" icon="image" href="/creating-emails/editor/images" />

  <Card title="Videos" icon="video" href="/creating-emails/editor/videos" />

  <Card title="Links" icon="link" href="/creating-emails/editor/links" />

  <Card title="Buttons" icon="rectangle-minus" href="/creating-emails/editor/buttons" />

  <Card title="Social icons" icon="star" href="/creating-emails/editor/social-icons" />

  <Card title="Dividers" icon="minus" href="/creating-emails/editor/dividers" />

  <Card title="Columns" icon="columns" href="/creating-emails/editor/columns" />

  <Card title="Sections" icon="rectangle-list" href="/creating-emails/editor/sections" />

  <Card title="Arrays" icon="bars" href="/creating-emails/editor/arrays" />

  <Card title="Markdown" icon="markdown" href="/creating-emails/editor/markdown" />

  <Card title="Code blocks" icon="code" href="/creating-emails/editor/code-blocks" />
</CardGroup>

## Reordering content

If you hover over a block in your email, you'll see a drag-and-drop icon appear on the left. You can drag this icon to re-order elements in your email.

<img src="https://mintcdn.com/loops/Vqx-auiVy74YQr9S/images/block-icons.png?fit=max&auto=format&n=Vqx-auiVy74YQr9S&q=85&s=e55c94f10c7d81e3f108a365ca291fd1" alt="Drag handles for reordering blocks in the editor" width="2280" height="1104" data-path="images/block-icons.png" />

## Footer content

We add an automatic footer into campaign and workflow emails, which includes your company name, address and an unsubscribe link.

<img src="https://mintcdn.com/loops/OG31ikb--92jQDlq/images/footer.png?fit=max&auto=format&n=OG31ikb--92jQDlq&q=85&s=a0c0c267764f6edb2f6728797dd0d0ec" alt="Default email footer with unsubscribe link" width="2280" height="830" data-path="images/footer.png" />

Unsubscribe links help prevent your messages from being marked as spam and ensure that your messages are willingly being received by an engaged audience, helping your deliverability.

The unsubscribe link leads to a [Preference Center](/contacts/mailing-lists#preference-center), where your contacts can manage their own subscriptions.

You can edit your company address from [Settings -> Domain](https://app.loops.so/settings?page=domain).

If your email was sent to a [mailing list](/contacts/mailing-lists), the footer will also [include the name of the list](/contacts/mailing-lists#email-footers) the email was sent to.

## Keyboard shortcuts

The following keyboard shortcuts are available in the editor.

<Tip>
  You can also use [Markdown formatting](/creating-emails/editor/markdown) to format your text.
</Tip>

<Info>
  The editor automatically saves your work as you type so there is no need to
  save manually.
</Info>

<Tabs>
  <Tab title="Mac">
    | Shortcut      | Action                           |
    | :------------ | :------------------------------- |
    | `⌘` `/`       | Toggle writing mode              |
    | `/`           | Insert a block (open slash menu) |
    | `⌘` `D`       | Duplicate a block                |
    | `⌘` `K`       | Insert a link                    |
    | `⌘` `B`       | Bold text                        |
    | `⌘` `I`       | Italicize text                   |
    | `⌘` `U`       | Underline text                   |
    | `Tab`         | Indent a list item               |
    | `Shift` `Tab` | Unindent a list item             |

    You can also use the following default keyboard shortcuts:

    | Shortcut        | Action     |
    | :-------------- | :--------- |
    | `⌘` `A`         | Select all |
    | `⌘` `C`         | Copy       |
    | `⌘` `V`         | Paste      |
    | `⌘` `X`         | Cut        |
    | `⌘` `Z`         | Undo       |
    | `⌘` `Shift` `Z` | Redo       |
  </Tab>

  <Tab title="Windows">
    | Shortcut      | Action                           |
    | :------------ | :------------------------------- |
    | `Ctrl` `/`    | Toggle writing mode              |
    | `/`           | Insert a block (open slash menu) |
    | `Ctrl` `D`    | Duplicate a block                |
    | `Ctrl` `K`    | Insert a link                    |
    | `Ctrl` `B`    | Bold text                        |
    | `Ctrl` `I`    | Italicize text                   |
    | `Ctrl` `U`    | Underline text                   |
    | `Tab`         | Indent a list item               |
    | `Shift` `Tab` | Unindent a list item             |

    You can also use the following default keyboard shortcuts:

    | Shortcut           | Action     |
    | :----------------- | :--------- |
    | `Ctrl` `A`         | Select all |
    | `Ctrl` `C`         | Copy       |
    | `Ctrl` `V`         | Paste      |
    | `Ctrl` `X`         | Cut        |
    | `Ctrl` `Z`         | Undo       |
    | `Ctrl` `Shift` `Z` | Redo       |
  </Tab>
</Tabs>
