HTMLView

HTMLView[string_String | List[strings__String] | _Offload, opts___]

a representation of an HTML element in the notebook. It is used for rendering HTML in-place, where this expression is located and also is used for dynamic indication.

HTMLView["<span style=\"color:red\">Hello World</span>"]

This is a core function behind most input elements, such as InputButton, InputText, TextView and etc.

works only if a string or a list of strings provided as input A function to be executed on the frontend before embedding HTML into DOM. You probably have to define it by yourself (see frontend symbols). It exposes in env following fields

Frontend symbols

Overview of frontend symbols / function

env.htmlContent //mutable HTML expression

There is a built-in feature for modifying the string - see below Post-template processor

`Epilog`

works only if a string or a list of strings provided as input A function to be executed on the frontend after embedding HTML into DOM. The exposed fields are

env.element //access to DOM element created

`"Style"`

a string, which sets CSS style attribute

`"Class"`

a string, which sets CSS class attribute

Template processor

There is built-in tool for post-processing HTML elements before embedding them into DOM. It can be included to the pipeline using Prolog option

HTMLView`TemplateProcessor[object_Association]

It has HoldFirst attribute and object will be evaluated on the frontend This text processor replaces all string like

#name

With a corresponding field value from object["name"].

It comes handy to create unique ID's in runtime, before a widget is rendered on a page. For example

HTMLView["<div>Unique Id #instanceId</div>", Prolog->HTMLView`TemplateProcessor[<|"instanceId" -> CreateUUID[]|>]]

It will generate a new UID for each instance even if you copy and paste one.

WLX processor

This allows to hydrate all interactive elements inseted to HTML template in WLXForm if it would be a normal WLX cell. It can be included to the pipeline using Prolog option

HTMLView`WLXProcessor[]

for example, you have WLX component, that decorates a Plot:

.wlx

wlTest[P_] := <div class="p-1 rounded" style="border: 1px solid blue"><P/></div>

.wlx

wlTest[Plot[x, {x,0,1}]]

it works perfectly fine within WLX cells. To embed it as HTMLView you provide it directly as a first argument with WLX processor in Prolog:

HTMLView[wlTest[Plot[x, {x,0,1}]], Prolog->HTMLView`WLXProcessor[]]

Transitions and updates

It fully supports updates. Use Offload on the first argument. For example

word = "";
HTMLView[word]

and then

word = "<h1>"<>RandomWord[]<>"</h1>";

HTMLView

Options

`Prolog`