Empty Div Removal in Press

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:

1. Content is parsed and rendered to HTML
2. All typography and post-processing is applied
3. Empty divs (<div>\s*</div> matching only whitespace) are stripped out
4. 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:

1. Check if feature is enabled: Look at your Press initialization

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

2. Temporarily disable it:

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

3. Inspect the source: Compare rendered HTML with your expected structure

4. 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 />

See Also

• Press Documentation
• Markdown Syntax
• Grid and Layout Patterns