What is the best way to create formatted text?

There may be chunks of html that I want to embed in the app, perhaps a side panel with help, some text on the sales conversion page, etc. that has paragraphs, bold, spans, divs, etc. and so on. What is the standard way to do this within Vaadin Flow? I see the Span, Html, Paragraph, and so on classes but they don’t really allow blocks of html to be embedded into a view within the Java side of the code. Not enough to warrant separating it out but enough that wrapping spans and so on in layouts doesnt’ seem like an ideal solution. Any help would be appreciated.

new Html(str) would be my first choice

The issue there is you can’t do anything like
or

if you want to add some formatting. Mainly
. Meaning if you need two lines you need two Html instances.

br is overrated, if you just need two paragraphs, just use two new Paragraph(str)

new Html requires a “root” node, if you wrap your text in e.g. a div or span or something else, you can do anything within the html string

I agree but it gets a bit disjointed is I’m trying to read the html as a chunk. Or if say I need to have a few one liners one after the other.

It seems clunky compared to how elegant the rest of the application is

Sadly those are currently the most valid solutions - building it by hand, creating your own parser from which translates html to elements or using the new Html class. I remember two issues about this, but not with high priority

https://github.com/orgs/vaadin/discussions/4315 and https://github.com/vaadin/flow-components/issues/3551

That’s even more advanced than I was thinking. I was just thinking basic raw html but I can see why they would look into going this route as well.

Very interesting

You can also take a look at the inner workings of new Html and apply that to your needs, in the end it just calls innerHTML on the client side

At that point I suspect you’re right that just adding multiple span/html instances would be easier. It still feels clunky but it looks like that’s the best solution at the moment

Thank you for the help, it’s much appreciated.

@quintessential-ibex probably interesting topic for you if you wanna improve pain points :shushing_face: especially the linked issue by Rolf

Cool. Thank you.

Drop in Viritin add-on and use RichText component. Problem solved :sunglasses: flow-viritin/src/test/java/org/vaadin/firitin/RichTextExample.java at v24 · viritin/flow-viritin · GitHub