Installation

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

Add JavaScript Library

The first step is to add the following JavaScript library to your web app. This will load all the required assets for you to initialize the editor.

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

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


Initialize Editor

The Unlayer editor needs a container HTML element on your page to be rendered inside. Let's add a blank div first.

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

๐Ÿ“˜

Recommended Size

It is recommended that the container has a minimum width of 1024px and minimum height of 700px. The editor is designed to be fluid and will take full width and height of the container.

Now, we'll initialize the editor in the blank div above by passing its id and some other configuration options.

unlayer.init({
  id: 'editor-container',
  projectId: 1234,
  displayMode: 'email'
})

Configuration Options

These are all the configuration options available that can be passed to the unlayer.init method.

AttributeRequired
id
string
YesThis is the HTML div id of the container where the editor will be embedded.
displayMode
string
NoThis is the template display mode which can be email or web. Default value is web.
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,
  displayMode: 'email'
})

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

Deploying to Production

To access the project settings and premium features of your project, you need to make sure of the following:

  1. You must pass the projectId in the init function. You can retrieve the project ID from your dashboard by going to the project settings.
  2. You must also provide the domain(s) where the Unlayer editor will be running. You can go to project settings > deployment and add the domains in the "Allowed Domain(s)" section as shown below.

Whatโ€™s Next