---
title: How patterns work
---

This short guide will illustrate and explain how patterns work in FreeSewing.
Not to be confused with how sewing pattern work — although there's [great books
about that](https://www.assembil.com/how-patterns-work-book/) if you're
interested — it's about what goes on under the hood each time a sewing
pattern is generated by FreeSewing.

This illustration is a good starting point to gain a better
understanding of the structure of a FreeSewing pattern:

<Example part="docs_overview">
A schematic overview of FreeSewing
</Example>

If we look at our image, it can be divided into three areas:

- The left area with the **settings**  box
- The middle area with the **Pattern** box and everything in it
- The right area with the **draft** box and the _SVG_ and _React_ logos

Let's take a closer look at everything that is contained within our central **Pattern** box:

<ReadMore />

<Note>

The left and right parts are all about how to integrate FreeSewing in your _frontend_.
In other words, how you'll plug it into your website, or online store, or a mobile
application.

That part is outside the scope of this guide.

</Note>