A visible placeholder for custom code component

When the custom code component is added to the page, it shows the text or HTML output in between the div tags.

But if you, say, paste some javascript in the component that has no visible output, or has to load from a third-party site, you won't see anything displayed in Bootstrap Studio. The component actually has no height, and can't be selected from the page. The only way to select it is from the Overview panel.

I used to use a website builder with a custom code component that showed the code kind of grayed out like this...

Would something like this be feasible in BSS?

Are you asking for this to show in the Preview window? I wouldn't want that if that's what you mean. If it's a script that does something they usually work in the browser preview as long as all the files are present in the app or the CDN's are. What would be the purpose of that? To me it would skew the page in previews if it showed the code block.<br /> I just use the overview pane to select them if needed, and I add Labels to them in the overview pane to show what they are for so I can find what I need easily.

I almost always know the basic positions of the custom code blocks I've added and if they have no body to them (no height, width, etc.) then I select something around where I placed it and that usually will take me where I need to be in the Overview Pane tree in order to select it.

Also when you add scripts like what you show above that have photo links in them or regular links or anything that has body, it "usually does" expand the area some to accommodate the images, even if the app can't read the images (such as the WowSlider galleries which I do in an out of BSS way where files are not in BSS), it skews the page completely in that location to the point that I have to just ignore it or check the uploaded page on the test servers. That already is a nuisance for me and makes me wish they would give us the ability to reference local project directories like a coder app would do so we can reference these things and they would show up correctly in the app.

If I'm misunderstanding please let me know so I can understand better what you're asking.

Do I agree there should be some way to see them/select them in previews easier? Yes, but just not where it's showing all the code on the page.

It doesn't necessarily have to be a big, obtrusive thing, but as a "for instance", I use a company called Jotforms for all my form needs. Jotforms allows you to embed their forms into a site using a number of methods, but their javascript method works best because it allows the embedded form to change the height of the container if the form's height changes. But when the code is placed in BSS, the form will only display in the browser preview, not the program's preview window, which is not a big deal, but it would be helpful if something displayed to let you know there is a custom code component there. Even if it's just a small box with the words "Embedded code" or "HTML Embed" or whatever.

Yeah I do know what you mean on that, but I suppose it could be something you could put a min height/width on to show the block? I've gotten used to it so that I make my complete structure before adding any real content to the pages and then when I add my forms I check to be sure they are working in the preview browser and if so I guess I don't really care from there lol.

Either way though, I do understand what you mean and why, I would just prefer it to be something that doesn't take up any more room than the actual component would is my main concern I guess. I definitely think you're right though, we should have some way to recognize it visibly in the preview window.