freesewing/markdown/dev/guides/patterns/en.md

---
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" 
  caption="A schematic overview of FreeSewing"
/>

If we look at our image, it can can 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 list />

<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>