How to render data from a text editor in a next.js web page without template tags

Hello, in this post I am going to show you how to display data gotten from a text editor in your next.js website. Normally when we attempt to render data from a text editor in our web page we get the data but it renders with the template tags as shown below.

We don't want out website to look like that so in this post i'll show you how to display the data without the template tags being rendered like this

Please note i am working with ckeditor for this post.

Alright lets begin.

What you have now.

Am assuming you are trying to render the text editor data in your code within jsx like this


whereby data is the data gotten from the text editor, this method above will render the data along with the template tags. For you to render it without the template tag change your code to this

<div dangerouslySetInnerHTML={{ __html:data}}></div>

The property "dangerouslySetInnerHTML" is used to directly set html element content in a react or next.js application. With this code our page should render the text editor properly without the template tags.

Please note, if you are only using the text editor in the backend and only you and your team have access to write content with it, then this should be okay, but if the text editor is being populated with content from the frontend from random users like maybe in the comment section of your page, then i highly advise you to clean the data first before you allow it to render on your page to prevent cross-site scripting (xss) attack. Read our How to clean text editor data on next.js post to learn how its done.


We have been able to render our data from a text editor without any template tags in our next.js webpage. As always thanks for reading. You can share your thoughts about the post in the comment section below.


Hello, my name is Abubakar Zakari. Am a budding fullstack developer from Nigeria who loves developing softwares and learning new frameworks and langauges.


Select image

No comment yet




Frontend Development |Backend Development |Full Website Development |Bootstrap Website upgrades | Website Debbugging | Website Hosting & deployment


Interested in hiring me or collaborating with me on a project, click on any of the links below to get my social media handle

Or contact me via Tel: (+234)-806-225-7480 | Email:
Privacy Policy

By using our website,
you agree that devmaesters can store cookies on your device and disclose information in accordance with our privacy policy.