FreeSewing browser example

--- title: FreeSewing in the browser --- Thanks to the advances in browser standardisation around JavaScript ESM modules, not to mention [the new Skypack CDN](https://www.skypack.dev/), you can generate patterns in the browser with a few lines of JavaScript. :::tip ##### Use FreeSewing.org if you just want a pattern These instructions are intended for people who want to generate their own patterns using FreeSewing packages. If you _just want a sewing pattern created for you,_ you can get all our designs on [FreeSewing.org](https://freesewing.org/), our website for makers. ::: ## High level overview To generate a pattern, you will need to: - Instantiate the pattern (`new ...`) - Pass it the settings and measurements you want to use (`{ ... }`) - Load the theme plugin (using `use()`) - Draft the pattern (using `draft()`) - Render it to SVG (using `render()`) Which can be done as a one-liner since `use()`, `draft()` and `render()` are all chainable, as shown below. ## Code example Below is a complete example. ```html FreeSewing browser example

SVG output will appear here

``` ## Dependencies If you compare this example with [our Node.js example](/howtos/environments/nodejs) you'll notice that you do not need to worry about loading any dependencies. Not even `@freesewing/core` is loaded, because Skypack will pull in all dependencies for you.