Skip to main content

FreeSewing Editor

Generating custom sewing patterns based on your measurements is the flagship feature of our website. As a user, the way to tap into that feature is by using the FreeSewing Editor.

This page is the definitive guide to using the FreeSewing Editor.

Before you start​

Before we dive in, you should know that:

  • The home of the FreeSewing Editor is freesewing.eu/editor.
  • The editor stores your pattern settings in the URL, so you can bookmark or share the URL with others.
  • The editor has different areas, views, and menus which are all explained here.
  • By default, some of the more advanced features of the Editor are hidden to not overwhelm new users.
tip

To gain access to all Editor features, set your User Experience to level 4 which is what we used in our examples.

Quick start guide​

To hit the ground running, following these 3 steps:

1. Choose a design​

The first thing the Editor needs to know is what design to load. If you have not picked a design yet, then opening the editor will automatically load the designs view which lets you select a design from the FreeSewing collection.

2. Provide measurements​

Assuming the design you chose requires measurements – almost all designs do, but some do not – the Editor will load the measurements view.

As long as required measurements or missing, the Editor will not load any other view but the measurements view, or the designs view to choose a different design.

Refer to the measurements view for all details on how you can provide measurements, but there’s one thing to note about this view: The drop-down at the top that says Pattern Measurements. This is the view menu and it is present on every view except the designs view since all other views require a design to be chosen first.

3. Get to work​

Once you have provided all required measurments, you are ready to go to work, which typically starts with loading the draft view.

Editor Areas​

The Editor has different areas, which are colorized in the screenshots below:

  • The gray top of the screenshot is the navbar of the FreeSewing website, and is not part of the editor. We include it in the screenshots so that things look the same on your screen, but it is not an editor area.
  • The pink horizontal strip at the top is the ribbon area where all menus are placed. The actual contents of this area will differ based on the view, but this area is present all all views with the exception of the designs view
  • The blue and green areas below the ping strip at the top represent the main working area. For many views, this will be a single area. But for some views, like the draft view shown in the screenshot below, this area is further divided:
    • Marked in blue is the pattern area where you can see your pattern.

      Note that this area has different pan & scroll behaviour. To scroll the entire page, make sure to do so outside this area.
    • Marked in green is the aside area, which allows you to (also) have the menus on the side. This is optional as these menus are also available in the ribbon area.

A screenshot showing colorized FreeSewing Editor areas (in draft view, on a desktop)

A screenshot showing colorized FreeSewing Editor areas (in draft view, on a desktop).

Editor Views​

The editor supports different views where each view serves a different purpose. The following views are available:

Draft Pattern

aka draft view

 Choose a different design

aka designs view

 Save pattern as…

aka save view

 Export Pattern

aka export view

 Pattern Measurements

aka measurements view

 Undo History

aka undos view

 Pattern Layout

aka layout view

 Documentation

aka docs view

 Edit settings by hand

aka editSettings view

 Pattern inspector

aka inspect view

 Pattern Logs

aka logs view

 Test Design

aka test view

 Time Design

aka timing view

 Choose a different view

aka picker view

Draft Pattern aka draft view​

The Pattern Editors draft view is where you will end up spending most of your time.

Purpose of the draft view​

To appreciate the significance of the draft view, it’s good to know what makes a FreeSewing pattern:

User Measurements[view = measurements]FreeSewing Design[view = designs]User Preferences[view = draft]FreeSewing CoreBespoke Pattern

The diagram above helps us understand the Editor’s priorities:

In other words, the goal of the draft view is to let your customize your pattern. To make that intutive, it will show you a live preview of what your patterns looks like.

Layout of the draft view​

A screenshot of the FreeSewing Editor in draft view, on a desktop, with various areas highlighted

A screenshot of the FreeSewing editor in draft view, on a desktop, with various areas highlighted.

tip

Refer to the documentation on the Editor areas and Editor menus to more in-depth info about each of these.

note

Not all menus are available on mobile, but all features are.

Caveats of the draft view​

