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    

Design Tags

Design tags are customizable display variables in a template that can change based on who's using the editor. For example, you have an email template that you want to personalize for each user who edits it and say "Welcome to My Business" where My Business will be the business name.

Design tags work with double square brackets [[ var ]] only. You can make it HTML safe by adding an additional curly bracket [[{ var }]].


Exported Design

The final design that is exported does not have the variables but the replacement that the end-user sees.

Example Case

Let's say Tesla Inc is your customer and Elon Musk is using the editor in your application. In your template, you will have something like this:

Welcome to [[business_name]].

Yours Truly,

When the Unlayer editor opens and the template is loaded, he will see:

Welcome to Tesla inc.

Yours Truly,
Elon Musk

Images or Links

If you are using design tags to pass URLs for images or links, make sure to make it HTML safe by adding an additional curly bracket. For example:


Passing Design Tags

You can pass design tags when you initialize the Unlayer editor.

  designTags: {
    business_name: "Tesla Inc",
    current_user_name: "Elon Musk"

Changing Delimiter

You can change the delimiter for design tags if [[ ]] does not work for you.

  designTagsConfig: {
    delimiter: ['[[', ']]']

Common Use Cases

  • Personalized Business Name
  • Personalized Business Logo
  • Custom Footer Text
  • Custom Unsubscribe Link

Updated 3 months ago

Design Tags

Suggested Edits are limited on API Reference Pages

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