# Rendering \`markdown\` into \`label\`

**URL:** <https://jsonforms.discourse.group/t/rendering-markdown-into-label/63>\
**Category:** General\
**Created:** [June 22, 2020, 5:43pm UTC](https://jsonforms.discourse.group/t/rendering-markdown-into-label/63 "2020-06-22T17:43:18Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![discobot](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/discobot/32/3_2.png) [@discobot](https://jsonforms.discourse.group/u/discobot)\
**Post date:** [June 22, 2020, 5:43pm UTC](https://jsonforms.discourse.group/t/rendering-markdown-into-label/63/1 "2020-06-22T17:43:18Z")

</div>

Hi, it would be great a configurable way to support markdown in `label` or something like that.  
Which is the best way to do it?

_[[original thread](https://spectrum.chat/jsonforms/general/rendering-markdown-into-label~6aa29155-c1fc-4385-93d4-2cd6e1adfa44) by Roberto Polli]_

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [June 23, 2020, 8:01am UTC](https://jsonforms.discourse.group/t/rendering-markdown-into-label/63/2 "2020-06-23T08:01:42Z")

</div>

Hey! Do you mean the `Label` ui schema element? To support markdown there you can register a custom renderer which is capable of rendering markdown.

If you mean the `label` properties in controls I’m not so sure whether rendering markdown there is a benefit as the labels should be short and concise. To do it you also need to go the custom renderer route and register an own custom renderer for each control. The most straightforward way would be to just copy the approach of the framework where we have a common input component which is configured for each control differently.

---

<div class="post-metadata">

**Author:** ![discobot](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/discobot/32/3_2.png) [@discobot](https://jsonforms.discourse.group/u/discobot)\
**Post date:** [June 23, 2020, 10:41am UTC](https://jsonforms.discourse.group/t/rendering-markdown-into-label/63/3 "2020-06-23T10:41:15Z")

</div>

_[Roberto Polli]_

@sdirix I mean the “label” property: I have then to “fork” jsonforms duplicating code, right? Can’t I ‘extend’ the classes?

Another solution could be to define a new ui-element (eg. `type: Text`, or `type: Markdown`) where to put stuff inside. Is that a viable solution?

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [June 23, 2020, 1:35pm UTC](https://jsonforms.discourse.group/t/rendering-markdown-into-label/63/4 "2020-06-23T13:35:27Z")

</div>

I’m not sure we’re talking about the same thing. With `label` property I meant the control labels, e.g. `First Name` in the example form on [https://jsonforms.io/](https://jsonforms.io/). If you want to render markdown instead you don’t need to fork jsonforms but you will need to provide a custom renderer for each and every control as each of them is responsible for their own label. Of course you can import and reuse a lot of code of the `material-renderers` so I don’t think you need to copy/fork everything.

If you just want to render a Markdown block somewhere in the form I would go with a custom ui element (I like the suggested `type: Markdown`) and register a custom renderer for it.

---

<div class="post-metadata">

**Author:** ![discobot](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/discobot/32/3_2.png) [@discobot](https://jsonforms.discourse.group/u/discobot)\
**Post date:** [June 23, 2020, 2:47pm UTC](https://jsonforms.discourse.group/t/rendering-markdown-into-label/63/5 "2020-06-23T14:47:42Z")

</div>

_[Roberto Polli]_

@sdirix I just implemented that 😛 [jsonforms-react-seed/Markdown.tsx at master · ioggstream/jsonforms-react-seed · GitHub](https://github.com/ioggstream/jsonforms-react-seed/blob/master/src/Markdown.tsx) I think that such a feature could be intesting for jsonforms. I implemented it as a Control but probably another Class would be a better choice.

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [June 23, 2020, 3:46pm UTC](https://jsonforms.discourse.group/t/rendering-markdown-into-label/63/6 "2020-06-23T15:46:09Z")

</div>

That’s pretty cool! In general this is certainly interesting for JSON Forms however we need a proper concept of optional dependencies as I would like to avoid forcing every user of JSON Forms to also install `react-markdown` if they are not using it. [We recently did something like this (exposing `extendedMaterialRenderers`) for `Autocomplete`](https://github.com/eclipsesource/jsonforms/pull/1593) to avoid forcing the `@material-ui/lab` dependency, so maybe we can come up with a more general way of render configuration for the user.

---

<div class="post-metadata">

**Author:** ![discobot](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/discobot/32/3_2.png) [@discobot](https://jsonforms.discourse.group/u/discobot)\
**Post date:** [June 23, 2020, 4:34pm UTC](https://jsonforms.discourse.group/t/rendering-markdown-into-label/63/7 "2020-06-23T16:34:49Z")

</div>

_[Roberto Polli]_

Let me know how to pack the MarkdownRender.

---

<div class="post-metadata">

**Author:** ![discobot](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/discobot/32/3_2.png) [@discobot](https://jsonforms.discourse.group/u/discobot)\
**Post date:** [June 23, 2020, 4:34pm UTC](https://jsonforms.discourse.group/t/rendering-markdown-into-label/63/8 "2020-06-23T16:34:55Z")

</div>

_[Roberto Polli]_

😃

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [June 24, 2020, 8:40am UTC](https://jsonforms.discourse.group/t/rendering-markdown-into-label/63/9 "2020-06-24T08:40:40Z")

</div>

I’ll let you know once we have a concept ready 🙂 Feel free to suggest one if you have something in mind 😉