The pattern area implements its own pan, scroll, and zoom logic that allows you to scroll, pan, and zoom the SVG pattern.

When this area takes up most of the screen, this can cause confusion when you try to scroll the page, but in reality you are scrolling the pattern.

You can use the zoom and rotate icons anchored at the top-right to zoom if you find that work better for you.

Choose a different design aka designs view​

Purpose of the designs view​

The designs view allows you to chose the design you want to generate a pattern from. It is the first thing the Editor will present you with.

Layout of the designs view​

This view does not have a ribbon area. The entire editor real-estate is used for letting you choose a design.

A screenshot of the FreeSewing Editor in designs view, on a desktop

A screenshot of the FreeSewing editor in designs view, on a desktop.

Controlling the design grid​

By default, you will get a grid of pictures showcasing the available designs, as well as a list of design names at the top for quick access in case you already know which design you want.

You can control the way the designs are displayed with the buttons between the list of names and the grid of pictures:

ButtonDescription
Display a line drawing for each design
This button won’t be shown when pictures are currently displayed
Display a picture for each design
This button won’t be shown when line drawings are currently displayed
Display filters for the list of designs
See Design filters
Display filters for the list of designs
This button won’t be shown unless filters are currently displayed
Display filters for the list of designs
This button won’t be shown unless filters are currently displayed
Design filters​

When you click the Show Filters button, it will bring up these filters:

A screenshot of the Design filters in the FreeSewing Editor

They allow you to filter on:

  • Tags: These designate different departments
  • Techniques: These let you filter based on the techniques that you are comfortable with
  • Difficulty: These let you filter based on the difficulty level of making the design

You can click on any of them to select/deselect, and can also combine filters.

Save pattern as… aka save view​

Purpose of the save view​

The save view allows you to save your current work as a (new) pattern in your FreeSewing account.

tip

Once a pattern has been stored in your account you can use the in the ribbon area to save your changes.

Layout of the save view​

This view only has the view menu in the ribbon area.

The save view itself takes a title and optional notes to store along the pattern.

A screenshot of the FreeSewing Editor in docs view, on a desktop

A screenshot of the FreeSewing editor in docs view, on a desktop.

tip

To access your saved patterns, go to /account/data/patterns

Export Pattern aka export view​

Purpose of the export view​

The export view allows you to export your pattern in a variety of formats.

Layout of the export view​

This view only has the view menu in the ribbon area.

A screenshot of the FreeSewing Editor in export view, on a desktop

A screenshot of the FreeSewing editor in export view, on a desktop.

Available export formats​

The page lists the following export formats:

  • Share your pattern: These are URLs that you can copy that include the Editor state
    • Pattern and Measurements: This URL includes all patterns settings plus the measurements used
      With this URL anyone can create the exact same pattern.
    • Pattern only: This URL includes all patterns settings, but no measurements
      With this URL anyone can create the same pattern style with their own measurements.
  • Export for printing: Export formats intended for printing your pattern
    • ISO paper sizes: Standard paper sizes
      • A4 PDF: Export to PDF, tiled to A4-sized pages
      • A3 PDF: Export to PDF, tiled to A3-sized pages
      • A2 PDF: Export to PDF, tiled to A2-sized pages
      • A1 PDF: Export to PDF, tiled to A1-sized pages
      • A0 PDF: Export to PDF, tiled to A0-sized pages
    • Other paper sizes: Local paper sizes used in the US and Canada
      • Letter PDF: Export to PDF, tiles to Letter-sized pages
      • Legal PDF: Export to PDF, tiles to Legal-sized pages
      • Tabloid PDF: Export to PDF, tiles to Tabloid-sized pages
  • Export for editing: Export formats intended for further editing
    • SVG: Export to SVG
      This is the native FreeSewing format
    • SVG: Export to (untiled) PDF
  • Export as code: Export formats for developers
    • JSON: Export pattern settings as JSON
    • YAML: Export pattern settings as YAML

Measurements aka measurements view​

Purpose of the measurements view​

The measurements view is where you should provide the measurements to be used for your pattern.

tip

