Adobe Edge Code Preview Update

There is a new update to Adobe Edge Code Preview for Creative Cloud members. Here’s what’s new:
Live Development for CSS and HTML

  • Auto reload in Live Preview: The page is automatically refreshed when you save changes to any file other than .css (CSS changes are reflected instantly – no need to save). A dot next to the lightning bolt icon indicates pending changes that will lead to an auto-refresh when you save.
  • Local server support for Live Preview: Specify a base URL for the project root via File > Project Settings. This overrides the default file:// URL.
  • ‘Live Highlight’ from CSS code: While Live Preview is open, putting your cursor in a CSS rule in Edge Code will highlight all matching HTML elements in the browser. Use “File > Live Highlight” to toggle this off.

Overall UI

  • Status bar with line and column info, JSLint status & spinner
  • Resizable search results & JSLint panel
  • Remember window size/position from last launch


  • Major editor performance improvements: Almost doubles scrolling FPS, cuts 1/3 from keystroke response latency, and fixes freezes in files with very long lines (e.g. minified code).

General Code Editing

  • Tab size setting: Click the number in the lower-right of the status bar to choose tab size. This is currently a global setting, across all files and file types.
  • Incremental search while typing in the Find bar
  • Delete Line(s): Ctrl+Shift+D / Cmd+Shift+D deletes the line the cursor is on (or all lines the selection spans).
  • Select Line command: Ctrl+L selects the current line or adds one line to an existing selection.
  • Syntax highlighting for: YAML, SVG (as XML)
  • Block comment/uncomment: Use Ctrl+Shift+/ (Cmd+Shift+/ on Mac) to toggle block comments around the current selection.

Visual Editing

  • Inline color picker: Use Quick Edit anywhere a hex color, rgb(), or hsl() appears to edit inline. Includes shortcut swatches for other colors used in the file.

HTML Code Editing

  • Code hinting for href/src: Hints for relative URLs based on files on disk. Press Tab to accept the selected hint for a folder name and drill down to its contents.
  • Auto-insert closing tags

Files & Folders Panel

  • Working set context menu: Now includes Rename, Show In Tree.
  • New Folder command
  • Rename command
  • “Show in File Tree” command: Selects and shows the current editor’s file in the left-hand file tree.
  • Remove recent projects dropdown entries: Open the dropdown and roll over an item to show “X” button.
  • Reorder working set by drag & drop
  • Sort working set: Sort the list of open files manually or automatically by file type, name or when added (the default).
  • Close All command
  • F2 shortcut for Rename
  • Find in Files scoping: Search in a specific subtree or even a single file. Right-click in the folder tree and choose “Find in…”


  • Move extensions folder outside application root: Extensions are now stored per user instead of in the application bundle. As before, you can use Help > Show Extensions Folder to access these locations:
    • Windows: `C:\Users\<user>\AppData\Roaming\Brackets\extensions`
    • Mac: `/Users/<user>/Library/Application Support/Brackets/extensions`
    • Extension developers can still place extensions in the Brackets source location instead, in the new `src/extensions/dev` folder.

Developer Workflow

  • Automated unit tests – Unit tests now run automatically on a Mac build server. Results are not posted publicly yet.


  • Quick Open search improvements: Quick Open now searches on the whole path (not just filename), and accepts CamelCase abbreviations and other non-contiguous matches.
  • Find and Find in Files: Search field turns red when no results are found. Invalid regexes trigger an error tip.

UI Changes

  • Status bar - The JSLint star icon has moved from the upper-right to the lower-right, in the new status bar. A gold star means no errors (as before), while a red star (new) means errors are listed, and a gray star (new) means JSLint is not running on the current file. Change tab settings by clicking the “Spaces” and “4” labels in the lower right (the former is the same as toggling Edit > Use Tab Characters).
  • Extensions folder - The location where you install extensions has changed. See above for details.
  • Project settings - A Project Settings dialog is accessible from the File menu or the project dropdown menu in the sidebar. Currently the only setting available is the Live Preview Base URL.
  • Code hinting - Tab and Enter now work exactly the same when accepting a code hint suggestion.


Enjoy this blog? Please spread the word :)