UI-Kit 2 Issues

I created a forge-confluence template based on the UI-Kit-2(preview).

I am using this template based on the assumption that I will be able to use basic react component.

I am using the <h1>Hello!</h1> in the src\frontend\index.jsx file and I get this error

Any guide on how I can use basic react attributes to make the app work would be appreciated.

Even better, is there any way I can auto-format markdown text?

I need a way to autoformat retrieved text.

If you want headings, you should use the Heading component. I think the UI Kit doesn’t allow arbitrary components.

2 Likes

Thank you. I am trying to create a dynamic app and I need text retrieved to be autoformatted.

I think you’ll need to either process the input or use a custom UI.

1 Like

Could you go into more details or send some sources links. It will be really appreciated!

There’s no way to auto-format markdown using UI Kit and you can’t use HTML either. You can only use the components in UI Kit (like Heading as Aaron mentioned).

But if you use Custom UI you can use whatever frontend components you like. See this guide for help getting started.

If you like, you can use components from atlassian.design in you Custom UI app.

1 Like

Thank you. It seems like I will have to find a way to implement the components. I am still a little curious on how other developers where able to implement markdown auto-format since it’s an app in the marketplace.

You could write your own code to do it in UI Kit 2

e.g. convert markdown # Heading level 1 to the matching UI Kit components <Heading size="large">Heading level 1</Heading>

Or if you use Custom UI then you could use whatever markdown rendering library you like e.g. react-markdown - npm

3 Likes