Hello from Wolfram Language XML Extension | Wolfram Language XML Extension

Heading[Text_] := <h2 class="tracking-tight"><Text/></h2>;

<body>
  <Heading>
    Hello World!
  </Heading>
</body>

Write components with code and markup

HTML is simple, human-readable and straighforward. Having an XML nature it allows to write Wolfram Expressions as tags.

Full-featured web framework for Wolfram Language

Build a component with a shared, local or global state and predictable data synchronization.

Regular WL expression
TextString[Now]

WLX expression
<TextString>
  <Now/>
</TextString>

A superset over WL and XML

First child element is a first argument of a given function and etc. Any self-closing tags represent an own-value or down-value with options of a symbol. Outside XML tags any WL expression is valid.

ClassName = "show";

<div class="{ClassName} flex" style="color: cyan">
      Some text...
</div>

Component[OptionsPattern[]] := With[{
  Label = OptionValue["Label"]
}, 
  <h1><Label/></h1>
]

<Component Label={"Hello World!"}/>

Passing HTML/XML attributes

A symbol ClassName wrapped inside { } passed as an attrbitue to a normal HTML tag. For a normal WL function a passed XML attribute counts as an option. Unlike JSX it does not restric you on writting normal HTML, CSS, JS in the same text.

Use with or without Javascript

It's your choice if you need more control over components, DOM manipulation. If not you - can still produce fancy results using bare minimum of CSS, HTML and WL.

Columns = Table[
    <div class="lg:pr-4">
      <div class="text-base leading-7 text-gray-700 ">
        <Child/>
      </div>
    </div>
, {Child, $Children}]
  
<div class="row">
  <Columns/>
</div>

Take the most from both ecosystems

HTML/XML is a markup language by its nature. Therfore it is recommended not to use explicitly Table or If expressions inside XML tags, but rather utilize Wolfram Language for that.

App.wlx
Header := ImportComponent["Header.wlx"];
(* /* use it as WL expression */ *)
<body>
  <Header Title={"WLX is awesome"} />
</body>

Header.wlx
Title = $Options["Title"];
<h1>
  <Title/>
</h1>

Components approach

All imported wlx scripts are scoped, i.e. defined variables inside a component will not leak to the global scope. You can keep all logic, template and even controllers are within the same file or folder.

text     = "nothing";
View     = TextView[Offload[text]];
Button   = InputButton["Press me"]; 

EventHandler[Button, Function[Null, 
  text = RandomWord[]
]];

<div>
    <WLJS><View/></WLJS>
    <WLJS><Button/></WLJS>
</div>

Events system and dynamic symbols

Graph = Plot[Sin[x], {x, -2Pi, 2Pi}];

<figure style="display: inline-block">
    <WLJS Class={"h-auto max-w-full flex rounded-lg p-3 bg-gray-100"}>
        <Graph/>
    </WLJS>
    <figcaption class="text-center gap-x-4 min-w-0 mt-1 text-xs leading-5 text-gray-500">Drag - pan, wheel - zoom</figcaption>
</figure>

Plots like Mathematica, but on a Web

There are built-in Javascript libraries, which recreate Mathematica's Graphics and Graphics3D features.

EventHandler["button", Print];

<div>
  <button id="btn" type="button">Click Me!</button>
  <WebUIEventListener Id={"btn"} Event={"button"} />
</div>

WebUI Library

A set of small components are willing to help your buttons, sliders come alive.