Weaving draft software

weaving draft showing a twill variation
I used my tool to generate this weaving draft. The pattern is a variation on 2x2 twill.

I created a JavaScript tool to help me develop weaving patterns.
See it live and view the source code, all in one Observable notebook


An Observable notebook is an interactive environment for writing and running JavaScript, a web scripting language. Observable is a fantastic place to throw together code to, for example, determine the optimum way to drink boba, visualize a search algorithm, or animate some trains.

For this project, I created a notebook that allows the user to input numbers that describe a loom setup (warp threading order, weft treadling pattern, and a tie-up diagram). My code turns these numbers into an image, called a weaving draft, and generates a representation of the final woven fabric.

How a loom is used to create cloth

At its simplest, a woven piece of fabric consists of interleaved perpendicular threads. Woven fabric is produced on a loom, and the threads that run from the front to the back of the loom are the warp threads. Weft threads run back and forth across the width of the loom. Solid cloth is produced as the weft threads travel over and under the warp threads.

Every intersection of two threads can be characterized as either warp-facing or weft-facing, depending on whether the warp or the weft thread lies on top. Therefore, a piece of woven fabric can be represented by a two-dimensional grid, where every square corresponds to an intersection of a warp and weft thread.

diagram explaining warp and weft threads
Warp threads run from the front of the loom to the back; weft threads run back and forth across the warp threads. This is an example of plain weave, where no two adjacent thread intersections are the same. I generated this diagram in an Observable notebook.

An individual warp thread travels through one of several shafts on the loom. When one shaft is raised, all warp threads that are attached to it are also raised. This produces a gap, or shed, between the threads that are raised and those that are stationary; a weaver will pass a weft thread through the shed then beat that thread close to the developing cloth. By passing weft threads through different sheds, the weaver is able to create a piece of cloth.

What is a weaving draft?

A weaving draft is a diagram that tells a weaver how to setup the loom and weave a specific pattern:

diagram explaining warp and weft threads
The different sections of a weaving draft, shown with 4 shafts and 4 treadles. I created this diagram within the same Observable notebook that I use to generate weaving drafts.

Different tie up patterns and treadling patterns can produce the same fabric patterns, as shown below.

twill pattern woven using a peg tie-up
twill pattern woven using a complex tie-up but simple treadle pattern
twill pattern woven using a complicated tie-up and treadle pattern
Left to right: a basic peg tie up (treadle 1 raises shaft 1, treadle 2 raises shaft 2, etc.) allows a weaver to use any treadle combinations; multiple shafts tied to a single treadle can simplify the treadle pattern; scrambled warp threading and tie-up patterns can lead to a non-intuitive treadle pattern.

Examples of weaving drafts and woven fabric

Here are a couple of weaving drafts I experimented with, paired with the fabric I created using the draft.

draft for weaving damask-stripe pattern
sample of damask weave
Horizontal stripes, produced using alternating sections of 1x3 and 3x1 twill.
draft for weaving diagonal-stripe pattern
sample of diagonal weave
Diagonal stripes, produced using warp floats that pass over 3 weft threads.
draft for weaving waffle weave pattern
sample of waffle weave, back side
sample of waffle weave, front side
Front (image 2) and back (image 3) of a pattern inspired by waffle weave. The front of the sample emphasizes long warp columns (white), and the back emphasizes long weft rows (blue).

Concluding thought

My weaving draft tool is up and running! Follow along with the instructions to design your own weaving drafts.