User Interface

Boomla automatically provides some user interface features for you out of the box. Here is how you can take advantage of them.

Warning: do not use undocumented features. See our reserved namespaces.

class="o1-file" data-o1-path="//"

The class o1-file marks a HTML tag to contain a file. The attribute data-o1-path selects the file.

After marking a HTML tag to represent a file, Boomla will show an icon for you when, hovering your mouse over it and you will be able to drop files on it. With the icon, you will be able to sort files, cut/copy/paste them, show them in the IDE, etc.

Note that the entire document (page) is recognized as a file WITHOUT having this class and attribute specified. The path of this file matches that in the location bar.


Inlined contents are wrapped in a div that contains this class (among other things). Its purpose is to encapsulating the content into a box.

It sets overflow: hidden; position: relative for this purpose. Of course, this is not perfect encapsulation, you can escape it - but you shouldn’t. This is part of the Boomla philosophy borrowed from the concepts of functional programming. In the future, the platform will take further actions to enforce that contents are forced into their containing boxes.

Note that any time you want to a show an overlay greater than your box, you could as well increase your content size instead, to have enough space. For example, instead of a dropdown menu that shows an overlay, just show it inline.


Turn off all present and future graphical user interface features, like showing the icon, supporting file drop or highlighting the file on hover in structure view.


Do not show icon for this file upon hovering the mouse.


Do not allow dropping files relative to this one. The drop target highlighter is not shown either.


Do not highlight file in structure view.

class="o1-placeholder" data-o1-placeholder="1"

Specifies a dropzone for the closest tag with class="o1-file".

Note that when no ancestor has this class, the entire document (page) will be recognized as the drop target, specified by the path in the location bar.


When the Edit tab of the Toolbar is open, this class is added the the <html> element of the page. You may want to apply custom styles when in editing mode.


Make the HTML tag text editable when the Boomla Toolbar’s Edit tab is open. The attribute value specifies where to save the contents of the tag when the user presses the Save button on the Toolbar.

Possible values are:

  • name
  • title
  • body
  • attr KEY TYPE - custom file attribute key KEY of type TYPE. For example, attr foo string

The values will be stored on the represented file - selected by the closest HTML ancestor tag with class="o1-file".

Note that by default, rich text formatting (HTML) is not enabled. To enable it, add the attribute data-o1-contenteditable-format="html".


Enable rich text formatting on an editable element. See attribute data-o1-contenteditable for more details.


If you want to position an element fixed to the top of the browser window, instead of defining top = 0 in your CSS, add this class to your HTML code. Boomla will update the value of top to match the Toolbar’s height.