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.


• Add the following two lines to your puzzle page itself (anywhere below the inclusion of puzzle.js and/or puzzle-box.js), and remove them once done editing:
  
  
  <script type="text/javascript" src="designer/puzzle-designer.js"></script>
<link rel="stylesheet" href="designer/puzzle-designer.css">

Editing and Exporting

This designer is a work in progress! Over time, it will gain better property editors and the ability to edit certain properties directly in the puzzle.

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.

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.