> For the complete documentation index, see [llms.txt](https://stefansarya.gitbook.io/blackprint/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://stefansarya.gitbook.io/blackprint/engine/register-interface.md).

# Register Interface

### Interface?

For example, if you want to create button where you can:

* Click it on the browser
* Displaying output on browser visually
* Interacting with Browser/Node.js/Deno API
* Trigger it from external script

You will need to register it as an interface on Blackprint.

### Node element registration

[Default node](https://github.com/Blackprint/Blackprint/tree/master/src/Blackprint/nodes) (Blackprint/nodes/default) type that was used by example below is distributed on each engine.

#### Register new node interface type

An interface on browser is designed for communicate the node handler with the HTML elements. Blackprint is using ScarletsFrame to help control the element templating system and two-way data binding.

For non-browser, you will need to use `bind`for polyfilling the two-way data binding.

Let's register an interface (Please scroll down to see the node registration's example).

{% tabs %}
{% tab title="Browser" %}

```javascript
// Blackprint.registerInterface("interface/name", options, newScope)

// Template already defined in window.templates['Blackprint/nodes/default']
Blackprint.registerInterface('Blackprint/nodes/default', {
    // `iface` will extend from Blackprint.Node (Optional)
    extend: Blackprint.Node,
}, function(iface){
    // iface = ScarletsFrame component handler (that control the HTML element)

    // If the element would have value that can be exported to JSON
    // It must being set inside options object
    iface.options = {};

    // Run after this component was initialized
    iface.init = function(){
        // You can use it like jQuery
        iface.$el('.button').on('click', function(ev){

            // We call the node handler that using this component
            // `node` from Blackprint.registerNode('', (node, iface) => {})
            iface.node.onclicked(ev);
        });
    }
});
```

{% endtab %}

{% tab title="Node.js/Deno" %}

```javascript
// Engine.registerInterface("interface/name", options, newScope)

Engine.registerInterface('Blackprint/nodes/default', {
    // `iface` will extend from Blackprint.Node (Optional)
    extend: Blackprint.Node,
}, function(iface, bind){
    // If the element would have value that can be exported to JSON
    // It must being set inside options object
    bind({
      options: {}
    });
    
    // Can be accessed with iface.options

    // Run when this interface is initialized
    iface.init = function(){
        // Because Node.js/Deno doesn't have GUI
        // We will trigger it after 5 sec just for example
        setTimeout(function(){
            // We call the node handler that using this component
            // `node` from Engine.registerNode('', (node, iface) => {})
            iface.node.onclicked(ev);
        }, 5000);
    }
});
```

{% endtab %}

{% tab title="PHP" %}

```php
```

{% endtab %}

{% tab title="Python" %}

```python
# Work in progress
```

{% endtab %}
{% endtabs %}

Small example for using registered element above. The node registration structure should be similar with different engine implementation.

{% tabs %}
{% tab title="Browser" %}

```javascript
// -> (namespace, callback)
Blackprint.registerNode('myspace/button', function(node, iface){
    // Use node handler from sketch.registerInterface('Blackprint/nodes/default')
    iface.interface = 'Blackprint/nodes/default';
    iface.title = "My simple button";

    // Called after `.button` have been clicked
    node.onclicked = function(ev){
        console.log("Henlo", ev);
    }
});
```

{% endtab %}

{% tab title="Node.js/Deno" %}

```javascript
// -> (namespace, callback)
Engine.registerNode('myspace/button', function(node, iface){
    // Use node handler from sketch.registerInterface('Blackprint/nodes/default')
    iface.interface = 'Blackprint/nodes/default';
    iface.title = "My simple button";

    // Called after `.button` have been clicked
    node.onclicked = function(ev){
        console.log("Henlo", ev);
    }
});
```

{% endtab %}

{% tab title="PHP" %}

```php
```

{% endtab %}

{% tab title="Python" %}

```python
 # Work in progress
```

{% endtab %}
{% endtabs %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://stefansarya.gitbook.io/blackprint/engine/register-interface.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.