Quick Start

Setup

First, download the latest box-and-pointer release.

You need to include three things in the <head> of your web page in order for the <box-and-pointer> tag to work.

1. You need a <script> tag referencing jsplumb.js. You might get this by downloading the file from the repository, or by fetching it from a CDN. The .min.js version is recommended.
2. You need a <link> tag referencing box-and-pointer.css, which is included in the release. The <link> tag must have id="box-and-pointer-style".
3. You need another <script> tag referencing box-and-pointer.js, which is included in the release.

An example of including these three tags might look like this:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jsPlumb/2.11.2/js/jsplumb.min.js"></script>
<link id="box-and-pointer-style" rel="stylesheet" href="./box-and-pointer/box-and-pointer.css" />
<script src="./box-and-pointer/box-and-pointer.js"></script>

Usage

To put a box-and-pointer diagram on your site, use the <box-and-pointer> custom element. You can build structures using the <pair>, <list>, <box>, and <empty> tags inside of a <box-and-pointer> element. Additionally, S-expressions can be used. As an example, all of these three are the same:

<box-and-pointer>
    <pair>
        1
        <pair>
            2
            <pair>
                3
                <empty></empty>
            </pair>
        </pair>
    </pair>
</box-and-pointer>

<box-and-pointer>
    <list> 1 2 3 </list>
</box-and-pointer>

<box-and-pointer> (1 2 3) </box-and-pointer>

More complex structures can also be built. Any <pair> or <list> element can have a name attribute, which allows them to be referenced by a <box> element with a ref attribute elsewhere. For example:

<box-and-pointer>
    <list name="root"> 1 2 <box ref="root"></box> 3 </list>
</box-and-pointer>

produces

Note that all tags must be closed, including <box> and <empty> tags which may have no contents.

For a detailed explanation of what is allowed in a <box-and-pointer> element, visit Detailed Usage.