> For the complete documentation index, see [llms.txt](https://readme.directual.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://readme.directual.com/plugins/developing-plugins/developing-web-plugins.md).

# Developing Web-plugins

### Field description

| Field                              | Description                                                                                                                       |
| ---------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
| Parameters/**JS libraries**        | This is the URL to a JavaScript file that is loaded on your page. For example, jQuery library, graph library, and others.         |
| General/**shared parameters**      | These parameters are available in scripts and are filled in only during plugin installation.                                      |
| Web-components/step/**Initialize** | Initialize script: This code runs with the first page load. You can create or modify the DOM, display loading messages, and more. |
| Web-components/step/**Update**     | Update script: This script runs when all data is loaded, and the DOM is fully rendered.                                           |
|                                    |                                                                                                                                   |

## Creating a 'Hello World' Plugin

### **Preparation**

1. Add the plugin to your application. To do this, go to the "Status and Actions" section and enter your app's system name into the form.

![](/files/CvTPHgNAH4GVw0WEVZgl)

The image above is an example: I added my application 'evp,' and now I can see my plugin in my app!

2\. Install your plugin in your app.

![](/files/RcMCKaKDIcELw8a98j0X)

3\. Insert your plugin into your web page for debugging.

![](/files/ZLwYQFfiwBDdMT2fBy3z)

### **Writing Your First Plugin**

Now you are ready to write your first plugin:

Insert the following code to initialize the block:

```javascript
function(instance, context) {

  div = $('<div id="myDiv">loading...</div>');
  div.css('width', '300px');
  div.css('height', '300px');
  div.css('background', 'red');
  div.css('color', '#FFF');

  instance.canvas.append(div);

}
```

After refreshing the page, you should see the following result.

![](/files/7BDsjl39J5DI91OB3SFM)

Insert the following code into the update section:

```javascript
function(instance, properties, context) { 

 var ctx = $("#myDiv") 
// or you could call native: document.getElementById('myDiv');
// or you call instance.canvas.text("test")

 ctx.text("test")

}
```

Now, take a look at the image:

![](/files/USArMoeAoluDEVxbPChu)

You can run any JavaScript code in the update section, and you also have access to variables and parameters. For example, if you have a component parameter named "test" and you've set its value as "World," you can access and use it within your JavaScript code in the update section.

![](/files/9uBIhvbBWecumTac8Oet)

and if you change the script:

```javascript
function(instance, properties, context) { 

 var ctx = $("#myDiv") 
// or you could call native: document.getElementById('myDiv');
// or you call instance.canvas.text("test")
 ctx.text(context.name)

}
```

you will see parameter on the page.

![](/files/x712dUFjHMLVG4CpQZ78)