BetterFrame/nodered/src/bf-cameras.html

<script type="text/javascript">
  RED.nodes.registerType("bf-cameras", {
    category: "BetterFrame",
    color: "#a6d4ff",
    defaults: {
      name: { value: "" },
      config: { value: "", type: "bf-config", required: true },
      label: { value: "" },
    },
    inputs: 1,
    outputs: 1,
    icon: "betterframe.svg",
    label: function () {
      return this.name || "bf cameras";
    },
    paletteLabel: "bf cameras",
  });
</script>

<script type="text/html" data-template-name="bf-cameras">
  <div class="form-row">
    <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
    <input type="text" id="node-input-name" />
  </div>
  <div class="form-row">
    <label for="node-input-config"><i class="fa fa-cog"></i> BF</label>
    <input type="text" id="node-input-config" />
  </div>
  <div class="form-row">
    <label for="node-input-label"><i class="fa fa-tag"></i> Filter label</label>
    <input type="text" id="node-input-label" placeholder="(blank = all)" />
  </div>
  <div class="form-tips">
    Outputs <code>msg.payload</code> = array of <code>{id, name, type, enabled, labels}</code>.
    Override label via <code>msg.label</code>.
  </div>
</script>