cubing.js is a library for showing and playing with twisty puzzles.

You may use it for free in any website or app, for any personal use or if you publicly share any code that uses it.

Show an alg (no custom JavaScript!)

If you want to display an alg on a webpage, include code like this:

Include this once on your page:

<script src="" type="module"></script>

Create any number of players, like this:

<twisty-player alg="R U R' U R U2' R'"></twisty-player>

Try it.


The example above uses only the alg parameter; there are many more. Here is a player that uses a variety of parameters:

  alg="r U2 x r U2 r U2 r' U2 l U2 r' U2 r U2 r' U2 r'"

Try it.

You can view and try out more options here. Note that some combinations are not supported yet (for example, some puzzles do not work with visualization="2D" yet).

Size, background, and other styles

A twisty-player has a default width of 384px and height of 256px.

Use CSS to set the dimensions and other formatting styles of a twisty-player:

  style="width: 256px;
         height: 192px;
         margin: auto;
         background: #0088ff22;
         border: 4px double #00000044;"
  alg="[R: [B', R F R']]"

(Tip: you should set background="none" on the twisty-player to remove the default background if you want a different one.)

To have the player take up all the available space, you may also find it useful to use: width: 100%; height: 100%;

Try it.

Experimental Parameters

Parameters (or parameter values) that start with experimental may not be reliable in all situations. All experimental features will eventually be removed (either replaced with a non-experimental version of the feature, or removed completely), but you may find it convenient to try them out. Please send us feedback about your experience with experimental features.

Use a setup alg or scramble

This example also demonstrates multi-line algs:

  experimental-setup-alg="F U2 L2 B2 F' U L2 U R2 D2 L' B L2 B' R2 U2"
  alg="y x' // inspection
       U R2 U' F' L F' U' L' // XX-Cross + EO
       U' R U R' // 3rd slot
       R' U R U2' R' U R // 4th slot
       U R' U' R U' R' U2 R // OLL / ZBLL
       U // AUF"

End solved / end with the setup pattern

experimental-setup-anchor="end" will make the alg end with the solved pattern, rather than starting with the solved pattern.

If you also use experimental-setup-alg at the same time, the setup pattern (the result of applying the setup alg to the solved pattern) will be used instead of the solved pattern.

  alg="U M' U' R' U' R U M2' U' R' U r"

2D visualization

2D visualization is technically not experimental, but it's only supported for a few puzzles so far.

  alg="M2 E2 S2"

2D LL visualization

  alg="R U R' (U' D) R2 U' R U' R' U R' U R2 (D' U)"


This is very useful for showing algs that correspond to a particular step in a speedsolving method.

  alg="r U R' U R U2 r'"

Cross is currently only supported on the default D face (yellow):

  alg="y' R' D2 R' y' R' U L2'"
  experimental-setup-alg="D U2 B D2 U2 L2 B D2 R2 F R2 B U2 D B2 F U B" R" B2 D"

JavaScript features

If you have a more advanced use case, you can create a twisty-player using JavaScript:

<script type="module">
import { TwistyPlayer } from "";

const player = new TwistyPlayer({
  puzzle: "4x4x4",
  alg: "R U R'",
  hintFacelets: "none",
  backView: "top-right",
  background: "none"

// You can also change parameters after you've constructed the player:
player.backView = "side-by-side";

Try it.

There are more experimental features available — such as — but many of them will change before version 1.0 of cubing.js. Please consider contributing to help make these features stable.

Debugging and Experimenting

You can run the following in the JavaScript console (for example, in Chrome, Android Chrome, Firefox, Safari, iOS Safari, or Edge) to select the first <twisty-player> on the page: document.querySelector("twisty-player") This can be useful for tinkering with the page or trying to understand the behaviour of a twisty-player. (Try it on this page!)