If you are lacking any required measurements, this view will be automatically loaded.

Layout of the measurements view​

This view only has the view menu in the ribbon area.

A screenshot of the FreeSewing Editor in measurements view, on a desktop

A screenshot of the FreeSewing editor in measurements view, on a desktop.

Ways to provide measurements​

This view has different ways that you can provide measurements:

  • Choose one of your own measurements set
    Use this to select one of the measurements sets stored in your own FreeSewing account.
  • Choose one of the measurements sets you have bookmarked
    Choose this to use a measurement set you have bookmarked, which can be either one of your own, or a public measurements set from another FreeSewing user.
  • Choose one of Freesewing’s curated measurments sets
    Choose one of the measurements sets from the list we curate.
  • Load a measurements set by ID
    If you know the ID of the measurements set you want to use, you can load it this way. If it’s not one of your own measurements sets, it needs to be a public set for this to work.
  • Edit measurements by hand
    Regardless of what option you choose, this allows you to edit all measurments by hand.

Undo History aka undos view​

Purpose of the undos view​

The undos view allows you to revert recent changes to your pattern. It lists the recent changes you made, and clicking on any changes will roll back all changes up to (and including) that change.

tip

This functionality is available in the draft view via the icons in the ribbon area.

Layout of the undos view​

This view only has the view menu in the ribbon area.

A screenshot of the FreeSewing Editor in undos view, on a desktop

A screenshot of the FreeSewing editor in undos view, on a desktop.

Pattern Layout aka layout view​

Purpose of the layout view​

The layout view allows you to customize the way the individual patterns parts are laid out on the page(s).

tip

Placing pattern parts on page to use as little paper as possible – aka the bin packing problem – is one of those challenges where humans are (still) much better at than computers.

Every time you tweak your pattern, FreeSewing needs to re-draft it, calculate the new layout, and render it on screen. For this reason, we wrote a packing algorithm that prioritizes speed.
As a result, it is often trivial for a human to come up with a more optimized layout. This view lets you accomplish this without requiring any additional software.

If you want more control over your pattern, you can also export it as SVG and use Inkscape to edit it locally.

Layout of the layout view​

A screenshot of the FreeSewing Editor in inspect view, on a desktop

A screenshot of the FreeSewing editor in inspect view, on a desktop.

Layout icons​

The layout icons in the ribbon area hold:

  • A summary about the numbner of pages required for the current layout
  • A Apply Layout button to apply the current layout
  • A icon that takes you to the export view
  • A icon the resets the layout changes

Documentation aka docs view​

Purpose of the docs view​

The docs view holds links to the documentation of the desing you are currently using, as well as documentation about the FreeSewing editor itself, and even documentation for developers.

Layout of the docs view​

This view only has the view menu in the ribbon area.

A screenshot of the FreeSewing Editor in docs view, on a desktop

A screenshot of the FreeSewing editor in docs view, on a desktop.

Reading documenation without leaving the Editor

If you want to check something in the documenation but do not want to leave the Editor, look for this button:

It will load the documentation in a modal window floating on top of the Editor.

Edit settings by hand aka editSettings view​

Purpose of the editSettings view​

The _editSettings view allows you to manually tweak all of the inputs of your pattern, accept the design. That includes:

  • The measurements
  • The design options
  • The core settings
warning

This is an advanced feature that does provide any guardrails.

Layout of the editSettings view​

This view only has the view menu in the ribbon area.

The rest of the main working area is taken up by a YAML editor that allows you to make changes.

tip

We use YAML here as a format to edit the settings. If you are not familiar, hopefully the syntax is self-explanatory. If not, there’s plenty of information online about how it works.

A screenshot of the FreeSewing Editor in docs view, on a desktop

A screenshot of the FreeSewing editor in docs view, on a desktop.

Saving or reverting changes​

Changes you make here are not immeadiate. Instead, once you introduce a change, and number of extra buttons will appear below the YAML editor:

