The Document Builder allows developers to embed a powerful drag-and-drop editor into their web applications, enabling end-users to create and edit documents. The builder provides extensive tools and customization options for creating structured content such as reports, proposals, contracts, and more.

Integration

After installing our JavaScript library, use the following code snippet to initiate the email editor. You have to pass displayMode as document, and replace your project id.

unlayer.init({
  id: 'editor-container',
  displayMode: 'document',
  projectId: 1234 // REPLACE
})

Builder In Action

Once the document builder is initialized, it will look like this.

Tools for Documents

The builder comes with the following tools out of the box.

• Columns: It allows your users to add columns to your design in order to have a better design arrangement.
• Button: Add any type of button in your email. You can change colors and styles.
• Divider: It gives your users appropriate spacing at any point they want in their design.
• Heading: Add headings (from level 1-6) to the design.
• Image: To make your emails attractive, you can add images using this tool.
• Social: It is a built-in tool that lets users add their social media icons to your design.
• Text: Text is a built-in tool so users can add text to their designs.
• Page Break: To create multi-page documents, users can use this tool, which adds a dark dotted line to represent the start of a new line.

Exporting PDF

Once the document is ready to be exported, you can use the Export PDF method to export it into a PDF file.