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.
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'
})These are all the configuration options available that can be passed to the unlayer.init method.
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
safeHtml
boolean
No
Sanitizes HTML output to prevent executable JavaScript from being inserted.
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) { })
Updated 8 days ago
What's Next
| Load and Save Designs |