Element

The element is the root container in BizzStream Markup Language (BML). It defines the outermost structure of a BML document and controls the layout and styling of its content.

Attributes

Most attributes correspond to their HTML equivalents, providing a familiar approach for those accustomed to HTML styling.

Attribute Name	Required	Type	Description
alignHorizontally	No	String	Sets the horizontal alignment of content within the element (e.g., left, center, right). This attribute is only allowed if the `display` attribute is set to `flex`.
alignVertically	No	String	Sets the vertical alignment of content within the element (e.g., top, center, bottom). This attribute is only allowed if the `display` attribute is set to `flex`.
backgroundColor	No	Hex value	Sets the background color of the element.
borderColor	No	Hex value	Sets the color of the element's border.
borderBottomColor	No	Hex value	Sets the color of the bottom border.
borderBottomWidth	No	Number	Sets the width of the bottom border in pixels.
borderLeftColor	No	Hex value	Sets the color of the left border.
borderLeftWidth	No	Number	Sets the width of the left border in pixels.
borderRadius	No	Number	Sets the radius of the element's corners, giving a rounded appearance.
borderRightColor	No	Hex value	Sets the color of the right border.
borderRightWidth	No	Number	Sets the width of the right border in pixels.
borderTopColor	No	Hex value	Sets the color of the top border.
borderTopWidth	No	Number	Sets the width of the top border in pixels.
borderWidth	No	Number	Sets the overall width of the borders in pixels.
display	No	String	Sets the display style of the element. The only allowed value is `flex`, which enables a flexible box layout design. Such a layout provides an efficient way to lay out, align, and distribute space among items in a container, even when their size is unknown or dynamic.
height	No	Number/String	Sets the height of the element, often in pixels or percentage. If the height is smaller than the size of the child elements, the child elements will be cut off.
hoverBackgroundColor	No	Hex value	Sets the background color of the element when it is hovered. Hovers are only applied when the BML is rendered in a browser.
maxWidth	No	Number/String	Sets the maximum width the element can occupy, in pixels or percentage. If the maximum width is smaller than the size of the child elements, the child elements will be cut off.
maxHeight	No	Number/String	Sets the maximum height the element can occupy, in pixels or percentage. If the maximum height is smaller than the size of the child elements, the child elements will be cut off.
opacity	No	Number	Sets the opacity level of the element, ranging from 0 (transparent) to 1 (opaque).
width	No	Number/String	Sets the width of the element, in pixels or percentage. If the width is smaller than the size of the child elements, the child elements will be cut off.

Examples

Empty BML Element

The provided BML code will not render any visual content due to the absence of essential attributes like width, height, and backgroundColor. Additionally, it lacks child elements, which are necessary for displaying content in BML. Consequently, this snippet results in no visible output on the screen:

<bml/>

BML Element That Shows a Rectangular Box

This example displays a thin, orange rectangular box that spans 50% of the width, with slightly rounded corners.

<bml width="50%" height="30" backgroundColor="#E8751C" borderRadius="5px"/>

Pixel values can be written as plain numbers (e.g., "5") or explicitly with units (e.g., "5px"); both are interpreted as pixels.

Result

<div style="background-color: #E8751C; border-radius: 5px;  height: 30px; width: 50%;"></div>

BML Element that Shows Borders

The following BML code describes a horizontally half-width, thin rectangular box with slightly rounded corners and visible orange borders:

<bml width="50%" height="30" borderColor="#000000" borderWidth="2px" borderRadius="5px"/>

Result

<div style="border: 2px solid #000000; border-radius: 5px; height: 30px; width: 50%;"></div>

BML Element that Displays Child Elements to the Right

The following BML code demonstrates a container with a nested block. Inside, there is a smaller, orange-colored block positioned at the center-right of the container.

<bml width="50%" height="30" borderColor="#000000" borderWidth="2px" borderRadius="2px" display="flex" alignHorizontally="right" alignVertically="center">
    <block width="50%" height="10" backgroundColor="#E8751C" borderRadius="2px"/>
</bml>

Result

<div style="align-items: center; border-color: #000000; border-radius: 2px; border-style: solid; border-width: 2px; display: flex;  height: 30px; justify-content: flex-end; line-height: initial; overflow: hidden; width: 50%;">
    <div style="background-color: #E8751C; border-radius: 2px; box-sizing: border-box; height: 10px; overflow: hidden; width: 50%;"></div>
</div>

BML Element With the Use of Display Flex

The display element in BML is essential for controlling how blocks are laid out on the screen. One of the most powerful ways to use it is with display="flex", which allows you to align and arrange elements dynamically — much like CSS Flexbox.

Below you can find an example that demonstrates how a parent block with multiple child blocks can be arranged using flex, margin, and alignHorizontally.

<bml width="100%" display="flex">
    <block display="flex" alignHorizontally="center">
        <block width="70%" borderRadius="5px" backgroundColor="#888888" borderRightWidth="15"
               borderRightColor="#FF0000">
            <block width="10"></block>
            <block width="100%" marginLeft="5">
                <text fontWeight="600" fontSize="14" width="100%">Main text</text>
                <text fontWeight="600" fontSize="12" opacity="0.75" width="100%" marginLeft="50">sub text</text>
                <text marginTop="5" fontWeight="400" fontSize="12" opacity="0.75" marginLeft="5" marginRight="10"
                      alignHorizontally="center">below subtext
                </text>
            </block>
        </block>
    </block>
</bml>

Result

<div
    style="width: 100%; display: flex; font-family: Ubuntu; font-size: 14px; justify-content: flex-start; align-items: flex-start; overflow: hidden; line-height: initial; position: relative;">
    <div class="bml-hoverable" style="display: flex; width: 100%; justify-content: center; align-items: flex-start; overflow: hidden; box-sizing: border-box; position: relative;">
        <div class="bml-hoverable" style="width: 70%; border-radius: 5px; background-color: rgb(136, 136, 136); border-right: 15px solid rgb(255, 0, 0); border-top-style: solid; border-bottom-style: solid; border-left-style: solid; overflow: hidden; box-sizing: border-box; position: relative;">
            <div class="bml-hoverable" style="width: 10px; overflow: hidden; box-sizing: border-box; position: relative;"></div>
            <div class="bml-hoverable" style="width: 100%; margin-left: 5px; overflow: hidden; box-sizing: border-box; position: relative;">
                <div style="font-weight: 600; font-size: 14px; width: 100%; font-family: Ubuntu; overflow: hidden; display: flex;">Main text</div>
                <div style="font-weight: 600; font-size: 12px; opacity: 0.75; width: 100%; margin-left: 50px; font-family: Ubuntu; overflow: hidden; display: flex;">sub text</div>
                <div style="margin-top: 5px; font-weight: 400; font-size: 12px; opacity: 0.75; margin-left: 5px; margin-right: 10px; width: 100%; font-family: Ubuntu; justify-content: center; overflow: hidden; display: flex;">below subtext</div>
            </div>
        </div>
    </div>
</div>