An easy way to display your messages in Atom

Usage no npm install needed!

<script type="module">
  import atomMessagePanel from '';


The Atom Message Panel

npm version npm license npm downloads Gitter chat

The easy way to display your messages in Atom.



To streamline how plugin messages are displayed in Atom! :fist:

Checkout this list of packages already using Atom Message Panel.



var MessagePanelView = require('atom-message-panel').MessagePanelView,
    PlainMessageView = require('atom-message-panel').PlainMessageView;

var messages = new MessagePanelView({
  title: 'It\'s alive..... IT\'S ALIIIIIVE!!!!'


messages.add(new PlainMessageView({
  message: 'I did it mommy, I made my first Atom Message Panel!',
  className: 'text-success'


{MessagePanelView, LineMessageView} = require 'atom-message-panel'

messages = new MessagePanelView
    title: 'Remember your Coffee!'


messages.add new LineMessageView
    line: 1
    character: 4
    message: 'You haven\'t had a single drop of coffee since this character'



It all depends on this guy, this is your init function and you will need it :sunglasses:

  • new MessagePanelView(params):
  • title: the title of your panel
  • rawTitle: sat to true will allow the title to contains HTML (default is false)
  • closeMethod: What should the close button do? hide (default) or destroy.
  • speed: how fast you what the fold/unfold function to run (default is fast)
  • recentMessagesAtTop: should new messages be added at the top? (default is false)
  • position: should the panel attach to the "top", "bottom", "left" or "right" (default is bottom)
  • maxHeight: set a max-height of the panel body (default is 170px)
  • attach(): append the panel to the Atom view
  • close(): closes the panel
  • setTitle(title:string,raw?:boolean): change the panel title
  • toggle(): fold/unfold the panel
  • unfold(): unfold the panel
  • clear(): clear the body
  • add(): add a view to the panel
  • remove(index): remove a view from the panel
  • state(): get current state informations about your panel


Lets you add a simple message :speech_balloon:

  • PlainMessageView(params):
  • message: your message to the people
  • raw: sat to true will allow the mesage to contains HTML (default is false)
  • className: adding css classes to your message (this is optional)


Lets you add messages for a specific line and character, and it will even navigate the user to that position with a single click :boom:

  • LineMessageView(params):
  • message: your message to the people
  • line: what line are we talking about?
  • file: so, was that in some other file? (this is optional)
  • character: lets be more specific of what we are talking about (this is optional)
  • preview: lets you display a code snippet inside a pre tag (this is optional)
  • className: adding css classes to your message (this is optional)


MIT © tcarlsen