Puzzle.js Designer

Getting Started

There are four ways to get started:

• Work with the blank sample puzzle provided on this page by default.


• Click the “Open in Designer” button, which can be found on any example on the homepage or in the documentation.


• Select the blank sample puzzle, and then copy the source code for any existing puzzle.js puzzle and paste it into the text area in the “Import/Export” category. If the puzzle needs custom CSS to render properly, use the same technique to paste that CSS into the “Simulated Page CSS” category.


• In your existing puzzle page, press Shift + Ctrl + Alt + F12. Note that this only works if the designer and reference folders are deployed to your web site.

Editing and Exporting

This designer is a work in progress!

Once you have chosen one of the four ways of getting started, edit the properties of your puzzle using the categories and properties on the right. The name of each property is a hyperlink to the documentation for that property.

Several properties have a record button, denoted by ⭕. To work with these properties, toggle record mode on to 🔴, draw or type directly within the puzzle, and then toggle record mode back off to ⭕. The property will update when recording stops.

In recording mode for data-text, the . (editable blank cell), # (editable extract cell), and @ (uneditable black cell) characters display literally, to facilitate editing. Also, data-text-replacements is turned off for the same reason.

When done editing, go to the “Import/Export” category, copy the HTML out of the text area, and paste that into your own web page.