Update on the Comp to Code Tool in Brackets

With the launch of Project Parfait in preview, as well as Lee’s open sourcing of his Response tool, I wanted to provide an update on the “Design Comp to Code” tool that we showed last year at Adobe MAX. After a bit of a delay in getting started, we’ve been hard at work turning that vision into a reality as an extension for Brackets. We’ve been able to leverage a lot of work from the Parfait team to bring a comp to code workflow directly into your code editor.

We’re excited about where we’re at now and we’ve recorded a video to share some of the progress we’ve been making. If you’ve seen the MAX video, you’ll see the core features that were in that original vision, as well as some new concepts like code hints for text and generating an asset from multiple layers.

We’ll be doing a private beta of the extension soon and we would love you to be a part of it! If you’re interested in participating, you can fill out the survey here. We’ll be starting small but hope to expand the group fairly quickly after the initial invites.

Over the next couple of months we’ll be sharing more about what features we have planned, so keep an eye on the Brackets blog for updates. We’re looking forward to sharing more of the roadmap and information on the
public preview. Let us know what you think!

=Ryan and the Comp to Code Team

39 Responses

New Linting API

One of the more popular types of Brackets extensions are linters (or code quality checkers). Brackets ships with JSLint support built in, but you can currently find extensions for CSSLint, W3CValidation, JSHint, and even JSON. Brackets 31 introduces an improved API for better linting integration.

8 Responses

Reflow Cleaner Extension

Reflow Cleaner is a new extension for Brackets that helps front-end developers produce clean HTML and CSS from Adobe Edge Reflow design comps.


12 Responses

Brackets Extension Registry

Brackets isn’t just about hacking, it’s also about sharing. Within the first year of the project, over 100 extensions were created by the community. We quickly outgrew the wiki page listing and needed a better way to share and install extensions. Several months ago we began work on the brackets-registry project, a server application to register and share brackets extensions.

Aside from creating and open sourcing the brackets-registry, we also had to update how extensions are packaged and needed to implement several features within Brackets itself. We’ve been integrating towards this goal since Brackets 22, so it’s great to finally announce that Brackets 28+ allows you to browse and install community-built extensions.


3 Responses

Using GitHub with Brackets

As both an avid GitHub and Brackets user, today I decided to take a look at what extensions are available that could help integrate the two. The Brackets Extension list over on the main wiki page list five different extensions but I focused on three that seemed to work the best (as well as being somewhat up to date). Each of the extensions described below can be loaded using the cool Brackets Extension Manager so be sure to give them a try!


3 Responses

xUnit – JavaScript Unit Testing Extension

The Brackets xUnit extension was created to simplify the process of creating and developing Javascript unit tests. xUnit currently supports the unit test frameworks Jasmine, Qunit, and YUITest. Tests written in these frameworks can be run directly from the Brackets interface. The extension can also generate skeleton unit tests for Jasmine, Qunit, or YUITest by parsing the current file and creating a new test file with test cases for each method.


1 Response

Markdown Extension for Brackets

Markdown is a lightweight markup language that allows you to create HTML using simple symbols. For example, doing *beer* creates an italic-styled HTML wrapper for the word. Markdown is a great way to accept user-generated content on a site without having to worry about the complexities of HTML.


9 Responses

PageSuck Brackets Extension

PageSuck was created by Tim Burgess and does one simple thing – it sucks down the contents of a remote URL and loads it into Brackets for editing. After downloading and installing extension, you may launch PageSuck by pressing Option + G on OSX or Alt + G on Windows.


3 Responses

JS Beautifier Code Formatting Extension for Brackets

A few days ago I was asked if Brackets included any formatting features. While there isn’t anything included by default in Brackets (although see my note at the end), there is an excellent community-built extension you can download to add formatting for HTML, JavaScript and CSS.


17 Responses

Snippets Brackets Extension

Today we want to share the Snippets extension. Created by Jonathan Rowny, the Snippets extension lets you define a series of triggers for common typing tasks. In some ways this is like the Zen Coding extension reviewed earlier, but a bit simpler.


20 Responses