HTML Element Limitations

Questions
1

Hi everyone,

I’m building a fairly complex interactive HTML element in Bubble - it includes several thousand lines of CSS and vanilla JavaScript (state management, custom dropdowns, dynamic table rendering, API event hooks, etc.).

The element works well so far, but I’m wondering: are there any technical limits to how large an HTML element’s code can get in Bubble? Things like:

  • Character/byte limits in the HTML element editor
  • Performance degradation when the element mounts (parsing, layout)
  • Any known issues with large inline blocks
  • Whether Bubble processes or compresses the code at all

Has anyone run into walls with very large HTML elements? Would love to hear if there’s a recommended threshold to stay under, or if splitting into multiple elements is ever necessary.

Thanks!

2

I personally have not seen any limitations but one thing I did notice is that HTML with a lot of moving animations tend to load weirdly on bubble. Sometimes you get a flash of code on page load then the element renders. It could be because of how the html element renders the code not sure.

A tip however for large HTML elements like you described is to separate them into 2 blocks. One HTML block having your dynamic data and the second having your code. I do this when I have very complex elements which I sometimes need to edit quite a lot or tweak. It makes it a lot easier to manage when you have all your dynamic data in a separate block with ID’s that your other html block simply references. This also helps if you have your element in a hidden group, you can have the html element with the dynamic data at the very top of the page and have your main block wherever else, this allows the hidden dynamic block to render first so when the user actually uses the main block, it seems a bit faster.

3

I actually used the idea behind the hidden dynamic element to make the plugin AcessKit Pro. It basically gives users one element to fill with user permissions, roles, scope and so on. Basically whatever any bubble app would need. Then allows you to reference only that one Element in your conditions. So instead of having huge conditionals for every group, you can simply use “When AccessMap’s allowed permissions include __" or even "When AcessMap’s denied permissions include __” or whatever else you want to control who has access to what on your bubble app.

AccessKit Pro - Simplify Permissions!