{React.createElement(item.heading\_size, {}, item.heading)}
\
))}
\
);
};
DynamicHeading.displayName = ‘DynamicHeading’;
DynamicHeading.propTypes = {
headings: PropTypes.arrayOf(
PropTypes.shape({
heading: PropTypes.string.isRequired,
heading\_align: PropTypes.string,
heading\_color: PropTypes.string,
heading\_size: PropTypes.string.isRequired,
}),
).isRequired,
};
export default DynamicHeading;
```
this is inside of the fields file that is exported by my island, or rather the module that holds the island
```js
export const featureAuthoringGroup = {
type: ‘group’,
name: ‘featureAuthoringGroup’,
label: ‘Feature authoring form’,
expanded: true,
children: [
getDynamicHeadingField(‘featureAuthoring’),
getDynamicDescriptionField(‘featureAuthoring’),
],
};
```
then I have this helper function to get around issues with having the same field definitions within a single module. eg I can have headings and descriptions on a component, and then if there’s say a modal, I can give the modal it’s own heading and description
```js
/\*\*
\* Generates a HubSpot field group configuration for a dynamic heading component.
\* This group allows content editors to specify the heading text, size (H1-H6, P), color, and alignment.
\*
\* [@param](https://community.hubspot.com/t5/user/viewprofilepage/user-id/228859) {string} [headingIdPrefix=‘’] - An optional prefix to prepend to the IDs of the fields within the group.
\* Useful for ensuring uniqueness when this group is nested or repeated.
\* @returns {object} A HubSpot field group definition object.
\*/
export const getDynamicHeadingField = (headingIdPrefix = ‘’) =\> {
let prefix = headingIdPrefix;
if (prefix.length \> 0) {
prefix += ‘.’;
}
return {
children: [
{
allow\_new\_line: false,
default: ‘Enhanced User Experience’,
display\_width: null,
id: `${prefix}heading.heading`,
label: ‘Heading’,
locked: false,
name: ‘heading’,
required: false,
show\_emoji\_picker: false,
type: ‘text’,
validation\_regex: ‘’,
},
{
choices: [
[‘h1’, ‘H1’],
[‘h2’, ‘H2’],
[‘h3’, ‘H3’],
[‘h4’, ‘H4’],
[‘h5’, ‘H5’],
[‘h6’, ‘H6’],
[‘p’, ‘P’],
],
default: ‘h2’,
display: ‘select’,
display\_width: ‘half\_width’,
help\_text: ‘HTML heading size’,
id: `${prefix}heading.heading_size`,
label: ‘Size’,
locked: false,
multiple: false,
name: ‘heading\_size’,
preset: null,
reordering\_enabled: true,
required: true,
type: ‘choice’,
},
{
choices: colourChoices,
default: ‘primary’,
display: ‘select’,
display\_width: null,
id: `${prefix}heading.heading_color`,
label: ‘Color’,
locked: false,
multiple: false,
name: ‘heading\_color’,
preset: null,
reordering\_enabled: true,
required: true,
type: ‘choice’,
},
{
choices: [
[‘auto’, ‘Auto’],
[‘left’, ‘Left’],
[‘center’, ‘Center’],
[‘right’, ‘Right’],
],
default: ‘auto’,
display: ‘select’,
display\_width: null,
id: `${prefix}heading.heading_align`,
label: ‘Align’,
locked: false,
multiple: false,
name: ‘heading\_align’,
preset: null,
reordering\_enabled: true,
required: true,
type: ‘choice’,
},
],
display\_width: null,
expanded: false,
group\_occurrence\_meta: null,
id: `${prefix}heading`,
label: ‘Heading’,
locked: false,
name: ‘heading’,
occurrence: {
default: 0,
min: 0,
},
required: false,
tab: ‘CONTENT’,
type: ‘group’,
};
};
```
---
**Author:**  [@BMaier](https://community.hubspot.com/u/BMaier)\
**Post date:** [July 30, 2025, 2:07pm UTC](https://community.hubspot.com/t/html-entity-issue/137077/4 "2025-07-30T14:07:26Z")
This is what I’m experiencing as well. It shows up as expected when editing the page BUT when previewing the page or publishing the page it doesn not work. Can you confirm that?
---
**Author:**  [@ABainbridge](https://community.hubspot.com/u/ABainbridge)\
**Post date:** [July 30, 2025, 2:13pm UTC](https://community.hubspot.com/t/html-entity-issue/137077/5 "2025-07-30T14:13:53Z")
Look at the screenshot above the code examples. It’s working fine in that scenario with that code. you mentioned HTML Entity, what is this? you can use alt + numbers to do symbols like this that work
---
**Author:**  [@ABainbridge](https://community.hubspot.com/u/ABainbridge)\
**Post date:** [July 30, 2025, 4:18pm UTC](https://community.hubspot.com/t/html-entity-issue/137077/6 "2025-07-30T16:18:07Z")
Apologies. I didn’t see the “when published” bit previously. here’s my page after publishing and using alt + whatever number it was
---
**Author:**  [@KKuzmin](https://community.hubspot.com/u/KKuzmin)\
**Post date:** [August 1, 2025, 7:26am UTC](https://community.hubspot.com/t/html-entity-issue/137077/7 "2025-08-01T07:26:40Z")
Hi. I solved the same problem using the “decode” method of the “he” library.
> **[GitHub - mathiasbynens/he: A robust HTML entity encoder/decoder written in...](https://github.com/mathiasbynens/he?tab=readme-ov-file#hedecodehtml-options)**
>
> A robust HTML entity encoder/decoder written in JavaScript.
For example
```lia-code-sample
import "he";
const heading = he.decode(tab.heading)
```
This should help with your problem.
---
**Author:**  [@BMaier](https://community.hubspot.com/u/BMaier)\
**Post date:** [August 1, 2025, 2:39pm UTC](https://community.hubspot.com/t/html-entity-issue/137077/8 "2025-08-01T14:39:56Z")
Will try this!