Every node (can) come with it's own editor contents. This consists of a seperate html file loaded into the node within the editor. This allows a developer to add inputs and other interactions for configuration of the node through the editor.

Directory structure

To host editor node contents, you will need the following structure within the directory where the structure.json for your node resides;

  • editor/
    • index.htm
    • ...

The contents of index.htm will be loaded into the body of your node in the flow editor, wrapped by a shadow DOM. Looking at the "console.log" node for example, the highlighted input field (blue outline) in the screenshot comes from it's editor/index.htm.


Focus on console.log node

Shows the editor contents for the console.log node. The highlighted input field (blue ouline) is from the index.htm belonging to the node.


The contents of your index.htm will be injected in the node directly, wrapped by a shadow DOM. For this reason, the index.htm does not need any base HTML structure, consisting of a doctype, html, head & body element. Instead, you can put the body contents directly in the index.htm.

As an example, here are the full contents of the index.htm for earlier mentioned "console.log" node;

<input  data-hideifattached="input[name=value]"  data-outputvalue="value"  type="text"  placeholder="value"  required="required"/>

Refering to other files.

Everything within the editor directory is available on the following http path: /api/nodes/node-name/editor/. Images, stylesheets, client-side javascript, etc. stored there can be loaded like you would any resource in HTML.

Special attributes

There are several HTML attributes available which allow XIBLE to determine what to do with the data. These are mainly applicable to form elements.


Sets the description for the input element.


The following example would add a description to an input element. These descriptions are visible when viewing the details of a node.

<input  data-description="Some description about what this input element is all about.">


  • Form elements, including LABEL


Hides the element when the given input or output has been connected/attached. In the form of (input|output)[name=io-name].


The following example would hide the input element when a connection is made with the "world"-output.

<input  data-hideifattached="output[name=world]">


  • Any element


Assigns the value of the form element to the nodes' data object, upon saving the flow.


In the earlier mentioned "console.log" example, the value of the input field is available for the node in NODE.data.value.

<input  data-outputvalue="value">


  • Form elements, including LABEL


The editor hides input fields by default if the corresponding node is not focussed, selected or hovered. However, if the required flag is set on an input field, it will always be visible.


In the earlier mentioned "console.log" example, the input field is always visible in the editor.

<input  required="required">


  • Form elements, including LABEL

Styling elements

To have a consistent styling in the editor, it is important to follow some rules for the more basic elements. This mostly concerns form elements such as INPUT and SELECT.

Custom styles

Because the editor contents within the node are wrapped in a shadow DOM, you can apply styling by adding a style element to your index.htm, or referring to a stylesheet using a link directive.

Please note that it is not advised to make changes to the default styling rules applicable for many form elements.


For your input elements, you do not need to create LABEL-elements, as they are automatically created for you.

If you still insist on creating them yourself, keep with the following style;

<label data-description="some description">  <input /></label>

When creating your own LABEL elements, the previously mentioned special attributes should be applied to the label element.