UI5 Web Components to Laminar Converter

Transform HTML and UI5 web component tags into elegant Laminar-style function calls with just a few clicks.

Interactive Converter

Write or paste HTML and instantly see the Laminar code

Input HTML

Laminar Output

Examples Gallery

Browse our examples and try them in the converter

<ui5-button>Press</ui5-button>

Button("Press")

Basic Example

<ui5-button design="Emphasized">
    Emphasized
</ui5-button>

Button(
  _.design := "Emphasized"
)("Emphasized")

With Attributes

<ui5-button icon="home" end-icon="navigation-down-arrow">Button with two Icons</ui5-button>

Button(
  _.icon := IconName.home,
  _.endIcon := IconName.navigationDownArrow
)("Button with two Icons")

With Icons

<ui5-button icon="sap-icon://edit">Edit</ui5-button>

Button(
  _.icon := IconName.edit
)("Edit")

SAP Icons

<ui5-label required show-colon for="username">Username</ui5-label>

Label(
  _.required := true,
  _.showColon := true,
  _.forId := "username"
)("Username")

Boolean Attributes

<ui5-label for="nameInput">Name:</ui5-label>
<ui5-popover opener="btnOpenPopover">Content</ui5-popover>

Label(
  _.forId := "nameInput"
)("Name:")
Popover(
  _.openerId := "btnOpenPopover"
)("Content")

Special Attributes

<ui5-button>Press</ui5-button>
<ui5-button icon="sap-icon://edit">Edit</ui5-button>
<ui5-button disabled>Merge</ui5-button>

Button("Press")
Button(
  _.icon := IconName.edit
)("Edit")
Button(
  _.disabled := true
)("Merge")

Multiple Components

<ui5-calendar>
    <ui5-special-date slot="specialDates"></ui5-special-date>
</ui5-calendar>

Calendar(
  _.specialDates := SpecialDate(
    _.slot := "specialDates"
  )()
)()

With Slots

<ui5-tabcontainer>
    <ui5-tab slot="items" text="Tab 1"></ui5-tab>
    <ui5-tab slot="items" text="Tab 2"></ui5-tab>
    <ui5-tab-separator slot="items"></ui5-tab-separator>
</ui5-tabcontainer>

Tabcontainer(
  _.items := TabSeparator(
    _.slot := "items"
  )()
)()

Multiple Slots

<div>
    <ui5-label for="username" required show-colon>Username</ui5-label>
    <ui5-input id="username"></ui5-input>
</div>

div(
  Label(
    _.forId := "username",
    _.required := true,
    _.showColon := true
  )("Username"),
  Input(
    _.id := "username"
  )()
)

Nested Elements

Key Features

What makes this converter powerful and useful

Smart Tag Conversion

Seamlessly transforms UI5 web components and HTML tags into Laminar function calls with proper PascalCase naming.

Attribute Handling

Converts HTML attributes to Laminar-style with special handling for booleans, icons, and kebab-case names.

Nested Structure Support

Maintains parent-child relationships with proper nesting and handles slot elements as parameters.