Self Hosted (Offline) Mode`

The self‑hosted (offline) deployment of the Unlayer editor is available only on the Enterprise plan. Please contact Unlayer support or your account manager to enable this feature.

Introduction: What Is the Self‑Hosted Model?

Unlayer can be embedded into a host application by simply adding a <div>, loading the “embed.js” file, and initializing the builder. In the standard setup, Unlayer loads its editor and related assets from Unlayer’s cloud infrastructure and runs inside an iframe.

However, in some use cases where you have restricted or isolated network environments in which outbound internet access is limited or not allowed — loading the editor from Unlayer’s CDN is not possible.

To support these environments, Unlayer provides a self‑hosted (offline) deployment model, allowing developers to host the editor bundle and license files entirely within their own infrastructure. This approach enables you to run the Unlayer builder internally, without relying on external network access, while retaining full editor functionality.

Hosting the Editor Locally

Self‑hosting the Unlayer editor is straightforward and requires only a few setup steps. The core requirement is a license file that allows the editor to load subscription features and operate in offline mode.

License File (`license.json`)

Before deploying the editor, download your license.json file from the Unlayer Console. Here are the steps:

Navigate to Unlayer Console.
From the navigation bar go Developer → Builder → Settings.
Select “Self-Hosted” from the menu.
Click on “Download License” button

This file is required to:

Load your subscription features
Enable offline/self‑hosted usage
Authenticate the editor without calling Unlayer’s cloud services

Make sure this file is kept secure and is accessible to the editor at runtime.

Deployment Steps

Follow these steps to deploy the Unlayer editor in a self‑hosted environment:

Download the latest self‑hosted editor bundle from Unlayer Console.
Extract the downloaded ZIP file to a publicly accessible directory on your server (for example, a static assets or public folder).
Place the downloaded license.json file in the same directory as embed.js. The editor will automatically detect the license file when running in offline mode.
Update your application to load embed.js from your self‑hosted location instead of Unlayer’s CDN.
Ensure offline: true is set in the editor initialization options.
To support features like image uploads and image editing, you must implement the required callbacks (covered below).

Initializing and Integrating the Self‑Hosted Editor

Use the following example to integrate the self‑hosted Unlayer editor into your application. Make sure the offline option is enabled.

<script src="path/to/your/hosted/embed.js"></script>

<div id="editor"></div>

<script>
  unlayer.init({
    id: 'editor',
    projectId: Your_Project_ID,
    offline: true,
    displayMode: "email" // or 'web', 'document', 'popup'
  });
</script>

This initializes the Unlayer builder using locally hosted assets and prevents any external network requests to Unlayer’s cloud services.

Required Callbacks for Offline Functionality

When running in offline mode, certain features require custom callback implementations so the editor can interact with your backend.

Fetch Image Callback (Required for Image Editor)

This callback is required for the image editor to load images through your own proxy or backend.

unlayer.registerCallback('fetchImage', async function(params, done) {
  try {
    const proxyURL = `imageProxyURL`; // Your image proxy URL
    const response = await fetch(proxyURL, {
      method: 'GET',
    });

    if (!response.ok) {
      throw new Error('Failed to fetch image.');
    }

    const blob = await response.blob();
    done({ blob });
  } catch (error) {
    console.error('Error fetching image:', error);
    done({ blob: null });
  }
});

Image Upload Callback (Required for Uploads)

This callback handles image uploads initiated from the builder and stores them in your own system.

unlayer.registerCallback('image', function(file, done) {
  var data = new FormData();
  data.append('file', file.attachments[0]);

  fetch('/uploads', {
    method: 'POST',
    headers: {
      'Accept': 'application/json'
    },
    body: data
  })
    .then(response => {
      if (response.status >= 200 && response.status < 300) {
        return response.json();
      } else {
        throw new Error(response.statusText);
      }
    })
    .then(data => {
      done({ progress: 100, url: data.filelink });
    })
    .catch(error => {
      console.error('Error uploading image:', error);
      done({ progress: 0, url: null });
    });
});

With the editor bundle hosted locally, the license file in place, offline mode enabled, and required callbacks implemented, you can run the Unlayer builder entirely within your own infrastructure.

Use Cases

This approach is ideal for enterprise environments that require:

Restricted or no internet access
Full control over assets and data
Compliance with internal security policies

If you need help enabling Enterprise access or configuring advanced offline features, contact Unlayer support.