Hacking around with the Atom Editor


#1

Hi all, I recently cloned and built Atom as I was wanting to play around with it after using Electron for some projects.

I was expecting Atom to be a “normal” Electron app, but was surprised to see a lack of templates/view files and things like a python dependency. Almost the entire of the source is in CoffeeScript, and was a bit difficult to decipher what does what.

Does anyone know of any guides or tutorials that explain how to get started customizing the editor itself? I was able to do a few trivial changes, like adding menu options, but would like to do something like create a new pane inside the editor window.


#2

As answered in the Atom Slack:

Atom is an Electron app, that is true. On the other hand, “just another Electron app” is perhaps a bit of a stretch since Electron was created specifically for (or more literally from) Atom. Electron was originally called “Atom Shell”, as a matter of fact.

Also, Atom doesn’t need Python to run though it may be used in some parts of the build process on some platforms

It is true that you don’t see HTML or templating files … but those aren’t required in an Electron app

You can find views in the code base though … it may be that you’re not seeing them a lot in the core Atom code base though because a lot of Atom’s UI is in packages such as tree-view, settings-view, find-and-replace, etc

Have you checked out the Atom Flight Manual? There are whole sections on how to customize Atom in simple and advanced ways.


#3

Thanks for the info. I’ve checked out the Atom Flight Manual a tad bit, though it didnt seen to have much info on modifying Atoms UI.

Ill have to read through the code a bit more carefully. Thanks!


#4

You should search for some packages that expand Atom’s functionality and play around with them. You might find flex-tool-bar interesting. When you’re ready to make your own UI features, the Pane and Panel APIs are there for you.