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 an npm package. 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.

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";

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: