Confused about the line between Electron and Atom


Hi Folks. I’m learning about these two impressive systems to evaluate applicability to our new application, and I’m confused about where developer features/APIs cross over. For example, I asked about whether some rich text decoration features are possible, and found out about Decorations, but these are an Atom API, not an Electron one.

My guess is that Electron handles the architecture of getting Node.js and Chromium to play together, and Atom adds text editing applications upon that. Also, I think that Atom is both an out-of-the-box text editing application and APIs that expose features allowing extension and, I hope, repurposing for custom text-oriented applications.

Am I way off? :sunny:


Yup, I think you’ve basically understood it. An Electron window basically behaves the same as any browser window, with the extension of being able to use node.js APIs for accessing the file system and stuff. You can, of course, chuck anything you want to in that browser window, including text editing components like CodeMirror.

If your application is remotely text-editing-oriented, extending Atom with a plugin, rather than starting from scratch, is probably the right way to go.


Thank you for your answer. Atom + plugin would feel just like that, correct? I.e., the user would have to know atom, how to interact with plugin commands, etc. In my case I need the app to feel purpose-built. Q: Is it possible to completely ‘take over’ Atom to make it work this way, or would I be in Electron territory? If so, how hard would it be to access the Atom APIs from Electron?


I suppose the important distinction is that Atom is a text editor built on top of the Electron framework.

Atom is an application itself, and while beautifully open-source and hackable if you did want to use it as a base for an app, it isn’t specifically designed for that purpose.

It really depends what your exact needs are though. Do you need a substantial base for your app with a few extras, or do you need something relatively basic you can build from the ground up with a few specific features? Who is it for, and would a reskinned, slightly upgraded build of Atom suffice?


It doesn’t really makes sense to use Atom APIs without Atom, since the text editor components and such aren’t available as independent libraries; you’d probably have to use a different text editor component with its own APIs.

If you need things to feel purpose-built you can fork Atom itself and set up custom defaults and themes, remove unnecessary plugins and so on. This is roughly what I’m doing as part of the Julia IDE work; providing the core functionality as plugins which can be installed in Atom proper, and distributing a custom bundle which feels more like opening up a purpose-built IDE.


Thank you, @caffiend and @one_more_minute . I think I’m on the start-with-Electron side. Question: How hard would it be to figure out how these features could be implemented on top of Electron? For example, I was kindly pointed to the package. How many onion layers are there between it and the Chromium widget? Doesn’t everything percolate down to HTML and CSS?


Well Pigments is specifically an Atom plugin, so it specifically refers to Atom’s structure, etc. Electron is a blank slate, just a web page in a native window. Without rewriting Pigments, you’d need to write an analogue to Atom from scratch filling in the gaps from nothing to what you need from Pigments.

The difficulty is writing a text editor from scratch.


Good points, @caffiend. I’m hoping that the text itself being read-only will help.


What about tools such as VS Code, Particle Dev, and They are all extremely Atom-ish, some of them (VS Code in particular) are so customized I can see them being started from either Electron or Atom. I’m curious which project these tools started from, anyone have any insight?


VSCode is built on top of vanilla Electron using the Monaco Editor (which is also used for the Visual Studio Online code editor), they didn’t reuse anything from the Atom editor as far as I know.