MakeBoxes

MakeBoxes[expr_, form_]

defines how expr is represented in the Wolfram output cells, output slides, output WLX cells. The representation is constructed using so-called boxes - a wrapper expressions, allowing to decorate or completely alter the visible content of expression.

MakeBoxes does not evaluate expr.
form can be StandardForm, WLXForm, or any other format represented using boxes.
You can give definitions for MakeBoxes[expr,form] to specify your own rules for how expressions should be converted to boxes.
You should define the output form using TagSet.

MakeBoxes[expr, StandardForm] is applied to any visible output of Wolfram cells by default in WLJS Notebook

MakeBoxes[expr, WLXForm] is applied to any visible output of slides, WLX and markdown cells by default in WLJS Notebook

Supported forms

Used together with

Applications

It is a core concept of the notebook interface

Creating interactive objects

Used by

All graphics and interactive objects run on WLJS Interpreter, which is a minimal Wolfram Language interpreter running in the browser using JavaScript. It draws graphics and handles user interaction via JS. To explicitly run an expression on the browser's side, you need to define an output representation with ViewBox.

Decorating symbols

An advanced guide on how alter or enchance the displayed expression of a symbol

For example

...
MyJSPlot /: MakeBoxes[m: MyJSPlot[args__], StandardForm] := ViewBox[m, m]
...

where

.js

core.MyJSPlot = async (args, env) => {
	....plot the data
}

If the inner data is large, to avoid editor lags, please compress expressions into a reference using CreateFrontEndObject, i.e.:

MyJSPlot /: MakeBoxes[m: MyJSPlot[args__], StandardForm] := With[{
	b = CreateFrontEndObject[m]
},
	MakeBoxes[b, StandardForm]
]

Styling symbols

Please consider using StandardForm for the form argument to achieve these effects.

See ViewBox and BoxBox

Data preview

You can create a data preview, for example:

dataHolder /: MakeBoxes[d:dataHolder[data_], StandardForm] := With[{
  display = ListPlot[data, ImageSize->100, Axes->False, ImagePadding->None]//Panel
},
	InterpretationBox[MakeBoxes[display, StandardForm], d]
] 

dataHolder /: ListLinePlot[d_dataHolder, opts___] := ListLinePlot[d//First, opts]

dataHolder[RandomReal[{-1,1}, 100]]

dataHolder[RandomReal[{-1,1}, 100]] // ListLinePLot

For just a one-time decoration - use Interpretation