Unlayer Documentation

Unlayer Documentation

Welcome to Unlayer Documentation. It takes less than 5 minutes to get our editor up and running on your project.

These guides will take you through the process and get you up and running.

Get Started    

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.js, use our React Component 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 it's 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.

Attribute
Required

id
string

Yes

This is the HTML div id of the container where the editor will be embedded.

displayMode
string

No

This is the template display mode which can be email or web. Default value is web.

projectId
integer

No

This is the project ID from Unlayer. You can get it from the project settings page.

locale
string

No

This is the locale you want to load the editor in. We have many translations available. Learn more

appearance
object

No

These are the appearance options to change the look and feel of the editor. Learn more

user
object

No

This 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

No

This is an array of objects. You can pass the merge tags to display in the editor. Learn more

designTags
object

No

You can pass design tags in this object. Learn more

tools
object

No

These are the options for tools and custom tools. Learn more

blocks
array

No

This is an array of objects. You can pass custom blocks here. Learn more

editor
object

No

These are some editor options for different functions of the editor. Learn more

safeHtml
boolean

No

Sanitizes HTML output to prevent executable JavaScript from being inserted.

customJS
array

No

Custom JavaScript URL or source. Learn more

customCSS
array

No

Custom CSS URL or source. Learn more


Installation


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

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.