cubing.js
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.
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.
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.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'"
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/js/
prefix from any relevant imports.
The npm
package should work with any modern bundlers and tools. If you are having trouble, make sure your tool is compatible with ES2020 syntax. We recommend using esbuild
or tools based on esbuild
, and you may find this project template a helpful start.
For a taste of upcoming features, check out the development experiments site.
If you have any questions or ideas, please visit the project source on GitHub: