Document Builder

This guide walks you through embedding Unlayer's drag-and-drop document builder into your web application. The document builder lets your users create reports, proposals, contracts, and other structured documents.

---

Step 1: Install the SDK

Vanilla JS

Add the script tag to your HTML:

<script src="https://editor.unlayer.com/embed.js"></script>

React

npm install react-email-editor

Angular

npm install angular-email-editor

Vue

npm install vue-email-editor

---

Step 2: Initialize the Editor

Set displayMode to document to load the document builder.

Recommended Size

For the best experience, ensure the editor container is at least 1024px wide and 700px high. The editor will expand to fill the entire container.

Vanilla JS

<div id="editor-container" style="height: 700px;"></div>

<script>
  unlayer.init({
    id: 'editor-container',
    displayMode: 'document',
    projectId: 1234, // Replace with your project ID
  });
</script>

React

import React, { useRef } from 'react';
import EmailEditor from 'react-email-editor';

function App() {
  const emailEditorRef = useRef(null);

  const onReady = () => {
    console.log('Editor is ready');
  };

  return (
    <EmailEditor
      ref={emailEditorRef}
      onReady={onReady}
      options={{
        displayMode: 'document',
        projectId: 1234, // Replace with your project ID
      }}
    />
  );
}

export default App;

Angular

app.module.ts

import { EmailEditorModule } from 'angular-email-editor';

@NgModule({
  imports: [ EmailEditorModule ],
})

app.component.ts

import { Component, ViewChild } from '@angular/core';
import { EmailEditorComponent } from 'angular-email-editor';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  @ViewChild(EmailEditorComponent)
  private emailEditor: EmailEditorComponent;

  options = {
    displayMode: 'document',
    projectId: 1234, // Replace with your project ID
  };

  editorLoaded() {
    console.log('Editor is ready');
  }

  exportHtml() {
    this.emailEditor.editor.exportHtml((data) =>
      console.log('exportHtml', data),
    );
  }
}

app.component.html

<div class="container">
  <button (click)="exportHtml()">Export</button>
  <email-editor [options]="options" (loaded)="editorLoaded()"></email-editor>
</div>

Vue

<template>
  <div id="app">
    <EmailEditor
      ref="emailEditor"
      :options="options"
      :project-id="projectId"
      v-on:load="editorLoaded"
    />
  </div>
</template>

<script>
  import { EmailEditor } from 'vue-email-editor';

  export default {
    components: { EmailEditor },
    data() {
      return {
        projectId: 1234, // Replace with your project ID
        options: {
          displayMode: 'document',
        },
      };
    },
    methods: {
      editorLoaded() {
        console.log('Editor is ready');
      },
    },
  };
</script>

Where to get the Project ID?

1. Log in to the Developer Console
2. Create a Project
3. You can find the project ID in Project > Builder > Settings

---

What's Next

• Load & Save Designs — Load templates and persist user work.
• Export Designs — Export as HTML, PDF, images, and more.
• Deploy to Production — Set up allowed domains and go live.