YokeScope tutorial

From blank grid to knitting chart.

This guide explains how the designer’s setup, repeat, image, shaping, preview and export tools work together. Start at the beginning or jump directly to a feature.

01 · First steps

Getting started

Open the designer and begin with the sample project, or select New to create a clean chart. YokeScope saves projects in your browser rather than an online account.

  1. Set the repeat width, height, stitch proportion, starting stitches and number of repeats.
  2. Choose a yarn colour and paint the active cells.
  3. Watch the circular preview update as you work.
  4. Save the editable setup, publish a public copy, or export the finished PDF.

The three panels

Chart Setup, Repeat Editor and Yoke Preview scroll independently on larger screens. On mobile, use the fixed 1 Setup, 2 Repeat and 3 Yoke navigator to move between sections while the page itself scrolls vertically. Detaching the palette keeps colours available while another panel is in view.

The Feedback button opens the feedback form without changing the project.

Good to know: Browser storage belongs to the current device and domain. Publishing submits a public copy for review; it is not a private backup.

02 · Define the canvas

Chart setup

Stitches wide

Controls the number of columns in one repeat. This is the motif width—not the sweater’s complete stitch count.

Rounds high

Controls the number of knitting rounds. Round 1 and the narrow neck appear at the top; later and wider rounds continue downward.

Starting stitches

Sets how many stitches are active at the neck edge of each repeat. YokeScope gradually expands the active shape toward the lower edge.

Repeats around

Sets between 2 and 50 copies of the flat motif around the circular preview. Total displayed stitches equal active stitches per repeat multiplied by this value. Very high repeat counts produce more preview stitches and may take longer to redraw.

Long-float alerts

The individual colour options stay collapsed until Long float alert is switched on. The active stitch colours then become translucent so the alert outlines stand out. Set a separate maximum for every palette colour; YokeScope checks each yarn independently, but only on rounds where that colour appears at least once, and outlines a float only when its unused gap exceeds that yarn’s maximum. The right-aligned Next rnd switch is off by default, so each float is counted only within its own round. Turn it on to continue the knitting-path count into the next relevant round. The summary at the bottom reports “Total alerts: X”. Each colour row reports its own alert count and longest observed float as “X alerts, Y longest”; imported names omit the “Custom image” prefix and generated “Colour” labels use “#” for a shorter name.

Within each round, the calculation follows active stitches from right to left and also checks the circular boundary from the left end back to the right beginning. With Next rnd off, an alert crossing that boundary is split between both edges of the same round. When Next rnd is enabled, it then continues from the left edge of that round to the right edge of the next relevant round. A float crossing this boundary remains one continuous count but is drawn as split boxes—one at the left of the earlier round and another at the right of the following round. A round containing none of the selected yarn is ignored completely: it does not display an alert and its stitches do not extend that yarn’s float count.

Hover any segment to thicken every box belonging to that float and show a badge with its full stitch length. The two stitches where the yarn was used immediately before and after the gap return to full opacity. A white outer box includes those two flanking stitches, while the red inner box remains tightly limited to the unused float stitches. The white outline continues onto another round whenever a flanking stitch is on that row, even if that row contains no red float segment. For a same-round circular boundary alert, the white outline remains split between the left and right edges rather than crossing the unaffected middle of the row. This shows the relevant yarn colour and exact endpoints across round boundaries.

Each colour’s inclusion switch is on by default. Turn it off to remove that colour’s boxes from the chart, for example when you intend to duplicate-stitch the motif or work it as intarsia instead of carrying the yarn. Its potential alert count remains visible so you can assess the design or include the colour again. Turn the switch on to include the colour again. Per-colour maximums and Ignore choices remain attached to their yarn when the palette is reordered and are saved and exported with the project. Existing projects initially apply their former shared limit to every colour.

03 · Match your gauge

Stitch proportions

Most knitting charts are drawn on a grid of perfect squares, even though knitted stitches are usually wider than they are tall. Use the Stitch height slider to make the repeat editor and exported PDF better reflect your gauge and reduce unnecessary swatching.

Square chart cells
+---+---+---+
| X | X |   |
+---+---+---+
|   | X | X |
+---+---+---+
Stockinette stitches are wider
+-----+-----+
|  X  |  X  |
+-----+-----+

Stockinette commonly produces stitches that are wider than they are tall. YokeScope defaults to 1.33× wider, based on approximately 30 stitches × 40 rounds per 10 cm, and lets you adjust that shape to resemble your fabric.

Match a swatch: Divide your round gauge by your stitch gauge to find how many times wider each chart cell should appear. For 40 rounds and 30 stitches: 40 ÷ 30 = 1.33× wider.

What happens when stitch height is wrong?

A motif drawn with square cells can change shape when knitted because stockinette stitches are wider than the chart assumes. Suppose you design a perfect circle:

