Installation

This page will help you get started with Unlayer. You'll be up and running in a jiffy!

Step 1: Add JavaScript Library

To get started, you need to add the Unlayer JavaScript library to your web app. This library will load everything needed to run the builder.

<script src="https://editor.unlayer.com/embed.js"></script>

If you are using React, Angular or Vue, check our components available on npm:


Step 2: Add a Container for the Editor

The Unlayer editor needs a container element on your page. Add a blank div where the editor will be displayed.

<div id="editor-container"></div>

📘

Recommended Size

For the best experience, ensure the container is at least 1024px wide and 700px high. The editor will expand to fill the entire container.


Step 3: Initialize the Editor

Now, let’s initialize the editor inside the container you just created by passing its id and configuration options.

unlayer.init({
  id: 'editor-container', // ID of the container created in previous step
  projectId: 1234,  // Add your project ID here
  displayMode: 'email'  // Can be 'email', 'web' or 'popup'
});

Where to get the Project ID?

  1. Log in to the Developer Console
  2. Create a Project
  3. You can find the project ID in Project > Settings

Configuration Options

Here’s a breakdown of some commonly used configuration options for unlayer.init():

AttributeRequired
id
string
YesThis is the HTML div id of the container where the editor will be embedded.
displayMode
string
NoThis decides which builder to load. Available values: email, web, popup. Default value is web. We have these builders available: Email Builder, Page Builder, Popup Builder
projectId
integer
NoThis is the project ID from Unlayer. You can get it from the project settings page.
locale
string
NoThis is the locale you want to load the editor in. We have many translations available. Learn more
appearance
object
NoThese are the appearance options to change the look and feel of the editor. Learn more
user
object
NoThis is the info of the user who is using the editor. You can pass id, name and email. Unique id is required to enable user saved blocks.
mergeTags
array
NoThis is an array of objects. You can pass the merge tags to display in the editor. Learn more
designTags
object
NoYou can pass design tags in this object. Learn more
specialLinks
object
NoYou can pass special links in this object. Learn More
tools
object
NoThese are the options for tools and custom tools. Learn more
blocks
array
NoThis is an array of objects. You can pass custom blocks here. Learn more
editor
object
NoThese are some editor options for different functions of the editor. Learn more
fonts
object
NoYou can pass custom fonts here. Learn More
safeHtml
boolean
NoSanitizes HTML output to prevent executable JavaScript from being inserted.
customJS
array
NoCustom JavaScript URL or source. Learn more
customCSS
array
NoCustom CSS URL or source. Learn more
textDirection
string
NoThis is the text direction of html output which can be rtl or ltr.

Multiple Instances

You can create multiple instances of the editor on the same page, or if you have a single page application.

const editor = unlayer.createEditor({
  id: 'editor-container',
  projectId: 1234, // Add your project ID here
  displayMode: 'email'
})

editor.loadDesign({})
editor.exportHtml(function(data) { })

Step 4: Deploy to Production

To access project settings and premium features in production:

  1. Log in to Developer Console and go to your project.
  2. Pass the projectId when initializing the builder. You can find the project ID in console under Project > Settings.
  3. Add Allowed Domains: Ensure your builder only works on specific domains. Go to Project > Settings > Deployment and add your allowed domains under “Allowed Domain(s)” section as shown below.