Overview

Magento 2 UI forms are built using UI Components (XML + KnockoutJS). Sometimes, you may need to render a custom HTML block or template inside the form. This can be achieved using a custom container or HTML content component.

Step-by-Step Implementation

1. Create a UI Component form XML file (or edit an existing one).
2. Add a custom container or HTML content node.
3. Link it with a block class.
4. Create a template (.phtml) file for your custom HTML.

Step 1: UI Component XML

<fieldset name="custom_section">
    <settings>
        <label translate="true">Custom Section</label>
    </settings>

    <container name="custom_html_container">
        <htmlContent name="custom_html">
            <argument name="block" xsi:type="object">
                Vendor\Module\Block\Adminhtml\CustomHtml
            </argument>
        </htmlContent>
    </container>
</fieldset>
    

Step 2: Create Block Class

namespace Vendor\Module\Block\Adminhtml;

use Magento\Backend\Block\Template;

class CustomHtml extends Template
{
    protected $_template = 'Vendor_Module::custom.phtml';
}
    

Step 3: Create Template File

    
My Custom HTML Content
    
This content is rendered inside the UI form.

    

Use Cases

• Display custom instructions or notes inside forms
• Embed charts, buttons, or dynamic HTML
• Add external integrations (API data preview)

Important Notes

• htmlContent is used to render block-based HTML inside UI forms.
• Ensure your block extends Magento\Backend\Block\Template.
• Template path should follow Magento's naming convention.
• Clear cache after changes: php bin/magento cache:flush