Skip to main content

FreeSewing in the browser

Thanks to the advances in browser standardisation around JavaScript ESM modules, not to mention the new Skypack CDN, 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, 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>
  <head>
    <!-- This entire head tag is optional/cosmetic -->
    <title>FreeSewing browser example</title>
    <style>
      body {
        font-size: 24px;
        padding: 1rem;
      }
      svg {
        max-width: calc(100vw - 4rem);
        max-height: calc(100vh - 4rem);
        margin: 0 auto;
      }
      #container {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <script type="module">
      import { Aaron } from 'https://cdn.skypack.dev/@freesewing/aaron';
      import { pluginTheme as theme } from 'https://cdn.skypack.dev/@freesewing/plugin-theme';
      const svg = new Aaron({
        sa: 10, // Seam allowance
        paperless: true, // Enable paperless mode
        // More settings, see: https://FreeSewing.dev/reference/settings
        measurements: { // Pass in measurements
          biceps: 387,
          chest: 1105,
          hips: 928,
          hpsToWaistBack: 502,
          neck: 420,
          shoulderSlope: 13,
          shoulderToShoulder: 481,
          waistToHips: 139,
        }
      })
      .use(theme) // Load theme plugin
      .draft() // Draft the pattern
      .render() // Render to SVG
      // Update DOM
      document.getElementById("container").innerHTML = svg
    </script>
    <div id='container'>SVG output will appear here</div>
  </body>
</html>

Dependencies​

If you compare this example with our Node.js example 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.