• Fixed breaking changes in built-in symbol outputs after WL 14.3, added a UI update separating input/output cells, and expanded styling options with new CSS classes for customization.
• Introduced a JIT transpiler for Refresh, plus new examples including Arduino hardware integration and a World of Goo-like game demo.

Tue 26 Aug 2025 09:11:25

Hot Fix 🐜​

There were some breaking changes in the output forms for built-in symbols after WL 14.3 rolled out. We fixed them. In any case, please report to us using GitHub Issues if you find something new.

UI Update​

We added a highly requested visual feature that helps to separate input cells and output cells

In the future, we will probably implement theme customization and give users a choice at startup to pick the best one, similar to VS Code.

More styling options​

WLJS Notebook is a sandbox, and you as a user can alter many things. This time our CSS classes got the attention:

• main main window
• .ccontainer cells container
• .cgroup a single group of cells: 1 input + outputs + tools
• .cframe a single inner group of cells: 1 input + outputs
• .cborder a vertical line displayed at the right side from the cell group
• .cwrapper an input/output cell wrapper
• .cseparator a thin space between cells
• .cinit a class for initialization cells
• .cin a class for input cells parent element
• .cout a class for output cells parent element
• .ttint a class applied to focused cells
• .cgi-ico a class for initialization cell group icon (usually a teal colored dot)

The vertical border-marker shown on the left side of the input cell can be styled using the following selector with pseudo-element:

.cin > :nth-child(2)::after {

}

Some input cell types can be differentiated too (a child element of one styled by .cin):

• .clang-generic a class for any unknown cell type / language
• .clang-markdown a class for input markdown cells
• .clang-html a class for input html cells
• .clang-wlx a class for input wlx cells
• .clang-js a class for input js cells
• .clang-slide a class for input slide cells

For wolfram language input cells the class field of the editor is empty.

The following classes are also available to style:

• .cout .markdown a class for markdown output cells
• .markdown h1 a set of selectors to style various markdown element
• .markdown h2
• ...

Refresh got JIT​

We added JIT transpiler to Refresh expression that works similar to Manipulate

Refresh[
  ListLinePlot[Table[Sin[x + AbsoluteTime[]] + RandomReal[{-1,1} 0.1], {x,0,10Pi,0.1}]]
, 0.2]

New Examples​

Here are some highlights:

• Arduino x WLJS (accessing real hardware!)
• Recreating a World of Goo-like game in WLJS

Read in our blog page