Square chart
   XXX
 XXXXXXX
XXXXXXXXX
 XXXXXXX
   XXX
Knitted fabric
 XXXXXXX
XXXXXXXXX
XXXXXXXXX
 XXXXXXX

The circle becomes a flatter oval. Setting an appropriate stitch-height ratio makes the chart preview closer to the motif’s knitted proportions.

Toggle off in Yoke preview: You can revert back to squares in the Yoke preview to better see the details in the round.

04 · Draw the motif

Repeat editor

Select a yarn colour, then click or drag across active cells. Hatched cells are unused in that round and cannot be painted in ordinary colour mode. Round counters appear on both sides and stitch counters on the top and bottom; hovering a cell highlights all four matching counters. Stitches are numbered right to left and rounds run from the neck downward.

Image, Reset, Mirror and Bulk Edit

Image opens the artwork importer. Reset opens a menu to reset colours, symbols, or both. Reset colours returns editable stitches to the base colour. Mirror paints or shapes the corresponding stitch on the opposite side.

Choose Bulk Edit, then drag between stitches to select a rectangle:

  • Copy creates a floating duplicate and preserves the source. Move it over the chart and click, or hold and release, to place it.
  • Move resets the source to its base colour, carries colours and symbols, and places them elsewhere.
  • Delete resets selected editable stitches and removes their symbols.
  • Rotate starts a non-destructive preview. Repeatedly select the nearby ↻ handle to preview 90°, 180°, 270° and 360°; select Done to commit.

Inactive destination stitches are never overwritten. Copy, Move, Delete and confirmed rotation participate in Undo and Redo. Clicking outside the chart and Bulk Edit toolbar cancels an uncommitted Move or Rotate action while keeping the selection available; a cancelled Move restores its source stitches.

Zoom and history

Use − and + to zoom the chart without changing its stitch resolution. The scrollable chart keeps its top, bottom and counters reachable. Undo and Redo cover painting, palette changes, symbols, structure, dimensions, resets and bulk edits.

05 · Start from artwork

Import an image

Select Image in the Repeat Editor heading. Drop a JPG, PNG, GIF or WebP, choose a local file, paste an image, or load a URL whose host permits cross-origin access. The original preview and status message confirm what was loaded.

Fit, crop and position

Crop from each edge, rotate left or right in quarter turns, zoom from 5% to 150%, and drag the pixel preview to position it. The preview resolution always matches the current stitches and rounds. Fidelity controls how strongly the conversion preserves source detail.

Raster methods and dithering

  • Balanced photo smooths before reduction.
  • Nearest pixel preserves hard pixel-art edges.
  • Preserve details samples more information and favours distinctive local colours.

Dithering mixes available colours to suggest intermediate tones. Disable it for cleaner solid colourwork regions.

Palette modes and colour count

  • Existing palette maps to yarns already in the project. Use the colour-selection panel to exclude yarns from matching or select them again; at least one must remain enabled.
  • Create new palette extracts the requested number of colours; use − and + to change the count.
  • Black and white reduces the artwork to two tones.
  • Custom lets you select, remove and drag up to eight ranked colours. Select a point on the cropped source image to sample that exact colour and add it to the custom selection. Collapse controls merge similar candidates and Reset restores the suggested custom palette.

Background separation

Enable background separation, choose the background colour and adjust sensitivity. Matching pixels are ignored when applying the image, leaving existing chart stitches untouched.

Select Apply to repeat to commit the rasterised colours to editable stitches, or Cancel/Close to leave the chart unchanged.

For clearer motifs: Crop closely, remove an even background, lower the colour count and choose colours that differ in brightness as well as hue.

06 · Build the palette

Yarn colours

The leftmost swatch is the base colour used by Reset, Delete and Move. Select a swatch to paint with it. On touch screens a single tap selects it immediately. Use the edit control to replace a yarn colour everywhere, the × control to delete it, or Add new color to create another swatch. At least one colour must remain.

An unused colour is deleted immediately. If the colour is assigned to active stitches, YokeScope opens a replacement window showing every remaining yarn as the usual circular palette swatches. The first choice is selected initially; select another circle to move the selection ring and checkmark, then choose Replace and delete. Cancel leaves the chart unchanged. The red Delete anyway action matches the project Delete styling, removes the yarn without asking for a replacement, and resets affected stitches to the current base colour.

Move and Tidy

Select Move, then drag swatches into a new order. Moving a yarn into the first position makes it the base colour. Tidy removes unused colours and merges duplicate values while reassigning stitches safely.

Detach

Detach turns the palette into a draggable floating panel. Its Undo and Redo buttons remain available while detached; Attach returns it to Chart Setup.

07 · Add instructions

Knitting symbols

