Skip to main content
Unlayer Docs
Version: Latest

Paragraph

Paragraph is a built-in tool so users can add text to their designs. This tool is supported for all display modes.

Enable / Disable​

Paragraph tool is enabled by default but you can choose to disable it.

unlayer.init({
  tools: {
    paragraph: {
      enabled: false,
    },
  },
});

Default Values​

Paragraph tool comes with the following default values. You can choose to change any of these.

PropertyDefault Value
textJson{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","text":"This is a new Paragraph block. Change the text.","type":"extended-text","version":1}],"format":"","indent":0,"type":"paragraph","version":1,"textFormat":0}],"format":"","indent":0,"type":"root","version":1}}
textAlignleft
fontSize14px
color#000000
lineHeight140%
containerPadding10px
fontFamilyArial, Helvetica, sans-serif

Here are a few examples on how to change these default values.

Default Text​

unlayer.init({
  tools: {
    paragraph: {
      properties: {
        textJson: {
          value:
            '{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","text":"My Paragraph","type":"extended-text","version":1}],"format":"","indent":0,"type":"paragraph","version":1,"textFormat":0}],"format":"","indent":0,"type":"root","version":1}}',
        },
      },
    },
  },
});

Font Size​

unlayer.init({
  tools: {
    paragraph: {
      properties: {
        fontSize: {
          editor: {
            defaultValue: '16px',
          },
        },
      },
    },
  },
});

Alignment​

unlayer.init({
  tools: {
    paragraph: {
      properties: {
        textAlign: {
          editor: {
            defaultValue: 'right',
          },
        },
      },
    },
  },
});

Color​

unlayer.init({
  tools: {
    paragraph: {
      properties: {
        color: {
          editor: {
            defaultValue: '#ff0000',
          },
        },
      },
    },
  },
});

Line Height​

unlayer.init({
  tools: {
    paragraph: {
      properties: {
        lineHeight: {
          editor: {
            defaultValue: '140%',
          },
        },
      },
    },
  },
});

Container Padding​

unlayer.init({
  tools: {
    paragraph: {
      properties: {
        containerPadding: {
          editor: {
            defaultValue: '10px',
          },
        },
      },
    },
  },
});

Font Family​

unlayer.init({
  tools: {
    paragraph: {
      properties: {
        fontFamily: {
          editor: {
            defaultValue: {
              value: "'Pacifico',cursive",
            },
          },
        },
      },
    },
  },
});

Please match exactly the value with one of those found in the font family configuration.

Migrating from Text Tool​

The Text tool is deprecated in favor of Paragraph. Existing templates with Text blocks can still be loaded for backward compatibility, but the legacy Text tool is no longer actively maintained or receiving new bug fixes.

Migrate Your Configuration to Paragraph​

Update your configuration from tools.text to tools.paragraph. The text property also changes: Text uses text (an HTML string), while Paragraph uses textJson (a JSON string).

Use the Default Text example above to configure Paragraph defaults. For before-and-after configuration examples, see the Text-to-Paragraph migration guide.

Migrate Existing Templates​

Changing tools.text to tools.paragraph does not convert Text blocks in stored design JSON. Use the Cloud API's Text-to-Paragraph conversion endpoint to convert existing designs.

The API returns a converted copy without creating or modifying a saved template. A Text block containing a table, image or horizontal rule can be split into Paragraph blocks plus Table, Image or Divider blocks. Review data.warnings and the converted design before saving it.

For the response fields and review steps, see Migrate Existing Templates.

Preserve Legacy Text Behavior​

If you need to retain the deprecated Text tool's functionality, use one of the compatibility options below. Duplicating a Text block or locking your builder version preserves legacy behavior; neither option migrates your blocks or configuration to Paragraph or restores active maintenance of the legacy Text tool.

Duplicate an Existing Text Block​

  1. Find an existing template that uses the Text tool.
  2. Duplicate the Text block.
  3. The duplicated Text block retains its old functionality.

Lock Your Builder Version​

Pin your builder to a stable version where the Text tool is still available. See the version locking documentation for detailed instructions.