HTML Custom Component WYSIWYG Rendering?

Elements Beta Feedback
1

I have a Custom HTML Component that isn’t rendering in the WYSIWYG browser. It does when you click the Preview in Browser button.

Then, I noticed that even when you drag the basic Custom HTML Component onto the page, it doesn’t render that HTML either.

Not sure if this is by design or a bug but it would be very useful if it did.

2

I have the same issue, some render some do not, was going to record a video when I have 5 mins of my issues

Most of mine render in the editor but not in browser preview

Dragging doesn’t work for me, but duplicating does, some dragging does work
Might be the copy and paste bug

3

I’ve not run into this issue. Can you both post a sample project so we can take a look?

4

this is just not isolated for me, sometimes it is good then other times not, I have tried using different code etc

odd behaviour
https://we.tl/t-wN6JN2po8l

working ok
https://we.tl/t-bcEKjWt6s8

this one I don’t seem to have an issue, not finished, design your own card images texts colours transparent and 3d view, everything is sizeable and positioning
https://we.tl/t-Udx8PRavWX

5

Created a new project: https://we.tl/t-1Yy4ToNGUK

The custom HTML is at the bottom of the page between the two dividers. It doesn’t render in the WYSIWIG browser.

6

try this I changed text to black

7

my link does not work, see I added text-black

the html component has the colour below, this does not render for me, or log runner I think, perhaps by design?
text-primary-500

I added the text-black instead

type or paste code here <div id="{{id}}" class="p-sm text-lg text-center text-black" >
    My HTML Element
</div> ```
8

wetransfer does not work when I upload but can download others

9

The question remains as to why it doesn’t render in the WYSIWYG but does in Safari via the Preview in Browser button.

Shouldn’t they be the same? Either they both should render or both should not.

10

Can you check if this is fixed in the latest beta?

11

Hi Dan,
It doesn’t appear to be.

12

ill check later

13

not working for me

14

CleanShot 2024-08-13 at 20.29.28

This is what I am seeing with the Custom HTML Component.

15

same for me

16

how to you get video to play in here

17

Its a GIF image created by CleanShot App

1 Like
18

I think the problem here is that some of the example custom components like HTML have the incorrect tailwind class for specifying a text color. The text-primary-500 class should be text-brand-500 as we changed the naming of this color recently.

We’ll get this fixed up in the next beta!

When previewing in the browser, the body tag has a default color of black, hence the text is showing.

3 Likes