ButtonDescription
Shows the unsaved changes you have made
This button won’t show until you make a change
Applies the changes you have made (this does not save your pattern)
This button won’t show until you make a change
Discard any changes you have made
This button won’t show until you make a change

Pattern inspector aka inspect view​

Purpose of the inspect view​

The inspect view is a version of the draft view with extra features for pattern designers that allows them to inspect the various points and paths that make up a pattern.

This is an advanced feature that is of little value to regular users of the site and intended for designers and developers.

Layout of the inspect view​

This view shares the same layout as the draft view.

A screenshot of the FreeSewing Editor in inspect view, on a desktop

A screenshot of the FreeSewing editor in inspect view, on a desktop.

Pattern Logs aka logs view​

Purpose of the logs view​

The logs view show the logs generated by the FreeSewing core library.

This is an advanced feature that is of little value to regular users of the site and intended for designers and developers.

Layout of the logs view​

This view only has the view menu in the ribbon area.

A screenshot of the FreeSewing Editor in logs view, on a desktop

A screenshot of the FreeSewing editor in logs view, on a desktop.

Test Design aka test view​

Purpose of the test view​

The test view is a version of the draft view with extra features for pattern designers that allows them to test the impact of the various design options and measurements on their design.

This is an advanced feature that is of little value to regular users of the site and intended for designers and developers.

Layout of the test view​

This view shares the same layout as the draft view.

A screenshot of the FreeSewing Editor in test view, on a desktop

A screenshot of the FreeSewing editor in test view, on a desktop.

