CSS Shapes Editor for Chrome DevTools

Chrome DevTools extension for live on-screen editing of CSS Shapes property values. Uses the CSS Shape Editor library.

Demo

https://www.youtube.com/watch?v=zdWsBZiGiZc

How to install

Simple

Google Chrome

1. Open Google Chrome (min version 37, check chrome://version/)
2. Install extension from Chrome Web Store

Opera browser

1. Open Opera (min version 24, check opera://about)
2. Install extension from Opera add-ons registry.

From source

1. Clone this repository.
2. Open Google Chrome (min version 37, check chrome://version/ or download Canary)

• Navigate to chrome://extensions
• Toggle on "Developer mode" checkbox
• Click "Load unpacked extension"
• Select the cloned repository folder

How to use

• Launch DevTools (View > Develop > Developer Tools)
• Switch to Elements panel
• Look for the new Shapes sidebar next to Styles, Event Listeners, etc.
• In the Shapes sidebar:
  • click "create" and select a shape type to add
    • an interactive editor appears on top of the selected element
  • click "edit" to turn on editor and adjust an existing shape
  • click "edit" again to remove the editor
  • tip: hold the Shift key and click "edit" to convert the shape coordinate units

Sample content

Use with the CSS Shapes Espresso demo (source), or learn how to create your own sample.

Known limitations

• Manually editing code in the Shapes sidebar, like in Styles, is not yet available.
• There is no interactive editor for inset() shape function. Only polygon(), circle() and ellipse() are supported.

Credits

• CSS Shapes Editor library
• Underscore
• helpers & insight from TodoMVC
• Icons:
  • Cursor by Danny Sturgess from The Noun Project
  • Plus by P.J. Onori from The Noun Project