cubing/twisty

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

cubing.js is a library for showing and playing with twisty puzzles. You may use it for free in any website or app.

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="https://cdn.cubing.net/v0/js/cubing/twisty"
          type="module"></script>

Create any number of players, like this:


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

Try it.

Parameters

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


          <twisty-player

              puzzle="4x4x4"

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

              hint-facelets="none"

              back-view="top-right"

              background="none"

            ></twisty-player>

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:


          <twisty-player

              style="width: 256px;

                     height: 192px;

                     margin: auto;

                     background: #0088ff22;

                     border: 4px double #00000044;"

              puzzle="fto"

              alg="[R: [B', R F R']]"

              hint-facelets="none"

              back-view="side-by-side"

              background="none"

            ></twisty-player>

(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:


          <twisty-player

            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"

          ></twisty-player>

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.


          <twisty-player

            experimental-setup-anchor="end"

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

          ></twisty-player>

2D visualization

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


          <twisty-player

            alg="M2 E2 S2"

            visualization="2D"

          ></twisty-player>

2D LL visualization


                      <twisty-player

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

                   experimental-setup-anchor="end"

                        visualization="experimental-2D-LL"

                        background="none"

                        control-panel="none"

                      ></twisty-player>

Stickering

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


                <twisty-player

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

                   experimental-setup-anchor="end"

                  experimental-stickering="OLL"

                ></twisty-player>

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


                <twisty-player

                  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"

                  experimental-stickering="Cross"

                ></twisty-player>

JavaScript features

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


        
          <script type="module">

      import { TwistyPlayer } from "https://cdn.cubing.net/v0/js/cubing/twisty";

      

      const player = new TwistyPlayer({

        puzzle: "4x4x4",

        alg: "R U R'",

        hintFacelets: "none",

        backView: "top-right",

        background: "none"

      });

      document.body.appendChild(player);

      

      // You can also change parameters after you've constructed the player:

      player.backView = "side-by-side";

      </script>

Try it.

There are more experimental features available — such as twistyPlayer.play() — 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!)