# Choose the right email editor We offer several editors for email creation. Check out our newest editor, Design Studio! If that doesn’t suit your needs, check out our older editors below.  Check out Design Studio! [Design Studio](/journeys/design-studio-overview/) is our newest, most flexible email editor. Use components to create a block-based email from scratch, and set global styles to create a consistent brand across your messages made in Design Studio. No longer do you have to decide between a visual or code-based editor; you can use both! ## Choose your editor[](#choose-your-editor) While editing a campaign, broadcast, or transactional message, you can create and edit your emails. When you first click into an email block, you’ll choose to either start from scratch or start from an existing email. [![Email selection page. At the top you can create an email from scratch. In the middle, under Start from existing email, you can choose an existing email.](https://docs.customer.io/images/design-studio-connect-message.png)](#fecb2e96ab70aa90854022836b78f0ce-lightbox) ## Our newest editor: Design Studio[](#our-newest-editor-design-studio) In Design Studio, you can: * Build emails with our **visual, block-based editor**. You can also modify the HTML/CSS as you see fit by switching to the **code editor**! * Build emails using reusable blocks. We offer out-of-the-box blocks called [standard componentsA pre-built block that helps you build beautiful, engaging messages as quickly as possible in Design Studio.](/journeys/components-overview/#standard-components). You can also create your own reusable blocks called [custom componentsA custom block of code with content and properties you can reuse across messages made in Design Studio.](/journeys/components-overview/#custom-components). * Assign global **styles** that span your emails and in-app messages. * **Collaborate with teammates** by sending test messages, requesting feedback, and more. ![A video of the visual editor. From the insert menu on the left, an image and heading are dragged onto the canvas in the middle. Then the user scrolls down in the menu to find a custom footer and drags that under the heading. The user clicks each component on the canvas to style it further.](https://docs.customer.io/images/design-studio-components.gif) Check out [Welcome to Design Studio](/journeys/design-studio-overview/) to get started! ## Our classic editors[](#our-older-editors) ### Drag-and-drop[](#drag-and-drop) Our drag-and-drop editor allows you to quickly build responsive emails without coding. It looks like this: [![image.png](https://docs.customer.io/images/image%28292%29.png)](#e573c9770443b10df42034601ec167f7-lightbox) You can quickly add blocks of content, columns, and easily drop in items like images, buttons, social links, and set global styles. When clicking your email to edit it, you can see that it was built using the drag-and-drop editor: [![An image of the top of the left-hand panel that appears when you click an email in the workflow builder. The button Edit Content shows the symbol, a hand gripping, which indicates the drag and drop editor.](https://docs.customer.io/images/dnd-edit-content.png)](#cf3724927cf5070df086070d83b431af-lightbox) To learn more about the drag-and-drop editor, check out these resources: * [Getting started with drag-and-drop](/journeys/drag-and-drop/): the basics of how to use columns, images, customize your headers and navigation, and so on. * [Drag-and-drop editor FAQ](/journeys/drag-and-drop-faq/): some of the most common questions we’ve received about this editor and upcoming features. * [Troubleshooting your drag-and-drop emails](/journeys/troubleshooting-email-design/) ### Rich text[](#rich-text) This editor is great if you need a little more control over the code compared to the drag-and-drop editor, but don’t need a highly stylized message. You land on the WYSIWYG editor, but you can click **HTML** to edit code. You can use [layouts](/journeys/3-layouts-and-customerio) to structure your emails and create a re-usable header and footer. [![image.png](https://docs.customer.io/images/rich-text-editor-1.png)](#050ef45324e0c4bdb6e77ed4cf65aa7f-lightbox) You can **switch to our code-only editor**, but once you confirm this action and save the email, you cannot revert the message back to the rich text editor. You can identify emails using the rich text editor in the workflow by this icon: [![An image of the top of the left-hand panel that appears when you click an email in the workflow builder. The button Edit Content shows the symbol of a text box with the letter A, which indicates the rich text editor.](https://docs.customer.io/images/rich-text-icon.png)](#d22ab5904906afbfc7e50a6b5b8a587d-lightbox) To learn more about the rich text editor, check out these resources: * [Email layouts overview](/journeys/3-layouts-and-customerio/) * [Customizing your layouts](/journeys/customizing-layout-starters/) ### Code[](#code) The code editor is a great option if you want complete, granular control over your email. Like the rich text editor, you can use [layouts](/journeys/3-layouts-and-customerio) to create a global, reusable header and footer. We’ve partnered with [Parcel](https://parcel.io) to help you code better emails. [Our code editor](/journeys/email-code-editor/) comes complete with syntax autocomplete, responsive previews, and an *Inspect Element* mode that helps you find code when you click elements in your preview. [![Parcel's code editor helps you craft better emails](https://docs.customer.io/images/parcel-basic.png)](#6b7a850b5ceeb8420440730be270b05e-lightbox) You can switch between tabs for writing HTML exclusively and [AMP](/journeys/amp-for-email/). [![In the center of the page is the code editor for an email. There are two tabs at the top of the editor: HTML and AMP. AMP is selected and the editor shows an AMP template with the preview displaying on the right hand panel.](https://docs.customer.io/images/amp-for-email-1.png)](#a86c614e4604eafadec96f9580df6bea-lightbox) You can identify emails created using the code editor in the workflow with the icon. [![An image of the top of the left-hand panel that appears when you click an email in the workflow builder. The button Edit Content shows two angle brackets, which indicates the code editor.](https://docs.customer.io/images/code-icon.png)](#31780f9cd25e192101ce8ca6f024b8b6-lightbox) To learn more about the code editor, check out these resources: * [Our email code editor, powered by Parcel](/journeys/email-code-editor/) * [How our Layouts work with this editor](/journeys/3-layouts-and-customerio) * [Customizing your Layouts](/journeys/customizing-layout-starters/) * [Disabling CSS pre-processing](/journeys/css-pre-processing/) ## Create an email from Design Studio[](#create-an-email-from-design-studio) For Design Studio, our newest editor, you can create email or copy one from: * The [Design Studio dashboard](/journeys/file-manager/#overview) * [Within a campaign, broadcast, or transactional message](/journeys/file-manager/#create-from-an-automation) ## Create an email from our classic editors[](#create-an-email-from-our-classic-editors) From a campaign or API-triggered broadcast: 1. Drag an **Email** block into your workflow and click **Add Content**. 2. If the first option you see is *Use a Design Studio Email*, then click **Go back to classic** in the top right to access the older editors. Otherwise, learn more about [creating emails with Design Studio](#create-an-email-from-design-studio)! 3. Decide how you want to create your email: from scratch or from an existing email. * If you want to create from scratch, choose your editor. * If you want to create from an existing email, template or [layout](/journeys/3-layouts-and-customerio/), then choose the tab that reflects the editor it was made in. * In the drag-and-drop tab, choose an existing email from the top or a template at the bottom. * In the rich text or code tabs, choose an existing email from the top or a [layout](/journeys/3-layouts-and-customerio/) at the bottom. 4. Edit the message as you see fit.