1
0
Fork 0
freesewing/sites/dev/docs/tutorials/getting-started-linux/dev-start
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
..
readme.mdx fix(dev): v4 tutorial setup changes (#278) 2025-05-18 09:32:33 +00:00

---
title: Start the development environment
sidebar_position: 50
---

FreeSewing provides the studio, a development environment to help you design and develop patterns.

There are two ways to run this studio:

- [**Repository studio**](#repository-studio): Use this if you intend to contribute your work to FreeSewing
- [**Stand-alone studio**](#stand-alone-studio): Use this if you want to do your own thing, and not contribute to FreeSewing

## Repository Studio

Run `npm run studio` to start the repository studio development environment:

```bash
npm run studio
```

Then point your browser to http://localhost:3000

Your new design will appear in the Local Designs page.

:::tip

### Adding another new design

This is all you need to work on existing designs. If you'd like to add another new design, run:

```bash
npm run add
```

Just make sure to re-start the repository studio afterwards with `npm run studio`

:::

## Stand-alone studio

You will have a new folder that contains the stand-alone studio development environment.
(Within this new folder, the `design` subfolder holds your design's configuration files and source code.
You can ignore all other subfolders and files; they are part of the development environment.)

To start the development environment, enter the folder that was created
and run `npm run start`.

```bash
npm run start
```

Then open your browser and go to http://localhost:3000

:::tip
The development environment will watch for any changes you make to
the pattern's source code or configuration.
When you do, the pattern will update automatically in your browser.
:::

### Adding another new design

This is all you need to work on existing designs. If you'd like to add another new design, run:

```bash
npm run add
```

Just make sure to re-start the stand-alone studio afterwards with `npm run start`.

:::note

##### Yay, you're done!

All you have to do now is design your pattern.
Thankfully, we have a tutorial for that too:

- [Pattern design tutorial](/tutorials/pattern-design/): A step-by-step guide to designing your first pattern

:::