cubing/twisty

The main feature of cubing.js is the <twisty-player> element that can be used on any website:


            <script
              src="https://cdn.cubing.net/js/cubing/twisty"
              type="module"></script>



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

See the cubing/twisty docs for more features.

cubing/alg

At the core of cubing.js is a powerful Alg class that is compatible with all SiGN and WCA notation.


<script type="module">

          import { Alg } from "https://cdn.cubing.net/js/cubing/alg";

          

          const commutator = new Alg("[R, [U': L']]");

          commutator.invert().expand().log();

          </script>


          Alg {} "U' L' U R U' L U R'"

See the cubing/alg docs for more features.

cubing/scramble

cubing.js makes it easy to generate fair random-state scrambles.


<script type="module">

          import { randomScrambleForEvent } from "https://cdn.cubing.net/js/cubing/scramble";

          

          const scramble = await randomScrambleForEvent("333");

          scramble.log();

          </script>


          Alg {} "F' R' F' U2 B D' L' U F R B' R2 F' L2 F2 L2 D2 B R2 L2 F'"

See the cubing/scramble docs for more features.

`npm` package

cubing.js is published as cubing on npm. If you are familiar with tools like JavaScript bundlers, you can use this for development. Install the package:


        npm install cubing

Then you can use:


        
import { Alg } from "cubing/alg";

import { TwistyPlayer } from "cubing/twisty";

This should work with most tools. We recommend using Parcel to build your web apps, if you haven't picked a tool yet.

Translating package paths to the CDN

If you aren't using npm, you can use our CDN directly, by adding https://cdn.cubing.net/js/ before every imported package (like in the examples above):

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

Troubleshooting

Ignoring built-in `node` modules

The cubing.js library on npm has several dependencies, which are listed in its package.json. In addition, it contains dynamic imports that are used when the code is running in node, currently:

crypto
worker_threads

You may need to tell your tools to ignore (e.g. "exclude" or mark as "external") these imports for the browser. For example, when using esbuild: esbuild --external:crypto --external:worker_threads [other arguments]

Code Experiments

For a taste of upcoming features, check out the development experiments site.

Contribute

If you have any questions or ideas, please visit the project source on GitHub:

https://github.com/cubing/cubing.js