Brackets

One of the roads to take in modern web development is unifying and creating connections between design and implementation. Brackets is a code editor for HTML, CSS, and JavaScript, developed by Adobe, and it tries to take that road. It offers different tools to make the process of web creation faster, and improve the conversion from the graphic editor to its interpretation in the language used.

It's an open source application that has a clear interface. It can automatically detect code to help you with the writing, indentation, and coloring to identify segments. You can organize all the elements in your project in a category tree, where the code and graphics are integrated.

One of the most interesting features it has is the dynamic preview mode, in which you can open your project on a browser and see every modification you do in the source code in real time. It's functionalities can also be expanded by using extensions from third parties. One of them, called Extract for Brackets, already comes integrated in the app, and lets you export the formatting information to a PSD file for Photoshop, even though you need to create an Adobe account to do it.