Brackets Blog

code the web

Windows XP support

After some discussion, we’ve decided to join other projects in their plans to drop specific support for Windows XP. On April 8th, Microsoft officially is no longer rolling out updates to the platform. In order to focus on increasing quality to the other operating systems, this will help us spend that much more time on them. What does this mean exactly for Brackets on XP? Brackets can still be installable on the OS, as we have no plans of placing a restriction around it. However as we move into the future, we expect the quality to not be on the same level as the other platforms.

We take quality seriously on the team and will continue ensuring that the recent versions of Windows and OSX are top notch. Please check out our updated system requirements page.

CSS Shapes Editor Extension

The CSS Shapes Editor extension for Brackets allows you to edit CSS Shapes values in Live Preview mode. A visual editor is stacked on top of the focused element so you can drag points and handles to change the element’s shape. This makes it very easy to see the shape changes in context. The extension is compatible with Brackets release 38 and above.

Click to view the Polygon Shapes example

What are CSS Shapes?

CSS Shapes represent a new feature, which allows web designers to wrap content inside and around custom paths. This feature opens up a lot of creative layout options because it lets designers break free from creating within the constraints of the block — the current rectangular shape of almost everything on the web.

Work on CSS Shapes is still in progress, but you can enable the feature today in Google Chrome.

Why edit CSS Shapes in the browser?

CSS Shapes are meant to be used in the browser. It makes little sense to use a classic design authoring tool to create them, then export them to CSS, then import them in a code editor, refresh the page in the browser, inspect, sigh, rinse and repeat. Any tweaks become too painful to do.

Authoring CSS Shapes in an external editor makes the workflow too difficult. It’s not easy to see how the shape interacts with the content on the web page, so there’s a lot of back-and-forth.

Installing the CSS Shapes Editor extension for Brackets

In Brackets, open File > Extension Manager and search for “CSS Shapes Editor” to find the extension, then click Install.

Or, if you want to run the bleeding-edge version, you may install from source. To do so, open File > Extension Manager and click “Install from URL”, then use the extension’s GitHub repository URL:

The bleeding-edge version may be more advanced, but also more error-prone than the stable version you will find searching through the Brackets extension registry as described in the first step.

Turning on support for CSS Shapes in Brackets

CSS Shapes are still under development in Google Chrome. You need to manually enable the feature before you can use the visual editor for shapes.

First, ensure that you have Google Chrome version 34 or above. Check this in Chrome’s settings menu under “About Google Chrome”. You also need to make sure that support for CSS Shapes is turned on in the Chrome instance that Brackets uses for the LivePreview mode.

Here’s what you need to do: open any HTML file in Brackets and launch LivePreview, then follow the instructions to enable CSS Shapes in that browser window. You only need to do this once.

This step is important!

Brackets uses a Chrome instance separate from the main one on your computer. This means that settings will not be inherited from your main Chrome browser, if that is your day-to-day browser. Even if you have already enabled CSS Shapes in your main browser, you still need to do it again in Brackets’s Chrome instance for LivePreview.

Using the CSS Shapes Editor

The CSS Shapes Editor in Brackets turns on automatically when you need it. While editing a CSS shape property, such as `shape-inside` or `shape-outside`, simply focus the cursor on the property value, like `polygon(…)` or `circle(…)`, then turn on the Live Preview mode. A visual editor with draggable points and handles appears on top of the element that is being edited. If no editor appears, make sure that CSS Shapes are enabled in Google Chrome.

Click to view the Circular Shapes example

The in-browser editor is specialized for the shape type. Polygons get an editor where you can drag the points for the polygon vertices to change the shape. Click on the polygon outline to add new points, or double click an existing point to remove it. While editing a polygon, press the T key on your keyboard to toggle controls that scale, move and rotate the polygon shape. Circles, ellipses and rectangles get an overlay of the shape, which can be scaled and moved around.

Any changes to the shape are instantly visible in the context of the page. All actions in the shape editor reflect back to the code editor. When you are done, just turn off the Live Preview mode.

CSS Shapes can be defined with all sorts of CSS units, such as pixels, ems, rems and even percentages for responsive shapes. The CSS Shapes Editor takes care to preserve the unit type for the shape while editing.

What will you build?

