Userspace Shapes

title

Userspace Shapes

dated

April-Juli '26

In this prototype I explore tools for drawing shapes in PlayBook that can be built on-the-fly in userspace.

One of the great advantages of computers over pen and paper is the ability to create editable shapes. For example when drawing things like boxes-and-arrows style diagrams, being able to tweak and iterate on the layout is extremely useful. Another example might be drawing CAD style sketches, where we want to be able to update the sizes of things after we’ve drawn them.

Our goal is not simply to add a fixed set of shapes to PlayBook. Instead, we want these tools to be built in userspace. We want to be able to modify existing tools, and more importantly, create entirely new tools ourselves. Ideally, we can do most of this without having to put on our programmer hat.

Adding these capabilities to PlayBook required a bunch of new concepts, the design of which I’ve outlined in the following smaller notes:

• Parts, Tools, Library
• Snapping handles
• Userspace Propagators

Below are several demonstration videos, to show the current state of the prototype.

Userspace Arrow

This demo shows that, by combining an arrowhead component with any line component, we can create a new types of arrow.

Userpace Rectangle

One particularly useful component is the oriented line, which is somewhat inspired by the angular vector constraint in Inkling. This allows us to create a simple rectangle component that can be resized and rotated on-the-fly. The rectangle is built entirely in userspace, and is composed of four oriented lines.

We can specify how the rectangle can be drawn with the pencil, by using a draw arrow component. In this case, from the top-left corner, to the bottom-right corner.

We can then wrap this up into a part, and turn it into a ‘penpot’. So we can use it as a regular tool.

Finally, for re-use, we can add this to the library on the first page of the notebook, so that we can easily access it from the radial menu:

On the fly grid

Using the same oriented line component, we can also create a grid that can be resized and modified on-the-fly. The shape of the grid is maintained entirely though handle and point-on-line snapping. You add more columns or rows by simply drawing more lines.