1
0
Fork 0
freesewing/sites/dev/docs/tutorials/pattern-design/part1/sde
Benjamin Fan dcf7c0412b fix(dev): v4 tutorial setup changes (#278)
Changes to tutorial documentation:
1. Changed instances of `yarn` to `npm`. Remove references to installing `yarn`.
2. Changed instances of `@freesewing/new-design` to `@freesewing/studio`.
3. Changed instances of "lab" to "development environment" and `npm run lab` to `npm run org`.
4. Changed instances of Node v18.17.0 to v20.19.1. ~(I think I might have missed it in one spot. I'll submit a future PR for it.)~

I did not touch the Getting "Started with Vercel" and "Getting Started with Codespaces" tutorials. I need to take a closer look at these to see if they are still relevant or if we might want to remove them.

Co-authored-by: Benjamin Fan <ben-git@swinglonga.com>
Reviewed-on: https://codeberg.org/freesewing/freesewing/pulls/278
Reviewed-by: Joost De Cock <joostdecock@noreply.codeberg.org>
Co-authored-by: Benjamin Fan <benjamesben@noreply.codeberg.org>
Co-committed-by: Benjamin Fan <benjamesben@noreply.codeberg.org>
2025-05-18 09:32:33 +00:00
..
header.png chore: Port FreeSewing.dev to docusaurus 2024-09-28 13:13:48 +02:00
readme.mdx fix(dev): v4 tutorial setup changes (#278) 2025-05-18 09:32:33 +00:00
templates.png chore: Port FreeSewing.dev to docusaurus 2024-09-28 13:13:48 +02:00

---
title: The FreeSewing development environment
sidebar_position: 30
---

If you have been to FreeSewing.eu the FreeSewing development environment will look familiar.
That's because under the hood, it re-uses the same building blocks.

At the top of the page is the header with a row of icons that lay out what is available to you.

![The icons in the header of the FreeSewing development environment](./header.png)

From left to right you can see:

- **Home** will take you to the home page / welcome page
- **Design** will offer you a list of templates to start a design from (more on this below)
- **Documentation** will show a page with links to our documentation
- **Code** will show a page with links to our source code
- **Support** will show a page with the various ways you can get help
- **Theme** allows you to change the theme (in other works the color scheme)
- **Language** allows you to change the language
- **Sign In** allows you to sign in to your FreeSewing account so you can use
  your (and our) measurements sets while designing

## Design templates

If you click the **Design** icon it will show this menu:

![Design templates provided by the FreeSewing development environment](./templates.png)

It allows you to choose a design template to start from. The following templates are included:

- **From scratch**: Start with an (almost) empty design
- **Tutorial**: Start with the end result of this very tutorial
- **From Brian**: Start with a design that extends [Brian](https://freesewing.org/designs/brian)
- **From Bent**: Start with a design that extends [Bent](https://freesewing.org/designs/bent)
- **From Titan**: Start with a design that extends [Titan](https://freesewing.org/designs/titan)
- **From Bella**: Start with a design that extends [Bella](https://freesewing.org/designs/bella)
- **From Breanna**: Start with a design that extends [Breanna](https://freesewing.org/designs/breanna)

For the following along this tutorial, you have two options:

- Pick **Tutorial** if you prefer to read along, make small changes, and see how they affect the design.
- Pick **From scratch** if you prefer to actively participate by recreating the design in this tutorial.

I recommend the latter. You will learn (and remember) a lot more if you are actively engaging.