4.6 Cleanups & Post-processing

What

Press automatically removes empty <div></div> tags from rendered HTML by default. This feature is controlled by the removeEmptyDivs option, which is enabled by default.

Why

When using Press with content management systems like Notion, empty divs often appear as artifacts of the rendering process. These empty divs can break layouts, particularly in multi-column grids where spacing elements in the CMS translate to empty HTML tags in the output.

Common Scenarios

HTML code blocks in Notion columns: When you add ```html … ```̀ blocks for styling or spacing in Notion, they may render as empty ` elements
Spacing divs: Content managers might add spacing blocks in their CMS that become empty divs in HTML
Grid layouts: Empty divs disrupt column alignment and spacing calculations

How It Works

The removal happens at the finalization stage of the rendering pipeline, after all markdown and HTML processing is complete:

Content is parsed and rendered to HTML
All typography and post-processing is applied
Empty divs (<div>\s*</div> matching only whitespace) are stripped out
The cleaned HTML is finalized

Example

Before:

<div class="grid-3">
  <div class="sm:row">
    <p>Column 1 content</p>
    <div></div>
  </div>
  <div class="sm:row">
    <p>Column 2 content</p>
  </div>
  <div class="sm:row">
    <div></div>
  </div>
</div>

After:

<div class="grid-3">
  <div class="sm:row">
    <p>Column 1 content</p>
  </div>
  <div class="sm:row">
    <p>Column 2 content</p>
  </div>
  <div class="sm:row"></div>
</div>

How to Use

Enable (Default)

const press = new Press(content, {
  renderHtmlAsRaw: true,
  removeEmptyDivs: true, // ← Enabled by default
});
await press.parse();

Disable

If you need to preserve empty divs (rare), disable the feature:

const press = new Press(content, {
  renderHtmlAsRaw: true,
  removeEmptyDivs: false,
});
await press.parse();

Benefits

✓ Clean layouts – No unexpected spacing from empty elements
✓ CMS flexibility – Content managers can add spacing in Notion without affecting output
✓ Grid stability – Multi-column layouts remain balanced
✓ Reduced DOM – Cleaner HTML output with fewer unused elements

⚠️ Important: Side Effects & Forgetting This Feature

If you’re debugging layout issues and forget that this feature is enabled, you may encounter unexpected behavior:

Potential Issues

Missing structural divs: If your custom HTML intentionally includes empty <div></div> tags for styling or layout purposes (e.g., spacing containers, flex gaps), they will be silently removed
CSS layout breaks: CSS that relies on empty div elements (e.g., div:empty { height: 2rem; }) will no longer work
JavaScript failures: If JavaScript code expects certain div elements to exist in the DOM, they won’t be there
Debugging confusion: When inspecting the rendered HTML, you may notice divs are missing and wonder why

How to Troubleshoot

If you suspect empty div removal is causing issues:

Check if feature is enabled: Look at your Press initialization

const press = new Press(content, { removeEmptyDivs: true }); // ← default

Temporarily disable it:

const press = new Press(content, { removeEmptyDivs: false });
await press.parse();
// If this fixes the issue, empty divs were the culprit

Inspect the source: Compare rendered HTML with your expected structure
Use different elements: Instead of relying on empty <div></div>, use:
- CSS classes: <div class="spacer"></div> (with attributes, won’t be removed)
- Semantic elements: <span></span>, <br>, or other HTML elements
- CSS techniques: margin, padding, gap properties instead of spacer divs

Implementation Details

The regex pattern used is: /<div>\s*<\/div>/g

This matches:

Opening <div> tag
Zero or more whitespace characters (spaces, tabs, newlines)
Closing </div> tag

Does NOT match:

Divs with content: <div>text</div>
Divs with attributes: <div class="foo"></div>
Self-closing divs: <div />