To list new style/substance/domain programs in the IDE, encode it in the registry files through the steps below:

If you want to see your changes that aren't on master, navigate to the IDE url but with

?branch=mybranch

at the end, where your desired branch is mybranch. Here's an example: https://use.penrose.ink/?branch=paper-example

Edit examples/substanceLibrary.json with an object satisfying the following keys:

• substanceURI: the relative path to the .sub file from examples/

• element: The ID of the element program this .sub requires. Find this correspondence with the value and label keys in examples/elementLibrary.json

• style: The ID of the style program this .sub requires. Find this correspondence with the value and label keys in examples/styleLibrary.json

• previewURI: Optional, but strongly recommended: follow the procedures for adding an image.

• name: The title of the substance program (can be anything, including with spaces).

The substance should appear in the IDE's examples tab.

Edit examples/styleLibrary.json with an object satisfying the following keys:

• value: a unique integer ID for the style program that you must assign

• label: the style program's name (can include spaces)

• icon: Optional, but strongly recommended icon URL. It should be a square and have the properties width="100%" height="100%" in <svg width="100%" height="100%".... Follow the procedures for adding an image.

• element: The ID of the element program this .sty requires. Find this correspondence with the value and label keys in examples/elementLibrary.json

• uri: the relative path to the .sty file from examples/

The style should appear everywhere styles are listed.

Edit examples/elementLibrary.json with an object satisfying the following keys:

• value: a unique integer ID for the domain that you must assign

• label: the domain's name (can include spaces)

• icon: Optional, but strongly recommended icon URL. It should be a square and have the properties width="100%" height="100%" in <svg width="100%" height="100%".... Follow the procedures for adding an image.

• uri: the relative path to the .dsl file from examples/

The domain should appear everywhere domains are listed.

Useful for the procedures above. The way I usually do it is:

• Go to https://gist.github.com

• Drag the file into the window. I've had a bit of trouble with this, you want to make sure the SVG source gets inserted into the text box. Try dropping right over the textbox. It might insert an extra file, delete the empty one.

• Click "Create public gist"

• After you're redirected, click the "Raw" button with the file you want.

• You'll get taken to a URL with the raw SVG file. Notice that your browser isn't rendering the SVG immediately (for security reasons). We want a URL that does render this URL properly, though.

• Navigate to the URL already in the address bar but with ?sanitize=true at the end. The image should now render. This is the URL you want.