\
**Category:** Developing with Prismic\
**Tags:** nextjs\
**Created:** [June 8, 2021, 8:31pm UTC](https://community.prismic.io/t/htmlserializer-doesnt-seem-to-do-anything/5688 "2021-06-08T20:31:44Z")\
**Posts on this page:** 20\
**Page:** 1
**Author:**  [@mark](https://community.prismic.io/u/mark)\
**Post date:** [June 8, 2021, 8:31pm UTC](https://community.prismic.io/t/htmlserializer-doesnt-seem-to-do-anything/5688/1 "2021-06-08T20:31:44Z")
I have used the docs to create an htmlSerializer, but even when I hard-code content, it doesn't appear to change the output at all. Is there a step I'm missing? If I misspell the link to htmlSerializer in my Slice, it throws an error, so I _know_ it's resolving the correct path.
What I'm working with currently (for testing):
```auto
import React from 'react';
import { RichText, Elements } from 'prismic-reactjs';
import ReactPlayer from 'react-player/lazy'
// -- Function to add unique key to props
const propsWithUniqueKey = function(props, key) {
return Object.assign(props || {}, { key });
};
// -- HTML Serializer
const prismicSerializer = function(type, element, content, children, key) {
var props = {};
switch(type) {
case Elements.heading1: // Heading 1
return React.createElement('h1', propsWithUniqueKey(props, key), children);
case Elements.heading2: // Heading 2
return React.createElement('h2', propsWithUniqueKey(props, key), children);
case Elements.heading3: // Heading 3
return React.createElement('h3', propsWithUniqueKey(props, key), children);
case Elements.heading4: // Heading 4
return React.createElement('h4', propsWithUniqueKey(props, key), children);
case Elements.heading5: // Heading 5
return React.createElement('h5', propsWithUniqueKey(props, key), children);
case Elements.heading6: // Heading 6
return React.createElement('h6', propsWithUniqueKey(props, key), children);
case Elements.paragraph: // Paragraph
return {children}
case Elements.preformatted: // Preformatted
return React.createElement('pre', propsWithUniqueKey(props, key), children);
case Elements.strong: // Strong
return React.createElement('strong', propsWithUniqueKey(props, key), children);
case Elements.em: // Emphasis
return React.createElement('em', propsWithUniqueKey(props, key), children);
case Elements.listItem: // Unordered List Item
return React.createElement('li', propsWithUniqueKey(props, key), children);
case Elements.oListItem: // Ordered List Item
return React.createElement('li', propsWithUniqueKey(props, key), children);
case Elements.list: // Unordered List
return React.createElement('ul', propsWithUniqueKey(props, key), children);
case Elements.oList: // Ordered List
return React.createElement('ol', propsWithUniqueKey(props, key), children);
case Elements.image: // Image
const linkUrl = element.linkTo ? element.linkTo.url || linkResolver(element.linkTo) : null;
const linkTarget = (element.linkTo && element.linkTo.target) ? { target: element.linkTo.target } : {};
const linkRel = linkTarget.target ? { rel: 'noopener' } : {};
const img = React.createElement('img', { src: element.url , alt: element.alt || '' });
return React.createElement(
'p',
propsWithUniqueKey({ className: [element.label || '', 'block-img'].join(' ') }, key),
linkUrl ? React.createElement('a', Object.assign({ href: linkUrl }, linkTarget, linkRel), img) : img
);
case Elements.embed: // Embed
return
case Elements.hyperlink: // Image
const targetAttr = element.data.target ? { target: element.data.target } : {};
const relAttr = element.data.target ? { rel: 'noopener' } : {};
props = Object.assign({
href: element.data.url || linkResolver(element.data)
}, targetAttr, relAttr);
return React.createElement('a', propsWithUniqueKey(props, key), children);
case Elements.label: // Label
props = element.data ? Object.assign({}, { className: element.data.label }) : {};
return React.createElement('span', propsWithUniqueKey(props, key), children);
case Elements.span: // Span
if (content) {
return content.split("\n").reduce((acc, p) => {
if (acc.length === 0) {
return [p];
} else {
const brIndex = (acc.length + 1)/2 - 1;
const br = React.createElement('br', propsWithUniqueKey({}, brIndex));
return acc.concat([br, p]);
}
}, []);
} else {
return null;
}
default: // Always include a default that returns null
return null;
}
};
```
My slice:
```auto
const WideText = ({ slice }) => {
const styles = theme()
return(
)}
export default WideText;
```
---
**Author:**  [@Fares](https://community.prismic.io/u/Fares)\
**Post date:** [June 9, 2021, 3:38pm UTC](https://community.prismic.io/t/htmlserializer-doesnt-seem-to-do-anything/5688/3 "2021-06-09T15:38:40Z")
Hi Mark,
Thanks for reaching out.
In fact, it depends on the content that you have in the "slice.primary.text" that you are passing.
One way to figure out the issue is to add a log in the serializer function to see if it enters to this function and what is type of element you are passing.
And it will be also helpful to share with us your repository name (in a private message if necessary).
Looking forward to your reply,
Fares
---
**Author:**  [@mark](https://community.prismic.io/u/mark)\
**Post date:** [June 10, 2021, 1:33am UTC](https://community.prismic.io/t/htmlserializer-doesnt-seem-to-do-anything/5688/4 "2021-06-10T01:33:47Z")
I've tested with text components.
---
**Author:**  [@Fares](https://community.prismic.io/u/Fares)\
**Post date:** [June 10, 2021, 12:50pm UTC](https://community.prismic.io/t/htmlserializer-doesnt-seem-to-do-anything/5688/5 "2021-06-10T12:50:34Z")
Yes I understand, have you tried to add logs? and still need to have your repository name to debug this issue.
---
**Author:**  [@mark](https://community.prismic.io/u/mark)\
**Post date:** [June 10, 2021, 5:43pm UTC](https://community.prismic.io/t/htmlserializer-doesnt-seem-to-do-anything/5688/6 "2021-06-10T17:43:15Z")
Edit-elements
I've tried logging to no avail.
---
**Author:**  [@mark](https://community.prismic.io/u/mark)\
**Post date:** [June 15, 2021, 6:18pm UTC](https://community.prismic.io/t/htmlserializer-doesnt-seem-to-do-anything/5688/7 "2021-06-15T18:18:03Z")
Any word on this? It's been almost a week.
---
**Author:**  [@Fares](https://community.prismic.io/u/Fares)\
**Post date:** [June 16, 2021, 5:00pm UTC](https://community.prismic.io/t/htmlserializer-doesnt-seem-to-do-anything/5688/8 "2021-06-16T17:00:02Z")
Hi Mark,
What do you mean by "I've tried logging to no avail." you didn't get any logs in the console?
If you not getting anything in the logs when logging inside the prismicSerializer function then it means that you are not referring to it correctly.
The only way for me to debug this to have access to the project itself, let me know if that is possible.
Best
---
**Author:**  [@mark](https://community.prismic.io/u/mark)\
**Post date:** [June 16, 2021, 11:54pm UTC](https://community.prismic.io/t/htmlserializer-doesnt-seem-to-do-anything/5688/9 "2021-06-16T23:54:23Z")
I gave you the repo: edit-elements. What I mean is if I reference `htmlSerializer`, it doesn't throw an error. If I change the name in the reference, it throws an error, so I know that it's referencing it correctly. It's just not logging anything no matter what I put in the htmlSerializer switch block. Maybe there's a misconfig somewhere? Let me know what I need to do to give you access to the repo on Prismic's end, and if you need access to the frontend repo, I can do that as well: I'll post one slice so you can see what I'm doing, and maybe I'm doing it wrong:
WideText Slice:
```auto
import React from 'react'
import { RichText } from 'prismic-reactjs'
import { Grid, makeStyles } from '@material-ui/core'
import { prismicSerializer } from '../../prismic-serializer'
const theme = makeStyles({
textBlock: {
marginBottom: '2rem'
}
})
const WideText = ({ slice }) => {
const styles = theme()
return(
)}
export default WideText;
```
My prismic serializer file:
```auto
import React from 'react';
import { RichText, Elements } from 'prismic-reactjs';
import ReactPlayer from 'react-player/lazy'
// -- Function to add unique key to props
const propsWithUniqueKey = function(props, key) {
return Object.assign(props || {}, { key });
};
// -- HTML Serializer
const prismicSerializer = function(type, element, content, children, key) {
console.log('serializer props', type, element, content, children, key)
var props = {};
switch(type) {
case Elements.heading1: // Heading 1
return React.createElement('h1', propsWithUniqueKey(props, key), children);
case Elements.heading2: // Heading 2
return React.createElement('h2', propsWithUniqueKey(props, key), children);
case Elements.heading3: // Heading 3
return React.createElement('h3', propsWithUniqueKey(props, key), children);
case Elements.heading4: // Heading 4
return React.createElement('h4', propsWithUniqueKey(props, key), children);
case Elements.heading5: // Heading 5
return React.createElement('h5', propsWithUniqueKey(props, key), children);
case Elements.heading6: // Heading 6
return React.createElement('h6', propsWithUniqueKey(props, key), children);
case Elements.paragraph: // Paragraph
return {children}
case Elements.preformatted: // Preformatted
return React.createElement('pre', propsWithUniqueKey(props, key), children);
case Elements.strong: // Strong
return React.createElement('strong', propsWithUniqueKey(props, key), children);
case Elements.em: // Emphasis
return React.createElement('em', propsWithUniqueKey(props, key), children);
case Elements.listItem: // Unordered List Item
return React.createElement('li', propsWithUniqueKey(props, key), children);
case Elements.oListItem: // Ordered List Item
return React.createElement('li', propsWithUniqueKey(props, key), children);
case Elements.list: // Unordered List
return React.createElement('ul', propsWithUniqueKey(props, key), children);
case Elements.oList: // Ordered List
return React.createElement('ol', propsWithUniqueKey(props, key), children);
case Elements.image: // Image
const linkUrl = element.linkTo ? element.linkTo.url || linkResolver(element.linkTo) : null;
const linkTarget = (element.linkTo && element.linkTo.target) ? { target: element.linkTo.target } : {};
const linkRel = linkTarget.target ? { rel: 'noopener' } : {};
const img = React.createElement('img', { src: element.url , alt: element.alt || '' });
return React.createElement(
'p',
propsWithUniqueKey({ className: [element.label || '', 'block-img'].join(' ') }, key),
linkUrl ? React.createElement('a', Object.assign({ href: linkUrl }, linkTarget, linkRel), img) : img
);
case Elements.embed: // Embed
console.log('embed')
return
case Elements.hyperlink: // Image
const targetAttr = element.data.target ? { target: element.data.target } : {};
const relAttr = element.data.target ? { rel: 'noopener' } : {};
props = Object.assign({
href: element.data.url || linkResolver(element.data)
}, targetAttr, relAttr);
return React.createElement('a', propsWithUniqueKey(props, key), children);
case Elements.label: // Label
props = element.data ? Object.assign({}, { className: element.data.label }) : {};
return React.createElement('span', propsWithUniqueKey(props, key), children);
case Elements.span: // Span
if (content) {
return content.split("\n").reduce((acc, p) => {
if (acc.length === 0) {
return [p];
} else {
const brIndex = (acc.length + 1)/2 - 1;
const br = React.createElement('br', propsWithUniqueKey({}, brIndex));
return acc.concat([br, p]);
}
}, []);
} else {
return null;
}
default: // Always include a default that returns null
return null;
}
};
```
A product page that uses SliceZone:
```auto
import { client } from '../../../prismic-configuration'
import { Divider, Grid, Typography, makeStyles } from '@material-ui/core'
import SliceZone from 'next-slicezone'
import { useGetStaticPaths } from 'next-slicezone/hooks'
import SliceResolver from '../../../sm-resolver'
import AddToCartButton from '../../../components/AddToCartButton'
import { useEffect, useState } from 'react'
const theme = makeStyles({
'section': {
margin: '3rem auto'
},
outer: {
padding: '1rem .5rem'
},
container: {
margin: 'auto',
},
slim: {
margin: 'auto',
maxWidth: '1200px',
},
productImg: {
width: '100%',
height: 'auto',
maxWidth: '500px'
},
productTitle: {
marginTop: '3rem'
},
justifyText: {
textAlign: 'justify'
},
wideDivide: {
margin: '3em auto'
},
strike: {
textDecoration: 'line-through',
fontSize: '1.5rem',
color: '#999999'
}
})
const CategoryProduct = (props) => {
const [currentProduct, setCurrentProduct] = useState(null)
useEffect(() => {
const { product } = props
setCurrentProduct(prevState => product)
}, [currentProduct])
const product = props.product
const slices = product.data.body
const { featured_image, price, on_sale, sale_price, title, short_description } = product.data
const styles = theme()
return(
{title[0].text}
{on_sale && sale_price ? ${price} ${sale_price}
: `$${price}`}
{short_description[0].text}
)
}
export const getStaticProps = async ({params}) => {
const product = await client.getByUID('product', params.uid)
const { price, sale_price } = product.data
// Where we return the specific product's data
return {
props: {
product
}
}
}
export const getStaticPaths = useGetStaticPaths({
client: client,
type: 'product',
formatPath: (doc) => {
// Where we return paths for /category/uid for static pages
return {
params: {
category: doc.data.category.uid,
uid: doc.uid
}
}
}
})
export default CategoryProduct
```
Let me know if there's anything else you need. 🙂
---
**Author:**  [@mark](https://community.prismic.io/u/mark)\
**Post date:** [June 21, 2021, 5:11pm UTC](https://community.prismic.io/t/htmlserializer-doesnt-seem-to-do-anything/5688/10 "2021-06-21T17:11:30Z")
Any updates? If there's something else you need, just let me know. 🙂
---
**Author:**  [@Fares](https://community.prismic.io/u/Fares)\
**Post date:** [June 22, 2021, 2:19pm UTC](https://community.prismic.io/t/htmlserializer-doesnt-seem-to-do-anything/5688/11 "2021-06-22T14:19:43Z")
Hi @mark
I'm still not seeing the issue, I would need your frontend code repository to debug it.
---
**Author:**  [@mark](https://community.prismic.io/u/mark)\
**Post date:** [June 22, 2021, 10:21pm UTC](https://community.prismic.io/t/htmlserializer-doesnt-seem-to-do-anything/5688/12 "2021-06-22T22:21:54Z")
I sent you an invite to my GitLab project. 🙂
---
**Author:**  [@Fares](https://community.prismic.io/u/Fares)\
**Post date:** [June 23, 2021, 2:59pm UTC](https://community.prismic.io/t/htmlserializer-doesnt-seem-to-do-anything/5688/13 "2021-06-23T14:59:36Z")
Ok, perfect I see it, I will have a look and get back to you.
---
**Author:**  [@mark](https://community.prismic.io/u/mark)\
**Post date:** [June 23, 2021, 6:13pm UTC](https://community.prismic.io/t/htmlserializer-doesnt-seem-to-do-anything/5688/14 "2021-06-23T18:13:46Z")
Awesome, thank you! 👍
---
**Author:**  [@mark](https://community.prismic.io/u/mark)\
**Post date:** [July 3, 2021, 9:16pm UTC](https://community.prismic.io/t/htmlserializer-doesnt-seem-to-do-anything/5688/15 "2021-07-03T21:16:40Z")
Any word? I still haven't seen anything yet. Thanks!
---
**Author:**  [@Phil](https://community.prismic.io/u/Phil)\
**Post date:** [July 8, 2021, 9:54am UTC](https://community.prismic.io/t/htmlserializer-doesnt-seem-to-do-anything/5688/20 "2021-07-08T09:54:36Z")
Hi Mark,
Fares is out so I'm taking over this one for you.
Just having a look at your serializer I'm not sure I understand your use case. It looks like you are passing a youtube video directly into the HTML serializer.
This isn't the intended use, the HTML serializer basically takes the formatted text from the Prismic Rich Text field and converts it to HTML. So you could assign classes to every H1 tag on your website for example.
Can you tell me a little bit more about what you're trying to do. I see you were discussing embed dimensions in another thread. Is this related?
> [@Any way to omit dimensions, or specify fluid ones?](https://community.prismic.io/t/any-way-to-omit-dimensions-or-specify-fluid-ones/5664/9):
>
> I see. The solution would be to modify the fields once they're retrieved from the API in your application. Since these fields are specific to the video hosting site, in this case, Youtube, it is not possible to change the values that the embed has, and that is why they cannot be modified from Prismic.
Thanks.
---
**Author:**  [@mark](https://community.prismic.io/u/mark)\
**Post date:** [July 9, 2021, 10:25pm UTC](https://community.prismic.io/t/htmlserializer-doesnt-seem-to-do-anything/5688/21 "2021-07-09T22:25:52Z")
The problem is two-fold.
1. I would like to specify (or omit) dimensions to generate an embed code that is responsive.
2. I am using Material UI, and I am trying to wrap the elements in the serializer with MUI components.
---
**Author:**  [@mark](https://community.prismic.io/u/mark)\
**Post date:** [July 13, 2021, 12:16am UTC](https://community.prismic.io/t/htmlserializer-doesnt-seem-to-do-anything/5688/24 "2021-07-13T00:16:11Z")
Any word? Even passing the normal default values doesn't work when I change out even some of the words, leaving the rest of the logic in place. I gave Fares access to my repo to take a look at it, should I grant someone else access as well?
---
**Author:**  [@samlittlefair](https://community.prismic.io/u/samlittlefair)\
**Post date:** [July 16, 2021, 11:44am UTC](https://community.prismic.io/t/htmlserializer-doesnt-seem-to-do-anything/5688/26 "2021-07-16T11:44:09Z")
Hey @mark,
Sorry for the delay. Phil is out sick this week, so I'm taking over. Could you invite me to your git repo? And, to clarify, is it all elements that aren't working in the htmlSerializer — or _only_ the embed element?
Thanks,
Sam
---
**Author:**  [@samlittlefair](https://community.prismic.io/u/samlittlefair)\
**Post date:** [July 22, 2021, 3:52pm UTC](https://community.prismic.io/t/htmlserializer-doesnt-seem-to-do-anything/5688/28 "2021-07-22T15:52:01Z")
Hey @mark,
Thanks for your patience while I dug into this 🙂
I'm not sure, but it looks like you're not exporting anything from `prismic-serializer.js`. I changed line 11 to:
```auto
export const prismicSerializer = function (
```
And the HTML Serializer registered, though then it started throwing errors.
Let me know if I'm misunderstanding, though, and I'm happy to keep debugging!
Sam
---
**Author:**  [@mark](https://community.prismic.io/u/mark)\
**Post date:** [July 22, 2021, 8:58pm UTC](https://community.prismic.io/t/htmlserializer-doesnt-seem-to-do-anything/5688/29 "2021-07-22T20:58:07Z")
To be honest, the documentation (as least when I consulted it) was a bit fragmented. I'll give you a high-level idea of what my thought process is and maybe we can work from there. I appreciate you taking a look into this.
I want my editor to be able to add a Product with various slicezone items. The slicezone uses Material-UI locally. I push those into Prismic. When the [uid] page is rendered, it should pass the slices through the serializer, which is where the MUI components wrap the actual data coming from the slices. Does that make sense?
However we can make that work is totally fine with me. I just want to use `` and `` elements inside of the slices. Please let me know the best way to accommodate that. 🙂
[Next page](https://community.prismic.io/t/htmlserializer-doesnt-seem-to-do-anything/5688.md?page=2)