Yeah, regular HTML is overly verbose. Being able to compose JSX generating functions and using regular JavaScript logic for loops, conditions etc. wins out for me though because realistic HTML gets big and messy otherwise. Can you do something like this in Pug? (where the actual HTML would be more complex, so you'd want to split it up like this)

    const elToolbar = generateToolbar(toolbarItems) // returns JSX
    const elUserCards = users.map(user => <div class="card card-body fw-bold">{{ user.name }}</div>)

    return <div>
        {elToolbar}
        {elUserCards}
    </div>

I find doing something similar with Vue HTML templates has far too much boilerplate, and I have to learn/recall all this Vue specific boilerplate instead of using regular functions so I end up not breaking up my HTML as much. Unless there's a way to do something similar within in a single file?