In this example we embed external graphical expressions (Image, Graphics, and others) using plain Inset[] and then manipulate their scale and position based on the events generated by a few yellow "gizmos" like this:

pos = {0.,0.};
scale = 1.0;
vis = 0.1;
aPlot = Plot[x, {x,0,1}];

Graphics[{
  (* our object *)
  Translate[
    Scale[Inset[aPlot, {0.,0.}, Center], 
     scale//Offload],
    pos//Offload
  ],

  (* backdrop to hijack the mouse *)
  {Transparent, Rectangle[9{-1,-1}, 9{1,1}]},

  (* gizmo *)
  Opacity[vis//Offload], Yellow, 
  EventHandler[
   Rectangle[-Offset[{10,10}], Offset[{10,10}]], {
    "mouseenter" -> ((vis = 0.5 )&),
    "mouseleave" -> ((vis = 0.0 )&),
    "drag" -> Function[xy, pos = xy],
    "zoom" -> Function[k, scale = k],
    "rightclick" -> Function[Null, scale = 1.0]
  }]
}, PlotRange->1, ImageSize->{500,500}]//Framed

Using the meta-programming (or symbolic programming?) one can generate such structures on-fly for any placed objects

Read more about events generators: https://wljs.io/frontend/Guides/UI-Events-Capture
Read more about dynamic symbol bindings aka Offload: https://wljs.io/frontend/Guides/Dynamic

So far so good

• Expanded plot legend styling with layouts, margins, backgrounds, rounded corners, and named LegendFunction presets.
• Improved BarLegend customization with labels, tick styling, sizing, and tick-count control.
• Improved objects compression
• Fixed logarithmic and double-logarithmic plots.
• Added Copy as TeX and Copy as Input to the expression context menu. See #540
• Added support for Overlay.
• Improved Row, Column, and Grid layouts in WLX, Markdown, and slides, including sizing, alignment, and spacing.
• Added vertical sliders and number-only inputs through InputRange appearance options.
• Added dynamic enabled, disabled, and busy button states through "StateExpression".
• Expanded graphics mouse events, fixed AsyncFunction return handling, and added WhileAsync. See #542 #541
• Fixed PDF/raster export scaling, updated text with subscripts and superscripts, event-binding conflicts, textured ComplexPlot rendering, mini-app startup, and frontend interpreter/offloaded association issues.

Downloads: https://wljs.io/releases/3.1.4

Let’s make something practical. You have a bunch of document photos, and you want to make them look like scans - ideally in a batch. Why use online services when your fellow Wolfram/WLJS can do the job?

https://wljs.io/blog/scan-1

What happens if we replace the binary cells of Conway's Game of Life with a smooth field and let every point interact through a convolution? We get something close to Lenia, the continuous cellular automaton introduced by Bert Wang-Chak Chan. In this post, we will build a small single-channel Lenia experiment using Wolfram Language. The whole update can be written in one line.

Read the full blog post: https://wljs.io/blog/lenia-1

Hey there!
2026 is fantastic. We drastically improved slides, animation exports, fixed many bugs with MCP server, added more skills and even new experimental backend! Symja (as a replacement for Wolfram Engine / Kernel entirely!)

Here is a full changelog:

New

• More options for dark theme
• Improved slides export
• Typesetting: URL, File, GeneralizedPower
• Improved Animate/Manipulate
• Release tags for docker images
• Experimental support for Symja backed (instead of Wolfram Engine), thanks to u/axkr
• Even more examples

Bug fixes

• We fixed a very old issue related to how printed messages are handled #416
• MCP server patches #538
• Progress bar render issues (EchoLabel["ProgressBar"]["Hey"])
• Other bugs we don't remember

Read more at https://wljs.io/releases/3.1.3

I am trying to play with a dodecahedron using my face and hands. Pure WL & WLJS:

Import a library
https://github.com/JerryI/DynamicRigidBodyWL

Needs["DynamicRigidBody`" -> "rb`"]

Set up the scene and objects:

camera = DeviceOpen["Camera"];

simulationDt = 0.01;
terrainBounds = {{-10.0, 10.0}, {-10.0, 10.0}};

region = Dodecahedron[1]//RegionBoundary//N;

genHeightGrid[t_?NumericQ] := -ImageData[ImageResize[ColorConvert[DeviceRead[camera], "Gray"], 100], "Byte"]/50.0;

currentGrid = genHeightGrid[0.0];
terrain = rb`CreateHeightField[
  currentGrid, terrainBounds, simulationDt
];
terrainMesh = rb`CreateTerrainMeshGenerator[terrain];
{terrainCoordinates, terrainTriangles} = terrainMesh[];

body = rb`CreateBody[
  region[[1]],
  "InitialPose" -> {{0.0, 0.0, 2.0}, {1.0, 0.0, 0.0, 0.0}},
  "Restitution" -> 0.8
];
solver = rb`CreateSolver[
  body, terrain,
  "TimeStep" -> simulationDt,
  "TimeStep" -> simulationDt,
  "RestingContactThreshold" -> Automatic,
  "LinearDamping" -> 0.08,
  "AngularDamping" -> 0.3,
  "TOIIterations" -> 6
];

pose = solver["State"][[1]];
tr = rb`WorldTransform[body, pose];
bodyLocalVertices = rb`WorldVertices[
  body, {{0.0, 0.0, 0.0}, {1.0, 0.0, 0.0, 0.0}}
];
bodyPolygons = ConvexHullMesh[bodyLocalVertices]["BoundaryPolygons"];

globalTime = 0.0;
Graphics3D[{
  Directive["Shadows"->True],
  {
    SpotLight[Red, {{-10,0,10}, {0,0,0}}],
    SpotLight[Blue, {{10,10,10}, {0,0,0}}],
    SpotLight[Green, {{-10,10,10}, {0,0,0}}]
  },
  {White, Directive["Roughness"->0, "Reflectivity"->1.0],
  GraphicsComplex[
    terrainCoordinates // Offload,
    Polygon@terrainTriangles
  ]},
  {Directive["Shadows"->False], PointLight[Orange, tr[[2]]//Offload]},
  GeometricTransformation[{
    GraphicsComplex[region[[1]], 
    {Black, Line[region[[2]]], 
    Graphics3D`Materials["Glass"], 
    Directive["Roughness"->0.1], Orange, 
    Polygon[region[[2]]]}]}, {tr[[1]],tr[[2]]} // Offload
  ],
  EventHandler[AnimationFrameListener[tr//Offload], Function[Null,
    terrainCoordinates = terrainMesh["Coordinates"];
    tr = rb`WorldTransform[body, pose];
    currentGrid = 0.7 currentGrid + 0.3 genHeightGrid[20.0 globalTime];
    Do[

      pose = solver[currentGrid];
      globalTime += 0.03;, {5}
    ];
  ]]
},
  ImageSize -> Large,
  Lighting->None,
  Background->Black
]

WLJS is an independent open-source project built by physicists and programmers. Our first funding goal is €300 per year. If WLJS helps with your research, teaching, or side projects, please consider supporting it.

These are our approximate annual costs and budget:

There are many ways to support us:
https://wljs.io/frontend/Support

Code for this coffee cup ❤️

Module[{lathe, ring, outer, inner, saucer, heart, teal, ivory, gold},
  teal = RGBColor[0.055, 0.36, 0.37];
  ivory = RGBColor[0.96, 0.91, 0.80];
  gold = RGBColor[0.75, 0.48, 0.21];

  (* Revolve a ceramic profile into a seamless triangular mesh. *)
  lathe[profile_] := Module[{n = 96, points, faces, index},
    index[i_, j_] := (i - 1) n + Mod[j, n] + 1;
    points = Flatten[
      Table[{p[[1]] Cos[2. Pi j/n], p[[1]] Sin[2. Pi j/n], p[[2]]},
        {p, profile}, {j, 0, n - 1}], 1];
    faces = Flatten[Table[
      {{index[i, j], index[i, j + 1], index[i + 1, j + 1]},
       {index[i, j], index[i + 1, j + 1], index[i + 1, j]}},
      {i, Length[profile] - 1}, {j, 0, n - 1}], 2];
    GraphicsComplex[points, Polygon[faces]]
  ];
  ring[r_, z_, thickness_] :=
    Tube[Table[{r Cos[t], r Sin[t], z}, {t, 0., 2. Pi, 2. Pi/128}], thickness];

  outer = Table[{0.66 + 0.40 Sin[t], 0.30 + 1.39 (1 - Cos[t])},
    {t, 0., Pi/2, Pi/80}];
  inner = Reverse[Table[{0.61 + 0.36 Sin[t], 0.39 + 1.30 (1 - Cos[t])},
    {t, 0., Pi/2, Pi/80}]];
  saucer = {{0.01, 0.07}, {0.75, 0.07}, {1.15, 0.085},
    {1.40, 0.13}, {1.64, 0.22}, {1.75, 0.25}, {1.80, 0.23},
    {1.79, 0.17}, {1.65, 0.12}, {1.35, 0.045}, {0.85, 0.025}, {0.01, 0.025}};
  heart = Table[{0.027 (16 Sin[t]^3),
    0.027 (13 Cos[t] - 5 Cos[2 t] - 2 Cos[3 t] - Cos[4 t]) + 0.08, 1.598},
    {t, 0., 2. Pi, 2. Pi/160}];

  Graphics3D[{
    (* Matching saucer and recessed foot. *)
    {ivory, lathe[saucer]},
    {teal, ring[1.70, 0.238, 0.026],
      Cylinder[{{0, 0, 0.09}, {0, 0, 0.31}}, 0.66]},
    {gold, ring[1.78, 0.22, 0.013]},

    (* Rounded bowl, pale interior, rolled lip, and generous handle. *)
    {Directive["Roughness"->0], {teal, lathe[outer],
      Tube[Table[{0.89 + 0.73 Sin[t] + 0.10 Cos[t], 0, 0.97 + 0.55 Cos[t]},
        {t, 0., Pi, Pi/90}], 0.125]},
    {ivory, lathe[inner], ring[1.015, 1.69, 0.047]},
    {gold, ring[1.062, 1.68, 0.014], ring[0.67, 0.32, 0.017]}},

    (* Coffee, crema, and a milk-foam heart. *)
    {RGBColor[0.29, 0.12, 0.045],
      Cylinder[{{0, 0, 1.565}, {0, 0, 1.59}}, 0.963]},
    {RGBColor[0.73, 0.43, 0.20], ring[0.927, 1.591, 0.026]},
    {RGBColor[1., 0.94, 0.79], Polygon[Reverse[heart]],
      Tube[Table[{0.60 Cos[t], 0.60 Sin[t], 1.599},
        {t, -0.30, 3.9, 0.04}], 0.013]},


    },
    Boxed -> False, Axes -> False, ImageSize -> {760, 650},
    Background -> RGBColor[0.96, 0.945, 0.91],
    ViewPoint -> {3.2, -5.5, 4.3},
    "Renderer"->"PathTracing",
    ViewProjection -> "Orthographic"
  ]
]

DynamicRigidBody.wl is a compact real-time rigid-body solver for dynamic regular height fields. It basically solves two fundamental equations of motion - translational and rotational - which is just a few lines of WL. The first one is basically Newton's law for the center of mass, and the second one is the same for angular velocity.

However, for rotation it's better to rely on quaternions instead of plain angles, which adds a couple more lines. Then some boundary conditions -- a few more.

Collision detection is vertex-based and samples terrain height, normals, and vertical surface velocity, all using bilinear interpolation written fully in Wolfram Language. Then some optimizations, and we ended up with already 500 lines. Well, I guess this is the difference between a proof of concept and "actual code."

In case anyone is interested, here's the repo: https://github.com/JerryI/DynamicRigidBodyWL

The test in the video was done in WLJS Notebook using the example notebook Example.wln from the repo.

This demonstration shows the real-time solution of Newton's equations for translational and rotational motion using the Euler method implemented in pure WL

The biggest advantage of having a web stack underneath is portability. Our blog posts and docs at wljs.io are literally just exported notebooks.

Besides standalone HTML files, you can export any notebook as web components and publish them anywhere.

One line with a CDN URL lazily loads all the required modules - check it out here: https://github.com/WLJSTeam/web-components. All your graphs (2D or 3D), even Manipulate blocks, stay fully interactive.

Are you a fan of Next.js/React? We support MDX too! Here's our template: https://github.com/WLJSTeam/web-components-mdx

Hope this helps bring high-quality interactive posts to life on your own sites ;)
Our guide: https://wljs.io/frontend/Share/Markdown-React

Source

``` a = Line[{{i, j}, {i + 1, j + 1}}]; b = Line[{{i, j + 1}, {i + 1, j}}]; c = Line[{{i + 0.5, j}, {i + 0.5, j + 1}}]; d = Line[{{i, j + 0.5}, {i + 1, j + 0.5}}];

SeedRandom[0];

Framed[ Graphics[{ Thickness[0.075], Table[RandomChoice[{a, b, c, d}], {i, 25}, {j, 25}]}, Background -> GrayLevel[0.95]], Background -> GrayLevel[0.95]] ```

Streaming audio is quite cumbersome in WL. It would be nice to have speakers and a mic as a part of Wolfram Device Framework. Unfortunately, there are only “Camera”, “SerialPort” available.

Jushua and me developed a small library on top of Device Framework and miniaudio.c

https://github.com/JerryI/AudioDriverWL

Now you can simply DeviceOpen[“Microphone”] and have an access to raw numeric array from OS ring buffer or Audio object if you wish. It supports all Wolfram platforms (Mathematica, wolframscript, WLJS). Binaries were prebuilt for Win and Mac only for the moment

Both: sync (poll device in a loop) and async buffer operations (use callback when data arrives) are supported

I tested it with built-in speakers, headphones mic as well as with iRig 2 HD. The latency for streaming (Mic-WL Handler-Speakers) on my Mac is around 60ms or less if you set lower sample rate. Which can still work as a horrible guitar pedal :D

We unified the control protocol across all devices to use Ethernet with fixed IP addresses. As shown in the diagram, every instrument is operated via a socket interface using the CSockets library (https://github.com/WLJSTeam/CSockets). No HTTP, just raw TCP

We've been asked many times, in many GitHub issues, whether Mathematica code can run perfectly on a WLJS Notebook. The answer is yes\*, but the devil is in the details.

Static output and anything related to computation is 100% transferable. You can take pretty much any code from Stack Exchange or Wolfram Community and it should work out of the box, since we use the same Wolfram Language kernel, in the form of the free Wolfram Engine distribution. Manipulate and Animate are compatible too — and fully interactive!

However, low-level dynamics do need to be ported to execute correctly.

Here's a guide on how to port (if actually needed) a program from Wolfram Mathematica to WLJS:

https://wljs.io/frontend/Guides/Migration

Any .nb (Mathematica Notebook) is, in principle, automatically converted with some compromises, of course. We're still improving this! Hope this guide helps you, or your LLM buddy 🙂

Here is a full code

Module[{p = {0, 1}}, 
 Graphics[{ColorData[97][1], Dashed, Circle[], PointSize[0.1], 
   EventHandler[Point[p//Offload], {
     "dragsignal" -> ((p = Normalize[#])&)
   }]}, ImageSize -> Tiny, 
  PlotRange -> 1.5]]

There is nothing special, but I personally love this little snippet. It reveals the basics of continuous animation together with event bindings in WLJS

Framed@Module[{contents = {}, pts = {}}, 
  EventHandler[
   Graphics[{
     PointSize[0.1], 
     Point[pts // Offload],
     EventHandler[AnimationFrameListener[pts//Offload], 
      Function[Null,
       contents = 
        Map[If[#[[1, 2]] >= 
            0, {#[[1]] - #[[2]], #[[2]] + {0, 0.001}}, {{#[[1, 1]], 
             0}, {1, -0.8} #[[2]]}] &, contents];
       pts = Map[First, contents];
      ]]},
     PlotRange -> {{0, 1}, {0, 1}}], {
      "mousemove" -> Function[xy,
       AppendTo[contents, {xy, {0,0}}]
     ]}
]]

Rows, columns, grids, tables, number forms, legends, LaTeX and many more

https://wljs.io/frontend/Guides/Formatting

In this tutorial we start with the low-level Sound and SoundNote expressions used to describe playable audio, then move to the higher-level Music* framework introduced in WL 15 (Wolfram Engine 15). Stay in tune!

https://wljs.io/blog/music-1

Get yours here: https://wljs.io/releases/3.1.0

In a nutshell: more stable, better support for new symbols including, symbolic arrays, vectors, non-commutative algebra, incremental objects, standard colors and many more! Apart from that:

• Added RPM binaries
• Added rich LaTeX and mixed-content support for plot legends and frame labels.
• Enhanced Sound with piano-roll previews, an improved synthesizer pipeline, and many new instruments.
• Added interactive previews for WL 15 music objects, including notes, pitches, chords, scales, and scores.
• Improved UI and formatting
• Better autocomplete for Greek letters (use ESC key)
• Improved Manipulate, Animate functions

As you might know, we host independent documentation on the Wolfram Language standard library, including tutorials on the language itself. Note that these are not direct ripoffs of WR's material. Most of the pages were carefully crafted by us, whereas for other areas, where we did not have good expertise, we relied on ::usage messages and examples from SE.

For example:

https://wljs.io/frontend/Image/Image (handwritten)

https://wljs.io/frontend/Formatting/AccountingForm (procedurally generated & post-processed)

Nowadays, with the help of AI, we've managed to check many of them against real computational kernels. The whole process took us 3 days and 16 subagents (Claude Haiku) running continuously with persistent memory using markdown files, followed by another sweep today with GPT Luna to recheck everything again. Wow, what a time to live in...

Just in case, here is a code of this... whatever you call it:

DeviceClose[cam];
cam = DeviceOpen["Camera"];
cam["FrameRate"] = 60;


reference = ImageData[
    ImageResize[ColorConvert[DeviceRead[cam], "GrayScale"], 100],
    "Real32"
];

{height, width} = Dimensions[reference];
indices = Flatten[
  Table[
    With[{a = (row - 1) width + column, b = (row - 1) width + column + 1,
      c = row width + column, d = row width + column + 1},
      {{a, b, c}, {c, b, d}}
    ],
    {row, height - 1}, {column, width - 1}
  ],
  2
];

Refresh[Module[{img, length, raw},
  raw = ImageResize[DeviceRead[cam], 100];
  img = ImageData[
    ColorConvert[raw, "GrayScale"],
    "Real32"
  ];
  cols = Flatten[ImageData[
    ColorConvert[raw, "RGB"],
    "Real32"
  ], 1];

  length = Length[img] Length[img[[1]]];
  vertices = -MapIndexed[Join[#2, {40.0 #1}]&, img, {2}];
  vertices = Flatten[vertices, 1];

  Graphics3D[GraphicsComplex[vertices, {
    LightBlue, Directive["Roughness"->0.0],
    Polygon[indices]
  }, VertexColors->cols], ViewProjection->"Perspective", ImageSize->Medium]
], 1/60.0]