How to make Atom behave like Brackets


I’ve been looking in plugins a lot for something that would make it behave like Brackets but I couldn’t.

Basically I want Atom to complete <di into

when I tab or press return and put my cursor between the tag and the closing tag.
It would also be nice if it could highlight the area I’m in while I’m in preview mode.

Lastly, I’ve read somewhere that Atom may become paid later on. Is that true?


Live Development like in Brackets editor (HTML+CSS)
Brackets editor preview DOM highlighting?
Browser auto update code in real time
Connection between a browser and ATOM
How do I get feature X like in Brackets?
Missing or unfound wanted functions

See the FAQ. There were rumors at one point that they were going to make it paid, but that was done with over a year and a half ago.



Any suggestions for my request though?


No, not really. I never used Brackets so I don’t have a lot of ideas. There are other topics here that discuss various individual features though.


What you’re describing here sounds an awful lot like emmet

I could be misunderstanding what you’re requesting here, but are you talking about something like the highlight-line package?


What he meant was whenever the text cursor is on a DOM element, the element in the preview has an outline/highlight to show the dimensions of the element, and what’s happening to it when you’re editing the code.


Yup, exactly.


So like… It’s been nearly two weeks, and the question hasn’t actually been answered :S

Also, I made a post about this which got instantly closed by a mod, and I was directed to this thread.


What answer are you looking for? A suggestion of emmet was made for the tab-completion capability and people apparently don’t have any ideas for the DOM preview capability.

Yes, I closed it and explained why in your closed topic. Is there a question you had about that?


Yea emmet did it for me. I don’t understand you though, what capabilities are you talking about it that the preview has? I would love to use it more often :slightly_smiling:


It is my understanding that Brackets has a capability that when the cursor is in a location in an HTML file, that the same location in an HTML preview is highlighted in some way. I’m stating that it would seem nobody has any idea of packages that grant Atom this capability.

Looking for a package that highlights the preview in real time as I am working on that line

Ah okay. Thanks for clearing that out.


Concerning brackets’ “Live Preview” some input from a quite experienced (former) brackets user: At a first glance it’s great and it works great with “static” html, css and js.

But as soon you want to

  • use custom CSS transforms like sass/less/stylus (Yes, there is experimental support for SASS and Autoprefixr, but it’s still buggy and you’re very limited)
  • use custom JS-transforms (es6-transpilers like babel, coffeescript, typescript, jsx)
  • basically ANY transformation using a task-runner (gulp, grunt, broccoli, webpack, rollup, …)
  • have dynamic templates (any server-side application)
    you will face its limitations.

The bottom line is, that editor plugins will probably never be able to catch up with the fast-pacing node-world, where great frontend development tools appear every week. And do developers really want to rely completely on some editor plugins (which therefore require EVERY developer in the team to have the same editor, the same plugins and the same settings).

IMO the way to go is to offer integrations for task runners to enable this live-editing feeling instead of trying to create editor-plugins for every nodejs-plugin. Task runners (compiling jsx, typescript, sass, etc. with custom logic) should do the job, the editor should only offer integrations to start these transformations (without requiring the user to save the file) or maybe send some additional information through the task-runner-chains into the browser (e.g. a css selector to highlight the element in the browser, where the cursor is currently in the editor. IMO atom should just try to enrich existing task-runner-chains instead of trying to replace them

Btw, Takana seems to some similar sort of integration.



Thank you for your insights. Too bad this is the case. I love the realtime update of Brackets. I knew there had to be a “it’s too good to be true” glitch.