-- Welcome to an early preview of Brackets, a new open-source editor for the next generation of - the web. We’re big fans of standards and want to build better tooling for JavaScript, HTML and CSS - and related open web technologies. This is our humble beginning. -
- - -- You are looking at an early build of Brackets. - In many ways, Brackets is a different type of editor. One notable difference is that this editor - is written in JavaScript. So while Brackets might not be ready for your day-to-day use quite yet, - we are using it every day to build Brackets. -
- - -- When editing HTML, use the Cmd/Ctrl + E shortcut to open a quick inline editor that - displays all the related CSS. Make a tweak to your CSS, hit ESC and you’re back to - editing HTML. Or just leave the CSS rules open and they’ll become part of your HTML editor. - If you hit ESC outside of a quick editor, they’ll all collapse. No more switching between - documents and losing your context. -
- - - Want to see it in action? Place your cursor on the tag above and press - Cmd/Ctrl + E. You should see a CSS quick editor appear above. On the right you will see - a list of the CSS rules that are related to this tag. Simply scroll the rules with - Alt + Up/Down to find the one you want to edit. - - - -
-
-
-- You can use the same shortcut in JavaScript code to view the body of a function you're calling, by - placing the cursor on the function name. Or open a graphical color picker by placing the cursor on - any color in hex, rgb or hsl format. For now inline editors cannot be nested, so you can only use - Quick Edit while the cursor is in a "full size" editor. -
- - -- You know that "save/reload dance" we've been doing for years? The one where you make changes in - your editor, hit save, switch to the browser and then refresh to finally see the result? - With Brackets, you don't have to do that dance. -
-- Brackets will open a live connection to your local browser and push CSS updates as you - type! You might already be doing something like this today with browser-based tools, but with Brackets - there is no need to copy and paste the final CSS back into the editor. Your code runs in the - browser, but lives in your editor! -
- -- To help visualize the relationship between CSS and HTML, when your cursor is on a CSS rule, - Brackets will highlight all affected elements in the browser. Also, when editing an HTML file, - Brackets will highlight the corresponding HTML elements in the browser. -
- - - If you have Google Chrome installed, you can try this out yourself. Click on the lightning bolt - icon in the top right or hit Cmd/Ctrl + Alt + P. When Live Preview is enabled on - an HTML document, all linked CSS documents can be edited in real-time. The icon will change from - gray to gold when Brackets establishes a connection to your browser. - - Now, place your cursor on the tag above. Notice the blue highlight that appears - around the image in Chrome. Next, use Cmd/Ctrl + E to open up the defined CSS rules. - Try changing the size of the border from 1px to 10px or change the background - color from "dimgray" to "hotpink". If you have Brackets and your browser running side-by-side, you - will see your changes instantly reflected in your browser. Cool, right? - +- Today, Brackets only supports Live Preview for CSS. We are currently working on Live Preview support - for HTML and JavaScript. In the current version, changes to HTML or JavaScript files are automatically - reloaded when you save. Live previews are only possible with Google Chrome. We want to bring this - functionality to all major browsers, and we're looking forward to working with those vendors to do so. -
- - -- Brackets is an open-source project. Web developers from around the world are contributing to build - a better code editor. Let us know what you think, share your ideas or contribute directly to the - project. -
-+ Welcome to an early preview of Brackets, a new open-source editor for the next generation of + the web. We’re big fans of standards and want to build better tooling for JavaScript, HTML and CSS + and related open web technologies. This is our humble beginning. +
+ + ++ Brackets is a different type of editor. + One notable difference is that this editor is written in JavaScript, HTML and CSS. + This means that most of you using Brackets have the skills necessary to modify and extend the editor. + In fact, we use Brackets every day to build Brackets. It also has some unique features like Quick Edit, + Live Preview and others that you may not find in other editors. + To learn more about how to use those features, read on. +
+ + ++ No more switching between documents and losing your context. When editing HTML, use the + Cmd/Ctrl + E shortcut to open a quick inline editor that displays all the related CSS. + Make a tweak to your CSS, hit ESC and you’re back to editing HTML, or just leave the + CSS rules open and they’ll become part of your HTML editor. If you hit ESC outside of + a quick inline editor, they’ll all collapse. +
+ + + Want to see it in action? Place your cursor on the tag above and press + Cmd/Ctrl + E. You should see a CSS quick editor appear above. On the right you will see + a list of the CSS rules that are related to this tag. Simply scroll the rules with + Alt + Up/Down to find the one you want to edit. + + + +
+
+
+ + You can use the same shortcut for JavaScript code to view the body of a function by + placing the cursor on the name of the function you are calling. For now inline editors cannot be + nested, so you can only use Quick Edit while the cursor is in a "full size" editor. +
+ + ++ You know that "save/reload dance" we've been doing for years? The one where you make changes in + your editor, hit save, switch to the browser and then refresh to finally see the result? + With Brackets, you don't have to do that dance. +
++ Brackets will open a live connection to your local browser and push CSS updates as you + type! You might already be doing something like this today with browser-based tools, but with Brackets + there is no need to copy and paste the final CSS back into the editor. Your code runs in the + browser, but lives in your editor! +
+ ++ Brackets makes it easy to see how your changes in HTML and CSS will affect the page. When your cursor + is on a CSS rule, Brackets will highlight all affected elements in the browser. Similarly, when editing + an HTML file, Brackets will highlight the corresponding HTML elements in the browser. +
+ + + If you have Google Chrome installed, you can try this out yourself. Click on the lightning bolt + icon in the top right corner of your Brackets window or hit Cmd/Ctrl + Alt + P. When + Live Preview is enabled on an HTML document, all linked CSS documents can be edited in real-time. + The icon will change from gray to gold when Brackets establishes a connection to your browser. + + Now, place your cursor on the tag above. Notice the blue highlight that appears + around the image in Chrome. Next, use Cmd/Ctrl + E to open up the defined CSS rules. + Try changing the size of the border from 1px to 10px or change the background + color from "dimgray" to "hotpink". If you have Brackets and your browser running side-by-side, you + will see your changes instantly reflected in your browser. Cool, right? + + ++ Today, Brackets only supports Live Preview for CSS. However, in the current version, changes to HTML + and JavaScript files are automatically reloaded when you save. We are currently working on Live Preview + support for HTML and JavaScript. Live previews are also only possible with Google Chrome, but we hope + to bring this functionality to all major browsers in the future. +
+ ++ For those of us who haven't yet memorized the color equivalents for HEX or RGB values, Brackets makes + it quick and easy to see exactly what color is being used. In either CSS or HTML, simply hover over any + color value or gradient and Brackets will display a preview of that color/gradient automatically. The + same goes for images simply hover over the image link in the Brackets editor and it will display a + thumbnail preview of that image. +
+ + + To try out hover preview for yourself, place your cursor on the tag at the top of this + document and press Cmd/Ctrl + E to open a CSS quick editor. Now simply hover over any of the + color values within the CSS. You can also see it in action on gradients by opening a CSS quick editor + on the HTML tag at the top of this page and hovering over any of the background image values. To test + out the image preview, place your cursor over the screenshot image included earlier in this document. + + + ++ Brackets is an open-source project. Web developers from around the world are contributing to build + a better code editor. Many more are building extensions that expand the capabilities of Brackets. + Let us know what you think, share your ideas or contribute directly to the + project. +
+