Working with the Atom API

An introduction to the Atom API, with plenty of useful links to source code.

The official API docs for Atom are here https://atom.io/docs/api, but they're hard to navigate. It's usually quicker and more informative to read the source.

Working with the UI

The core UI components

Workspace

Each window has a single workspace that holds projects (i.e. directories).

• The view: https://github.com/atom/atom/blob/master/src/workspace-view.coffee
• The model: https://github.com/atom/atom/blob/master/src/workspace.coffee

You can access the instance in the JavaScript console with atom.workspaceView.

Pane

Each workspace can be split into multiple panes. A pane holds a group of pane items (represented in the UI with tabs).

• The view: https://github.com/atom/atom/blob/master/src/pane-view.coffee
• The model: https://github.com/atom/atom/blob/master/src/pane.coffee

You can access the active pane in the JavaScript console with atom.workspace.getActivePane().

Pane Item

A pane item usually corresponds to a tab. It can be any HTML element but will be an instance of TextEditor in most cases.

• The view: https://github.com/atom/atom/blob/master/src/text-editor-view.coffee
• The model: https://github.com/atom/atom/blob/master/src/text-editor.coffee

You can access the active pane item in the JavaScript console with atom.workspace.getActivePaneItem(). You can also use atom.workspace.getActiveTextEditor(), but that will return null if the active pane item is not a TextEditor.

Using predefined stylesheet variables

Atom has a list of UI variables to be used in stylesheets: https://atom.io/docs/latest/theme-variables

These variables should be preferred to hardcoded values because they can be customized by the user's theme.

Icons

The stock Atom icons are actually an icon font. You can see the included icons at:

• https://octicons.github.com/

NOTE: When using the font icons in Atom, replace octicon with icon. For example, octicon-device-mobile in the link above becomes icon-device-mobile.