boilerplate code to render a custom component, we need to define a class that extends Oxygen's internal OxyEl class. We do this in the WordPress 'plugins_loaded' action to ensure the Oxygen plugin is loaded and OxyEl is available.

Minimal Oxygen component

<?php 

add_action('plugins_loaded', function() {
    
    class HeadingElement extends OxyEl {

        function init() 
        {

        }

        function name() {
            return 'Custom Heading';
        }
        
        function slug() {
            return "custom-heading";
        }
    
        function icon() {
    		return CT_FW_URI . '/toolbar/UI/oxygen-icons/add-icons/heading.svg';
        }
        
        function controls()
        {
            
        }
    	
        function render($options, $defaults, $content) {
            ?>
                <h1> Hello from an Oxygen Custom Element</h1>
            <?php
        }
    }
    
    new HeadingElement();
});