Design import in Stripo. From an MJML or HTML file to a fully editable template in a few clicks

You have an MJML file with a designed layout ready for your next campaign. Reproducing it in an email editor from scratch takes time you don't have, and there's always a chance something could change in the process.

In our recent update, we introduced a small but important feature for many marketers: Design import. It allows you to integrate your MJML and HTML files with our editor in the most convenient way possible. Let’s take a quick look at what it is and how it works. 

What is MJML

HTML is our good, old friend, but MJML is a new thing. MJML, if you haven't worked with it yet, is an open-source markup language built specifically for responsive emails.

It offers several benefits that are leading more and more marketers to use MJML as their primary email coding language, such as:

• It’s a responsive coding language by default;
• It has a much cleaner syntax than raw email HTML;
• It helps to handle many Outlook compatibility issues more easily. 

Besides that, some Figma plugins marketers use to create email designs can convert the finished design into MJML format.

However, there is a little hitch you should know about. Even though you can code your email solely using MJML, the final email will still be HTML because email clients do not support MJML directly. You need to convert your MJML file to HTML so email clients can display it. Besides that, the same process must be followed if you want to edit your MJML templates in email editors. And that’s where our new feature enters the game.

How Stripo Import works

In simple words, our import allows you to import an email file written using MJML or HTML so that it can be edited in our editor. It sounds easy, and it's just as easy in practice. In your Account, you’ll see a new button right beside the New Message.

Clicking on it will open a short drop-down list with an Import option. That’s where our MJML conversion is hidden.

Once clicked, you’ll be transferred to a separate screen of our importer. First of all, you have two options for importing both HTML and MJML:

• import a full-fledged file;
• just paste your HTML or MJML code.

The file option is picked by default, and all you need to do is click on the import field to choose a file from your device, or simply drag-n-drop it into this field to attach it.

If your file is correct, you’ll see the green tick icon right beside the file name, and you can continue to work on it in our editor. Click on the Complete button to go to your Account.

If your file is imperfect, you’ll receive an Import Error, and you’ll need to double-check your template file and try again.

The second option is simply pasting your code. Once you choose this option, you’ll see a code editor window, and that’s where your pasted code will go.

We have an MJML email template example to demonstrate. We copy this code from the example.

(Source: MJML.io)

And paste it inside this window. After that, we click on the Import Code button.

Once the import is complete, you’ll see these three buttons. Back takes you to the previous step, Complete redirects you to your account, and Open launches your imported template in the editor.

Editing differences

And now, the most important difference you should know about. Both approaches let you edit your templates inside our editor. However, there is a hitch. HTML import allows you to edit images and text only. But if you need to restructure the layout, such as adding a column, moving a button, or changing the padding on a section, you'll need to do so directly in the HTML editor.

Meanwhile, imported MJML templates have no editing restrictions, just the full drag-n-drop Stripo experience, allowing you to customize your template from top to bottom.

Besides that, converted files are automatically saved in your email library, and you can manage them like any other email in your library.

Wrapping up

As you can see, this feature works pretty straightforwardly and allows you, in a matter of clicks, to import any email design you want to edit with Stripo, no extra hassle. Design Import is a straightforward time-saver, whether you're bringing in an MJML file from a designer or an HTML template you built months ago. Upload it, open it in the editor, and get to work. No rebuilding required. Besides that, it provides you with more freedom to create unique templates for your email campaigns, using Stripo features to the fullest.