\
**Category:** Elements API\
**Created:** [July 25, 2024, 8:24pm UTC](https://forums.realmacsoftware.com/t/custom-html-component/43860 "2024-07-25T20:24:07Z")\
**Posts on this page:** 9\
**Page:** 1
**Author:**  [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [July 25, 2024, 8:24pm UTC](https://forums.realmacsoftware.com/t/custom-html-component/43860/1 "2024-07-25T20:24:07Z")
dan messed with custom html I put in html
```auto
```
in properties put
```auto
{
"groups": [
{
"title": "Untitled",
"icon": "paintpalette",
"properties": [
{
"title": "BG Color",
"id": "customColor",
"format": "bg-{{value}}",
"themeColor": {
"default": {
"name": "red",
"brightness": 300
}
}
},
{
"title" : "widthbox",
"id": "widthbox",
"format": "w-[{{value}}px]",
"slider": {
"default" : 0,
"min" : 0,
"max" : 500,
"units": "px",
"round": true
}
},
]
}
]
}
```
I messed with the code but words, is this allowable, just made some of it up in width box
the rest of Elements seems straight forward except I cannot view in safari
but really enjoying using so far, have had some copy paste issues in custom html but maybe just me
---
**Author:**  [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [July 25, 2024, 8:36pm UTC](https://forums.realmacsoftware.com/t/custom-html-component/43860/2 "2024-07-25T20:36:59Z")
I highlight in the custom code right click no copy option some times
---
**Author:**  [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [July 25, 2024, 8:41pm UTC](https://forums.realmacsoftware.com/t/custom-html-component/43860/3 "2024-07-25T20:41:26Z")
I re-built this in a sample project and it seems to work just great…
[Here’s the sample project](https://www.realmacsoftware.com/downloads/elements/components/text-and-colour-component.elements.zip) with the working custom component. Have fun!
---
**Author:**  [@anon68150607](https://forums.realmacsoftware.com/u/anon68150607)\
**Post date:** [July 25, 2024, 8:51pm UTC](https://forums.realmacsoftware.com/t/custom-html-component/43860/4 "2024-07-25T20:51:10Z")
I so want to be able to add my own icons for custom components. 🙂
BTW while there’s lots of things to be improved in time, you can feel that Elements is going to be something special. Kudos!
---
**Author:**  [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [July 25, 2024, 9:01pm UTC](https://forums.realmacsoftware.com/t/custom-html-component/43860/5 "2024-07-25T21:01:17Z")
Dan yes it works for me, wow you added the next bit I was going to try next, I added a height as well, but I made up the bit in properties, is that ok no need to stick with copy bits from the manual, if so I can build something I want to do. Hope so, really good fun being able to do this, powerful stuff.
---
**Author:**  [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [July 25, 2024, 9:54pm UTC](https://forums.realmacsoftware.com/t/custom-html-component/43860/6 "2024-07-25T21:54:02Z")
> [@anon68150607](#):
>
> I so want to be able to add my own icons for custom components. 🙂
Yup, we almost got this done when we were adding the pdf icon support… We’ll get on to this shortly 😉
---
**Author:**  [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [July 25, 2024, 9:56pm UTC](https://forums.realmacsoftware.com/t/custom-html-component/43860/7 "2024-07-25T21:56:40Z")
> [@upssjw](#):
>
> Dan yes it works for me, wow you added the next bit I was going to try next, I added a height as well, but I made up the bit in properties, is that ok no need to stick with copy bits from the manual
You don’t need to stick to the manual, they are just examples, just try things out and see if they work. You can always ask here too!
There’s lots more we’ve actually implemented we just need to get it all added to the docs… Exciting times ahead.
I’m glad you seem to love the custom components as much as I do 😍
---
**Author:**  [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [July 25, 2024, 11:14pm UTC](https://forums.realmacsoftware.com/t/custom-html-component/43860/8 "2024-07-25T23:14:22Z")
“format”: “pb-[{{value}}%] pt-[{{value}}%]”,
I entered two values so I could control both padding top and bottom with one slider, it works, again is this as intended, don’t want to find out later, it will not work, could I enter more in the same curly brackets is there a limit
---
**Author:**  [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [July 26, 2024, 7:59am UTC](https://forums.realmacsoftware.com/t/custom-html-component/43860/9 "2024-07-26T07:59:28Z")
> [@upssjw](#):
>
> I entered two values so I could control both padding top and bottom with one slider, it works, again is this as intended,
Yes, that’s absolutely fine! Now you’ve created the property, you can use {{value}} in the code as many times as you like. Have fun!