CSS Shapes Editor for Brackets

Extension for Brackets and Adobe Edge Code.

Adds an on-screen interactive editor for CSS Shapes values when in Live Preview mode.

How to Install

Simple:

• Open Brackets, and go to File > Extension Manager
• Search for "CSS Shapes Editor for Brackets"
• Click Install

From source

1. Open Brackets, and go to File > Extension Manager
2. Click Install from URL...
3. Enter this URL:

https://github.com/adobe-webplatform/brackets-css-shapes-editor

1. Click Install
2. Reload Brackets.

How to enable CSS Shapes

UPDATE September 2014: CSS Shapes are enabled since Google Chrome 37. If you're using Chrome 37+, this section is no longer relevant.

If you're using an older version of Chrome, here's how to enable the feature manually:

Before you use the shapes editor, you need to enable support for CSS Shapes in the LivePreview browser window. You need to do this even if you have already enabled CSS Shapes in another Google Chrome browser on your system.

To enable CSS Shapes:

1. Turn on LivePreview
2. Navigate to chrome://flags
3. Find the Enable experimental Web Platform features flag
4. Click Enable
5. Reload LivePreview.

Changelog

v1.1.0

• sync with shapes editor library v0.8.0
• fixes various bugs related to reference boxes and percentage-based coordinates;
• adds on-screen controls for polygon edit / transform modes;
• uses minified version of library;
• removes keyboard shortcut (T key) to toggle polygon transform mode.
• removes handling & feature detection of shape-inside (obsolete from CSS Shapes Level 1)

License

MIT-licensed -- see main.js for details.