# Netlify CMS & Next.js Series - Allow CMS Users to edit Markdown
You'll sometimes want CMS users to have more control over the text content so they can style it any way they like. To allow this Netlify CMS has the markdown widget but you'll then need to render that content in JSX.
Let's change the Hero title to markdown so users can style the title how they like.
We'll need to change the widget type to 'markdown' in the `config.yml` file.
```yaml
filename: public/config.yml
...
fields:
- { label: "Heading", name: "heading", **widget: "markdown"** }
- { label: "Detail", name: "detail", widget: "markdown" }
...
```
## Markdown Widget
This widget is described on the Netlify CMS sites as:
> The [markdown widget](https://www.netlifycms.org/docs/widgets/#markdown) provides a fully-fledged text editor - which is based on slate - that allows users to format text with features such as headings and blockquotes.
To render markdown widgets items we'll be using `markdown-to-jsx` ***"The most lightweight, customizable React markdown component."***
## markdown-to-jsx
Add the component to our project using the command:
```bash
yarn add markdown-to-jsx
```
**NOTE:** I recommend you [check out](https://www.npmjs.com/package/markdown-to-jsx#optionsoverrides---rendering-arbitrary-react-components) the `markdown-to-jsx` `options.overrides` its an amazing feature that makes it possible to dynamically render almost any React component.
## Markdown wrapper
`markdown-to-jsx` has lots of options that we may want to set. We don't want to have to set these options every time we use the component so we'll wrap to component allowing us to set the options in a single place.
```tsx
filename: components/Markdown.tsx
import React from "react";
import MarkdownToJSX from "markdown-to-jsx";
export const Markdown: React.FC = ({ children }) =>
children ? {String(children)} : null;
```
## Render the Markdown
We can now use the Markdown wrapper component to render user-editable markdown on our pages:
```html
filename: pages/index.tsx
...
import { Markdown } from "../components/Markdown";
...
...
{hero.heading}
...
```
We can use html snippets in our markdown to render the Hero title with a custom colour section:
```html
top tech companies
```
```yaml
filename: content/index.md
---
hero:
detail: Work with professional software developers and scrum masters to make your
project a reality. Minimise risk, cost and time compared to traditional
development. Have complete control and insight into your development process, just
like the best tech companies in the world.
heading: Build software like the world's top tech companies do
image: /images/hero.jpg
---
```
This gives us a splash of colour in the Hero title but more importantly, the user is now free to style the title as they like 🙂
