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

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/v0/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/v0/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/v0/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'"

Note: this requires the page to be accessed from a server (either from the internet or localhost). It will not work for file:// URLs.

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 direct imports (as well as types for TypeScript):


        
import { Alg } from "cubing/alg";

import { TwistyPlayer } from "cubing/twisty";

import { randomScrambleForEvent } from "cubing/scramble";

Most examples on this site use CDN import paths for convenient copy-and-pasting. To import from npm, remove the https://cdn.cubing.net/v0/js/ prefix from any relevant imports.

Create a project using `create-cubing-app`

If you have npm installed, you may find it easy to start a project using using create-cubing-app:


          npm create --yes cubing-app@latest my-cubing-project

  cd my-cubing-project

  npm run dev

Compatibility

The npm package should work with any modern bundlers and tools. If you are having trouble, make sure your tool is compatible with ES2022 syntax. We recommend using esbuild or tools based on esbuild, and you may find this project template a helpful start.

If you are having issues using cubing.js with a bundler, please refer to this issue with the latest compatibility details.

Code Experiments

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

API Reference

For information on the full JavaScript API, take a look at the API reference.

Contribute

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

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