Authoring CSS Shapes in the context of the browser is just one way we are making it easier to explore new web platform features. While CSS Shapes are still in development, this editor in Brackets helps you learn about the feature today, experiment, and get ready to use shapes when they will be switched on by default.

If you need a head start, Sara Soueidan has written a great introduction to working with CSS Shapes where she describes in detail how to use the new properties.

We’re eager to see what ideas you bring to life with CSS Shapes now that there is a practical way to create, edit and tweak the shape of content on the web.

Cheers to a less rectangular web!

Brackets 0.38 Release (Multiple cursors)

The latest Brackets release now includes one of the most requested features: multiple cursor/selection support. Plus, as always, we’ve got a good collection of fixes and improvements throughout.

Multiple Cursors

Brackets now lets you create multiple cursors and selections in order to make lots of similar edits at once. It’s useful for things like adding the same text in multiple places or quickly renaming a variable.

There are a couple of basic ways to create multiple cursors or selections:

  • Hold down the Alt key, then drag vertically to create cursors, or drag diagonally to create a rectangular selections.
  • Make one selection, then hold down the Cmd key (Mac) or Ctrl key (Win) and click or drag to add another cursor or selection.

The following video shows some examples of these techniques along with more ways to create and manage multiple selections.

Multiple cursors is one of those things that you might see the first time and say “that’s neat, but I already have find and replace”. And then you start using the feature and you find yourself using it several times a day. Selecting the instances of text that you want to replace and watching the text change as you type has a great feel, especially when coupled with Live Preview. In the example below, I use the “Add Next Match to Selection” keyboard shortcut (ctrl-B on Windows/Linux, cmd-B on Mac) to grab a few instances of the word “Brackets” and then change them:

Multiple selections with Live Preview

Multiple selections with Live Preview

You also notice little, unexpected ways in which the feature saves you time, like visually updating a bunch of strings:

Using multiple cursors to update several lines at once.

Using multiple cursors to update several lines at once.

Multiple cursors and selections provides a bunch of new editor actions, so you might want to check out our documentation for using the feature. Thanks to Marijn Haverbeke and the other CodeMirror contributors for this great new CodeMirror 4 feature.

Inline Editor Hints

It hasn’t always been crystal clear when you could pop open an inline editor for CSS styles (the Quick Edit feature on the Navigate menu). Brackets will now give you some hints when Quick Edit is not available:

Messages appear when Quick Edit is not available.

Messages appear when Quick Edit is not available.

Other Changes

  • We’ve continued improving our project find features with performance improvements on Windows and usability improvements for all platforms.
  • .ico files can be viewed directly in Brackets now.
  • Brackets now supports “asynchronous linters”, which are code checkers that require a bit more time to do their processing before they present their errors.
  • In the file tree, you can use ctrl/cmd-click to expand/collapse all of the siblings in the tree. ctrl/cmd-alt-click will collapse a subtree.
  • We added a bunch of UI polish throughout Brackets

Community Contributions


New Brackets Committers: Martin Zagora and Arzhan Kinzhalin

The Brackets community continues to grow and contribute in many different ways to Brackets’ success. We’ve got new extensions and pull requests arriving daily. To review pull requests, someone has to know Brackets well enough to know what the best practices are and how things are set up and show good judgment about what we ship.

Today, we’re happy to announce that the Brackets project has two new committers who have each demonstrated deep experience with Brackets: Martin Zagora and Arzhan Kinzhalin.


Brackets Sprint 34 Build

Brackets Sprint 34 marks a new beginning for our installation process. For the first time Brackets will be installed to just “Brackets” – not “Brackets Sprint 34″. This means that Brackets Sprint 35 will install over top of the Brackets Sprint 34 installation allowing for shortcuts, symlinks, pinned tasktray items,
dock icons, etc… to point to the Sprint 35 install. Linux SSHFS/REISERFS support, Extension Manager UI Updates, Pixel Guides, bug fixes, a new look, and some architecture changes round out the release.


Brackets Sprint 32 Build

Brackets 32 is online and ready for download. This release is largely an architectural one, but we still managed to sneak in a few improvements. Everyone should notice an enhanced user experience for Live Development and Quick Edit. Extension developers will be happy to find we upgraded Brackets to Node 0.10.