---
title: "Cutout Lines Plugin"
description: "CE.SDK's cutout plugin enables effortless creation and customization of cutout shapes for web-to-print users."
url: "https://img.ly/demos/cutout-lines/web/"
type: "demo"
demoId: "cutout-lines"
starterkit: "starterkit-cutout-lines-editor"
platforms: ["Web"]
tags: ["plugins","web"]
relatedDemos: ["https://img.ly/demos/apparel-editor-ui/web/","https://img.ly/demos/export-options/web/","https://img.ly/demos/default-ui/web/","https://img.ly/demos/product-editor-ui/web/"]
webMobileReady: true
webDocumentation: "https://img.ly/docs/cesdk/js/starterkits/cutout-lines-editor-ctltl1/"
webGithub: "https://github.com/imgly/starterkit-cutout-lines-editor-ts-web"
webCodeSandbox: "https://stackblitz.com/github/imgly/starterkit-cutout-lines-editor-ts-web"
---

> This is the markdown version of [Cutout Lines Plugin](https://img.ly/demos/cutout-lines/web/). For all pages in one file, see [llms-full.txt](https://img.ly/llms-full.txt). For an index of all available pages, see [llms.txt](https://img.ly/llms.txt).

---

## Available platforms

**Web** — [Open the demo](https://img.ly/demos/cutout-lines/web/)
- [Documentation](https://img.ly/docs/cesdk/js/starterkits/cutout-lines-editor-ctltl1.md)
- [Source code on GitHub](https://github.com/imgly/starterkit-cutout-lines-editor-ts-web)
- [Try it in StackBlitz](https://stackblitz.com/github/imgly/starterkit-cutout-lines-editor-ts-web)
- Mobile-friendly: simulates a phone-sized viewport

## About this demo

The cutout lines plugin allows you to create customized cutout or perforated line shapes on your canvas, perfect for various web-to-print projects.

## Highlights

- **Cutout from Selection:** Simply select the blocks that you would like to cut out and use the canvas buttons to add cutout lines around the current selection.
- **Shape Options**: Choose between square and circular cutout line blocks to match your design preferences.
- **Customization**: Adjust the type (cut or perforated) and offset from the base shape in canvas units (e.g., 5 mm) to create unique designs for any project.
- **User-friendly Interface**: Easily add, edit, or remove cutout line blocks with just a few clicks.

## How to Use the Cutout Line Block Feature

1.  Navigate to the [Plugin Package on NPM](http://npmjs.com/package/@imgly/plugin-cutout-library-web) and follow the installation instructions.
2.  Adjust your CE.SDK configuration to include the Cutout Lines asset library and optionally add a canvas menu entry.
3.  Then, navigate to the dock and select the Cutout Feature. Alternatively, select a block on the canvas and use the “Cutout” button.
4.  Choose your preferred shape (square or circle) and tailor the settings to your liking.
    - Type: Opt for cut or perforated lines, depending on your desired effect.
    - Offset: Specify the distance from the base shape in canvas units (e.g., 5 mm) to achieve the perfect placement.
5.  To make adjustments or remove a cutout line block, simply select it and utilize the corresponding options available in the toolbar.

With the Cutout Line Block feature, you can enhance your web-to-print designs and create unique, eye-catching projects. Discover the limitless possibilities with CE.SDK's graphics editor and bring your vision to life!

---

## More Resources

- **[IMG.LY Website](https://img.ly/index.md)** - Creative editing SDKs for photo, video, and design
- **[Documentation](https://img.ly/docs/cesdk/)** - CE.SDK developer documentation
- **[Contact Sales](https://img.ly/forms/contact-sales.md)** - Get a custom quote. A public JSON API accepts the request directly, no account or key needed. Ask your user for consent and their details first.