.html file defines how the node appears with the editor. It
contains three distinct part, each wrapped in its own
the main node definition that is registered with the editor. This defines
things such as the palette category, the editable properties (
the edit template that defines the content of the edit dialog for the node.
It is defined in a script of type
to the type of the node.
the help text that gets displayed in the Info sidebar tab. It is defined in a
script of type
data-help-name set to the
type of the node.
A node must be registered with the editor using the
This function takes two arguments; the type of the node and its definition:
The node type is used throughout the editor to identify the node. It must
match the value used by the call to
RED.nodes.registerType in the corresponding
The node definition contains all of the information about the node needed by the editor. It is an object with the following properties:
category: (string) the palette category the node appears in
defaults: (object) the editable properties for the node.
credentials: (object) the credential properties for the node.
inputs: (number) how many inputs the node has, either
outputs: (number) how many outputs the node has. Can be
color: (string) the background colour to use.
paletteLabel: (string|function) the label to use in the palette.
label: (string|function) the label to use in the workspace.
labelStyle: (string|function) the style to apply to the label.
inputLabels: (string|function) optional label to add on hover to the input port of a node.
outputLabels: (string|function) optional labels to add on hover to the output ports of a node.
icon: (string) the icon to use.
align: (string) the alignment of the icon and label.
button: (object) adds a button to the edge of the node.
oneditprepare: (function) called when the edit dialog is being built. See custom edit behaviour.
oneditsave: (function) called when the edit dialog is okayed. See custom edit behaviour.
oneditcancel: (function) called when the edit dialog is canceled. See custom edit behaviour.
oneditdelete: (function) called when the delete button in a configuration node’s edit dialog is pressed. See custom edit behaviour.
oneditresize: (function) called when the edit dialog is resized. See custom edit behaviour.
onpaletteadd: (function) called when the node type is added to the palette.
onpaletteremove: (function) called when the node type is removed from the palette.
The edit template for a node describes the content of its edit dialog.
<script type="text/html" data-template-name="node-type"> <div class="form-row"> <label for="node-input-name"><i class="fa fa-tag"></i> Name</label> <input type="text" id="node-input-name" placeholder="Name"> </div> <div class="form-tips"><b>Tip:</b> This is here to help.</div> </script>
More information about the edit dialog is available here.
When a node is selected, its help text is displayed in the info tab. This should provide a meaningful description of what the node does. It should identify what properties it sets on outgoing messages and what properties can be set on incoming messages.
The content of the first
<p> tag is used as the tooltip when hovering over
nodes in the palette.
<script type="text/html" data-help-name="node-type"> <p>Some useful help text to introduce the node.</p> <h3>Outputs</h3> <dl class="message-properties"> <dt>payload <span class="property-type">string | buffer</span> </dt> <h3>Details</h3> <p>Some more information about the node.</p> </script>
A complete style guide for node help is available here.