---
description: About Add-ons
---

# Add-ons

Since version 6.10, you can use add-on components in only 1 way.

1. Use the individual modules in the [Add-ons](https://github.com/Normal-Tangerine8609/Scriptable-HTML-Widget/tree/main/add-ons) folder. Import the selected modules you want to use and combine the results. Finally, pass it to the function when you call it. See the example below.

```javascript
const htmlWidget = importModule("html-widget")
const symbol = importModule("html-widget-symbol")
const hr = importModule("html-widget-hr")
let addons = {symbol, hr}

await htmlWidget(`
<widget>
  <hr/>
  <symbol>bolt</symbol>
</widget>
`, false, addons)
```

When using this method, it is important to declare the module importation variable as the tags' real names. If a name other than the real tag name is used, the name of the tag in the HTML will change. For example, if you declared the `<hr>` addon as `whatever` than you would enter `<whatever>` to use the hr.

```javascript
const whatever = importModule("html-widget-hr")
```

```html
<widget>
  <whatever>
</widget>
```
