HTML Renders in Editor but not in preview

john.wood · 2024-10-03T00:50:12.957Z

I’m having trouble getting the styles in my HTML to render in preview. They render fine in the UI Builder.

As an example, in the screenshots you can see the H1 is honoured in the UI Builder but the text is just plain in the preview screenshot. The STRONG is honoured in both builder and preview - what am I missing?

Thanks!!

Screen Shot 2024-10-03 at 10.43.13 am1668×714 78.3 KB

dorilama · 2024-10-03T06:00:34.330Z

to check what’s rendered on the page you need to inspect the element with the developer tools of the browser. the style of the text says nothing about what’s rendered because a h1 element can be styled to have a smaller font than a paragraph.

This is what’s happening here: the html content in the editor is rendered in a sandboxed iframe for security reasons. it doesn’t inherit the styles of the app , therefore you see the default browser style where h1 elements have a bigger font size.

In the preview the html content is rendered directly in the app. it does inherit the global styles of the app, therefore you see a different appearance.

what you need to do is adding the styles you want to your html content using css.

john.wood · 2024-10-04T03:31:49.550Z

Thanks @dorilama - I will go play with styles and see how to configure what the app considers the important ones to be!