# Extend htmlSerializer to add additional params
**URL:** https://community.prismic.io/t/extend-htmlserializer-to-add-additional-params/427
**Category:** Developing with Prismic
**Tags:** javascript
**Created:** [May 14, 2020, 7:08pm UTC](https://community.prismic.io/t/extend-htmlserializer-to-add-additional-params/427 "2020-05-14T19:08:16Z")
**Posts on this page:** 10
**Page:** 1
### Author:  [@tgalpin](https://community.prismic.io/u/tgalpin)
#### Post date: [May 14, 2020, 7:08pm UTC](https://community.prismic.io/t/extend-htmlserializer-to-add-additional-params/427/1 "2020-05-14T19:08:16Z")
I am trying to extend the render of the `htmlSerializer` so I can add additional dynamic params/props to the rendered HTML.
I am using Nuxt/Vue.
Can you help?
---
### Author:  [@marcellothearcane](https://community.prismic.io/u/marcellothearcane)
#### Post date: [May 15, 2020, 6:31am UTC](https://community.prismic.io/t/extend-htmlserializer-to-add-additional-params/427/2 "2020-05-15T06:31:49Z")
What additional info would you like? Please could you give us some examples?
---
### Author:  [@tgalpin](https://community.prismic.io/u/tgalpin)
#### Post date: [May 15, 2020, 3:15pm UTC](https://community.prismic.io/t/extend-htmlserializer-to-add-additional-params/427/3 "2020-05-15T15:15:58Z")
I am using the `` Vue component to render Ordered Lists (via Vue.js).\
1. I used this rather than `$prismic.asText()` because I want the content writers to have control of text hightlighting, e.g. ‘bold,’ text labels, etc…
2. And I didn’t want to rewrite the prismic logic to do this myself.
3. For Ordered Lists, however, because Prismic doesn’t allow for nested and/or nested, mixed lists, the start position for the Ordered Lists is a problem. Prismic provides (a not-super-great) solution for nested and mixed lists [https://user-guides.prismic.io/en/articles/2721186-nested-lists-using-slices](https://user-guides.prismic.io/en/articles/2721186-nested-lists-using-slices).
4. So, what I would like to do is an additional prop of “startNumber,” or something like to the `PrismicRichText` component.
5. And because any data attributes I add to the component are only added to the wrapper, not the `ol` element, I am finding workarounds.
6. Here is the file, from the node module:
```auto
import { RichText } from 'prismic-dom'
export default {
name: 'PrismicRichText',
functional: true,
props: {
field: {
type: Array,
required: true,
},
htmlSerializer: {
type: Function,
required: false,
},
wrapper: {
type: String,
required: false,
default: 'div',
}
},
render(h, {
props, data, children, parent
}) {
const { field, htmlSerializer, wrapper } = props
const innerHTML = RichText.asHtml(
field,
parent.$prismic.linkResolver,
htmlSerializer || parent.$prismic.htmlSerializer
)
return h(
wrapper,
{
...data,
domProps: {
innerHTML
},
},
)
}
}
```
Does that make sense?
There are some workarounds, but I’d prefer to be able to extend Prismic here so that I can add additional props. I think that would be cleaner and more maintainable. I also I can imagine later we’d need to add some additional props.
---
### Author:  [@marcellothearcane](https://community.prismic.io/u/marcellothearcane)
#### Post date: [May 18, 2020, 8:39am UTC](https://community.prismic.io/t/extend-htmlserializer-to-add-additional-params/427/4 "2020-05-18T08:39:00Z")
If I understand correctly, you’ll want to add a html serialiser function. You’re currently defaulting to the prismic one, which is what generates the HTML.
You can see more info [in the docs here](https://prismic.io/docs/javascript/beyond-the-api/html-serializer) (I’ve just linked the JS version - the logic is the same).
So you could have something like this:
```auto
function htmlSerialiser (type, element, content, children) {
const serialiser = {
'group-o-list-item': `${children.join('')}
`,
'o-list-item': `${children.join('')}`,
}
return serialiser[type] || null
}
```
Now you can add attributes to the `` and `- ` elements as necessary.
I create this as a method, and use `this.htmlSerialiser`, but yours is a functional component so it might not work that way and you’d have to pass it in as a prop.
---
### Author:  [@tgalpin](https://community.prismic.io/u/tgalpin)
#### Post date: [May 18, 2020, 4:40pm UTC](https://community.prismic.io/t/extend-htmlserializer-to-add-additional-params/427/5 "2020-05-18T16:40:55Z")
Thank you for the response.
I was able to create another htmlSerializer, following your above pattern and the one outlined here: [https://prismic.io/docs/vuejs/beyond-the-api/html-serializer](https://prismic.io/docs/vuejs/beyond-the-api/html-serializer)
Unfortunately, because the htmlSerializer, and how it is used, is defined in the node module, as I copy and pasted above, I don’t have access to this function to add additional params, props, etc… Meaning, all I can deal with are the `(type, element, content, children)` params. I would like to add another, dynamic one. Thus, the need to be able to extend this component.
Another way of saying this:
I would like to define this `htmlSerializer` in one of two ways:
1. Add additional params when the serializer is defined on the component:
```auto
anotherHtmlSerializer(
type,
element,
content,
children,
additionalParams,
) {
if (type === Elements.list) {
return ``;
}
if (type === Elements.oList) {
const startNum = params.startNum;
const olEl = `${children.join('')}
`;
return olEl;
}
// Return null to stick with the default behavior for everything else
return null;
},
```
And I would call it like so:
```auto
```
1. Or be able to add an additional prop field to the component like so:
```auto
```
Unfortunately, the props are defined on the htmlSerializer and I would need to extend it somehow.
In both cases I am unable to add any additional, dynamic params.
---
### Author:  [@marcellothearcane](https://community.prismic.io/u/marcellothearcane)
#### Post date: [May 19, 2020, 6:31am UTC](https://community.prismic.io/t/extend-htmlserializer-to-add-additional-params/427/6 "2020-05-19T06:31:08Z")
I’d work like this. Create this file here in your components, and import this instead of using the default `` element.
I’ve added in an additional `params` prop, and created a small html serialiser from your `` specification.
Note that you don’t have to use the Elements.oList, there’s nothing special about it - it just returns the string `group-o-list-item`.
It is a bit spaghettified at the moment, you might get on better removing the `functional` directive and rendering template tags.
```auto
import { RichText } from 'prismic-dom'
export default {
name: 'ExtendedRichText',
functional: true,
props: {
field: {
type: Array,
required: true,
},
htmlSerializer: {
type: Function,
required: false,
},
wrapper: {
type: String,
required: false,
default: 'div',
},
params: {
type: Object,
required: false,
default () {
return {}
},
},
},
render(h, {
props, data, children, parent
}) {
const { field, htmlSerializer, wrapper, params } = props
function defaultSerializer (type, element, content, children) {
if (type === 'group-o-list-item') {
const startNum = params.startNum
return `${children.join('')}
`
} else {
return null
}
}
const innerHTML = RichText.asHtml(
field,
parent.$prismic.linkResolver,
htmlSerializer || defaultSerializer
)
return h(
wrapper,
{
...data,
domProps: {
innerHTML
},
},
)
}
}
```
---
### Author:  [@Levi](https://community.prismic.io/u/Levi)
#### Post date: [May 19, 2020, 9:10am UTC](https://community.prismic.io/t/extend-htmlserializer-to-add-additional-params/427/7 "2020-05-19T09:10:22Z")
@tgalpin, you can extend the functionality of the HTML Serializer by making your HTML Serializer a closure. That is, make it a function that returns an HTML Serializer function. This will allow you to pass whatever you need to your HTML Serializer. In this case you can pass your starting number.
Then you could do something like this:
```auto
const anotherHtmlSerializer = (startingNumber) => {
return function(type, element, content, children) {
if (type === Elements.oList) {
return `${children.join('')}
`;
}
return null;
}
}
```
Does this make sense? Give this a try and let me know if you manage to get it working!
---
### Author:  [@tgalpin](https://community.prismic.io/u/tgalpin)
#### Post date: [May 19, 2020, 6:25pm UTC](https://community.prismic.io/t/extend-htmlserializer-to-add-additional-params/427/8 "2020-05-19T18:25:33Z")
That was it!
Thank you Levi. I don’t know why I didn’t think of it. 😃
---
### Author:  [@Phil](https://community.prismic.io/u/Phil)
#### Post date: [September 15, 2020, 4:46pm UTC](https://community.prismic.io/t/extend-htmlserializer-to-add-additional-params/427/9 "2020-09-15T16:46:08Z")
---
### Author:  [@system](https://community.prismic.io/u/system)
#### Post date: [December 9, 2021, 5:38pm UTC](https://community.prismic.io/t/extend-htmlserializer-to-add-additional-params/427/10 "2021-12-09T17:38:24Z")