Code Examples for Document Builder

Build custom components for Document Builder with Lightning web components (LWCs).

With custom components, the sky’s the limit, but these code samples can get you started on your own Document Builder customization journey.

For custom LWCs to appear on mobile document preview, you must include this code in your js-meta.xml file: <supportedFormFactor type="Small" />

Important

Static Text

The header and medium header base components come with color and padding configuration. This code creates a medium header component.

Here’s some sample code to create custom static images. This code creates a Static Image component.

Don’t use static resources, as they aren’t supported offline and are deprecated. Only use ContentAsset in your LWC. See Using Assets in LWC, How to Create Assets, and Viewing and Editing Assets.

Important

This code uses SFDX to deploy contentAssets.