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="//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 div you just created by passing its id and configuration options.

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

Configuration Options

Here’s a breakdown of the available 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 is the template display mode which can be email or webor popup. 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) { })

Step 4: Deploy to Production

To access project settings and premium features in production:

  1. Pass the projectId when initializing the builder. You can find the project ID in your Unlayer console under Project > Settings.
  2. 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.