example.html

<script type="text/javascript"> // based on the wait node
    // see https://nodered.org/docs/creating-nodes/properties and https://nodered.org/docs/creating-nodes/node-html for more information
    RED.nodes.registerType("Example", { // IMPORTANT: MUST MATCH registerType in example.js => the content of this string is the display name that'll be shown to the user
        category: "Pepper", // category to group nodes in the frontend | currently used categories: interaction, appearance, general, wait
        color: "#A6BBCF", // color of node
        defaults: { // In here you can define variables that the user can configure in the edit dialog
            time: {
                value: "5",
                required: true
            },
            text: {
                value: "This is a sample text that the user will later overwrite and that will be sent to our server."
            }
        },
        inputs: 1,
        outputs: 1,
        icon: "font-awesome/fa-clock-o",
        label: function () {
            const node = this;

            if (node.time == "") {
                return node._(node.type + ".emptyTime");
            }

            return node._(node.type + ".waitingText").replace("{}", node.time); // this allows us to dynamically incorporate the user input into our localized strings
        }
    });
</script>

<script type="text/html" data-template-name="example"> <!-- In this script tag we define the edit dialog of this specific node -->
<div class="form-row">
    <label for="node-input-time"><i class="fa fa-clock-o"></i> <span data-i18n="example.waitingTime"></span><br>(<span
            data-i18n="example.inSeconds"></span>):</label>
    <input type="number" id="node-input-time" min="1" data-i18n="[placeholder]example.waitingTime">
    <!-- this input field needs to have an id corresponding to our declared variable in the defaults object: node-input-PROPERTYNAME -->
</div> <!-- see https://nodered.org/docs/creating-nodes/edit-dialog for more information -->
<div class="form-row">
    <label for="node-input-text"><i class="fa fa-commenting-o"></i> <span data-i18n="example.text"></span>:</label>
    <input type="text" id="node-input-text" data-i18n="[placeholder]example.text">
</div>
</script>

<script type="text/html" data-template-text="example"></script>