Time Design aka timing view {#timing)​

Purpose of the timing view​

The timing view is a version of the draft view with extra features for pattern designers that allows them to time the impact of the various design options and measurements on the the design.

This is an advanced feature that is of little value to regular users of the site and intended for designers and developers.

Layout of the timing view​

This view shares the same layout as the draft view. However, it has an extra area that sits below the ribbon area that generates a timeseries graph of the subsequent draft operations (marked in yellow).

A screenshot of the FreeSewing Editor in timing view, on a desktop

A screenshot of the FreeSewing editor in timing view, on a desktop.

Choose a different view aka picker view​

Purpose of the picker view​

The picker view allows you to pick a different view. It is a full-page version of the view menu.

Layout of the picker view​

This view does not have a ribbon area. The entire editor real-estate is used for letting you pick an Editor view.

A screenshot of the FreeSewing Editor in picker view, on a desktop

A screenshot of the FreeSewing editor in picker view, on a desktop.

Editor Menus​

Depending on the view you have selected, different menus will be available. The full list of menus is:

View Menu​

The View menu allows you to set the Editor view.

tip

Refer to Editor Views for more details.

Design Options Menu​

Each FreeSewing design can define a list of options that allow you to further customize your pattern. You can find them in the Design Options menu.

Since each design has its own options, the contents of the menu will be different for each design, but you typically find options to adjust the fit – such as changing the amount of ease – as well options to change the style of the pattern.

tip

The design options menu is accessible in the ribbon area in the draft view and other views that show the pattern.

Core Settings Menu​

The editor’s Core Settings menu allows you to tweak various aspects of the FreeSewing Core library, which – under the hood – generates your pattern for you.

In contrast to Design options which are specific for a given design, these Core Settings are the same for every design.

So you will find this menu always provides the same settings, regardless of what design you are generating a pattern for.

tip

The core settings menu is accessible in the ribbon area in the draft view and other views that show the pattern.

The following core settings are available:

Pattern Details​

This setting – which is enabled by default – will give you a pattern with all details included.

If you disable it, you will instead get a pattern that does not include any details such as text or annotations, and only include the seamlines.

Pattern Expansion​

This option suppresses all efforts to make the pattern consume less space/paper.

Designers will often take steps to reduce the amount of paper consumed by a pattern. For example, a strip of fabric used for binding, or a simple rectangular part may not be included, or only partially.

This option – which is disabled by default – allows you to suppress the space saving and indicate you rather want to get full-sized views on all pattern parts.

Included parts​

This setting allows you to specify which patterns parts you want to generate.

This can be useful if you want to only use a specific part. For example perhaps you have a shirt pattern and you only want to generate a different collar style.

It can also be used to include pattern parts that – for whatever reason – are hidden by default.

Margin​

The margin setting controls how much space will be added around each pattern part when calculating the pattern layout.

Each pattern part is laid out as a rectangle on the page. The spacing around (and between) these rectangles is controlled by this setting.

Paperless Patterns​

The paperless setting lets you generate a sewing pattern that includes extra dimensions as well as a grid (in either metric or imperial, based on your choice of units).

This allows you to skip printing the pattern altogether. Instead you can transfer it directly onto the fabric, or an intermediate medium such as pattern paper.

Include Seam Allowance​

This controls whether or not to include seam allowance on your pattern.

By default, seam allowance is not included. To generate a pattern with seam allowance, you should enable it by changing this option to Yes.

note

FreeSewing’s core library only takes a single setting to handle seam allowance: sa. However, for convenience, we’ve split this up into two different settings on the website:

The latter will only be shown if you’ve enabled the former.

Seam Allowance Size​

This Core Setting controls the base size of your seam allowance. In other words, the default seam allowance will be this size. Other allowance that is intended to be wider, like hem allowance, will be a multiple of this size.

note

FreeSewing’s core library only takes a single setting to handle seam allowance: sa. However, for convenience, we’ve split this up into two different settings on the website:

The latter will only be shown if you’ve enabled the former.

Scale​

The scale settings allow you to scale those parts of a pattern that do not scale with measurements. Things like logos, line widths, font sizes, and so on.

This setting was added at the requests of people who like to use our patterns to make doll clothes. When generating such a small pattern, the arrowheads, titles, and so on tend to obscure much of the pattern. This setting allows you to scale them down or – if you so wish – scale them up.

Units​

This controls the units used on your pattern. FreeSewing supports both metric and imperial units.

Note that as a FreeSewing user, you can configure your units in your account, and those are the units that will be used by default. However, if you want to override those settings on an individual basis – perhaps you are generating a pattern on behalf of someone else – this setting allows you to do that.

UI Preferences Menu​

The UI Preferences menu allows you to tweak certain aspects of the user interface (UI). These preferences are ephemeral, which means they are not kept in the URL.

tip

The UI preferences menu is accessible in the ribbon area in the draft view and other views that show the pattern.

The UI preferences includes in this menu are:

Show Side Menu​

This toggles the aside area on or off. The aside area can hold menus that are also accessible via the ribbon area.

note

That the aside area is not available on mobile.

User Experience​

This is a Editor-specific way to configure the control setting.

Pattern Render Engine​

This setting allows you to choose how your pattern will be rendered. In other words, how it will be drawn on the screen. There are two options:

  • React allows for more interactivity, and is optimized for displaying patterns on-screen
  • SVG does not allow interactivity like the React option does. Instead it is optimized for printing

By default, this website only uses SVG when you are exporting your pattern. While you are generating and tweaking your pattern, we use React, unless you use this setting to change that to SVG.

Rotate Pattern​

This allows you to rotate your pattern 90 degrees in the Editor.

This is useful for patterns that are very tall as patterns are constrained by width in the Editor.

Flags Menu​

The Flags Menu holds messages that were flagged by the designer.

In other words, this menu facilitates communication between the original designer and you, the person using their design.

Sometimes a flag is merely informative, sometimes they indicate there’s a potential problem with your pattern.

tip

The UI preferences menu is accessible in the ribbon area in the draft view and other views that show the pattern.

warning

Before printing a pattern, let alone cutting into any fabric, make sure to check all of the messages in this menu.

Test Menu​

The test menu allows you to run tests on the design, making sure the influence of design options or measurements is as expected.

The menu will include buttons to test:

  • All Design Options
  • All Measurements
    • All required measurments
    • Any optional measurements
tip

The test menu is accessible in the ribbon area in the test view only.

Layout Menu​

The layout menu holds settings for the (print) layout. It is shown only on the layout view.

tip

The test menu is accessible in the ribbon area in the layout view only.