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    Changelog

Appearance

You can customize the appearance of the editor with panel positioning and colors.

Changing Appearance

There are 2 ways you can change the appearance of Unlayer.

Option 1) You can pass the appearance object during initialization like this:

unlayer.init({
  appearance: {
    theme: 'light',
    panels: {
      tools: {
        dock: 'right'
      }
    }
  }
});

Option 2) You can change appearance after initialization like this:

unlayer.setAppearance({
  theme: 'light',
  panels: {
    tools: {
      dock: 'right'
    }
  }
});

Themes

We currently have 2 themes out of the box.

Light Mode (Default)

unlayer.init({
  appearance: {
    theme: 'light'
  }
});

Dark Mode

unlayer.init({
  appearance: {
    theme: 'light'
  }
});

Tools Position

You can position the tools panel on the right side or the left side.

Right Side (Default)

unlayer.init({
  appearance: {
    panels: {
      tools: {
        dock: 'right'
      }
    }
  }
});

Left Side

unlayer.init({
  appearance: {
    panels: {
      tools: {
        dock: 'left'
      }
    }
  }
});

Mobile / Desktop Preview

You can choose to hide the mobile / desktop preview icons from the little actions box on the bottom right.

unlayer.init({
  appearance: {
    features: {
      preview: false
    }
  }
})

Appearance


Suggested Edits are limited on API Reference Pages

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