Select Paint to return to colour editing, or choose a supplied knit, purl, increase or decrease symbol and place it on active stitches. Erase symbol removes an instruction without changing yarn colour. Symbols appear in the repeat chart and PDF but are intentionally hidden from the yoke preview.

Custom symbols

Select Add symbol, enter a compact mark and descriptive name, then classify it as regular, increase or decrease. Increase and decrease classifications guide yoke geometry. Custom symbols can be deleted with their × control; affected chart annotations are cleared.

08 · Shape the chart

Structure mode

Structure mode changes which cells exist in each round. Select a cell or inactive position to open its contextual menu.

  • Activate from here to bottom adds that stitch position to the selected round and subsequent lower rounds.
  • Deactivate from here to top removes that position from the selected round through the neck.

When Mirror is enabled, the same structural edit is applied to the corresponding position on the other side.

09 · Change the resolution

Expanding mode

Use Expanding mode when you need another row or column without stretching the existing motif. Select a numbered row or column beside the chart.

  • Add a copied column to the left or right.
  • Add a copied row above or below.
  • Delete the selected row or column.

The copied line retains its colours, symbols and active-stitch pattern. Charts keep a minimum of four rows and columns.

10 · Review the result

Yoke preview

The circular simulation repeats the flat chart around the garment. Each wedge is a stitch and each ring is a round. Painting a preview stitch updates its matching repeat-editor positions, and chart edits update the circle immediately.

Increase/decrease annotations—or active/inactive boundaries when no annotation exists—control where limited alignment changes occur. Most stitches stay stacked and size variation remains constrained.

Stitch height toggle

The Stitch height toggle is off by default, showing square-cell geometry in the Yoke Preview. Turn it on to apply the Chart Setup stitch ratio to the yoke’s radial proportions without changing the Repeat Editor, PDF or saved stitch-height value. The toggle setting is saved in project and setup files.

Use − and + for higher zoom levels, then scroll the preview to inspect every edge. The neck stitch count remains centred while scrolling. If the base colour is white, the preview uses a grey background for contrast; otherwise it uses white. Symbols and repeat overlays are not drawn in this preview.

Remember: The preview helps assess proportions and motif placement, but yarn and tension still vary. Swatch before committing to garment measurements.

11 · Keep your work

Local projects

Edit the project name in the top bar. New creates a named project, Save overwrites the selected local project with all current dimensions, stitch proportions, colours, cells, symbols and shaping. New asks for a project name and includes a Copy current project option; enable it to create a separate editable copy instead of a blank chart. The project selector switches between saved designs. The saved/unsaved label reports the current status.

Saved projects exist only in the current browser profile. They can be lost if you clear the site’s browser data or cookies, finish a private-browsing session, remove or reset the browser profile, or switch to another browser or device.

Delete permanently removes the selected local project after confirmation. If another project exists it opens automatically; otherwise YokeScope creates a fresh default project. Import validates an existing .yoke.json file and restores it as a separate local project.

12 · Share and discover

Public gallery

Select Publish to submit the current project and its generated Yoke preview for manual review. The confirmation explains that an approved design becomes public and copyable. Publishing does not change the local project, and a failed or unavailable connection does not prevent local editing. The unlinked owner designer retains both portable project Export and Publish.

Discover and sort designs

New submissions remain hidden until approved. The landing page previews up to five community favourites; selecting any preview opens the complete Gallery. The Gallery starts with Most liked and can switch to Most recently submitted. A short local cache lets returning visitors see recent Gallery results while the latest list refreshes.

Like, share and copy

Anyone can Like a design. The heart and count respond immediately while the update is saved, and YokeScope remembers the Like in that browser. Likes are intentionally lightweight rather than account-based. Select Share to open the device’s sharing options where available, or copy a design-specific link. Opening that link displays the approved design on its own, with a link back to the full Gallery. Select Copy to designer to validate the shared snapshot and save it as a new local project without overwriting existing work. Successful Likes and copies update the design’s last-interaction time.

Review and retention

The password-protected moderation page shows pending and published designs. A moderator can inspect the yoke and repeat, edit a submission’s public title before or after approval, see when it was submitted and last Liked or copied, accept or reject a pending submission, and permanently delete a published design. When 100 approved designs are already stored, approving another removes the least-Liked design, using the oldest submission to break a tie.

13 · Take it to your needles

Export a PDF knitting chart

Select Export Chart to download only the Repeat Editor as a portrait PDF. It preserves the chosen stitch-height proportion, places the neck and round 1 at the bottom, numbers stitches right to left on both top and bottom, numbers rounds on both sides, distinguishes active and inactive cells, and prints symbols over yarn colours.

The project name becomes the PDF filename and heading. This printable chart is separate from local Save, Import, and public Publish.