Build an Mailspring plugin

Extend your mail client in five minutes

Plugins lie at the heart of Mailspring. The thread list, message composer and other core parts are just packages bundled with the app. You can create your own packages in a matter of minutes!

1. Install Mailspring

Download and install Nylas for Mac OS X (or Linux). Open it and sign in to your email account.

2. Create a plugin

First, switch over to Developer Mode. Go to the Developer menu and select Run with debug flags.... Developer Mode turns on better exception logging and enables hot-reloading.

Next, choose Create a Plugin... from the Developer menu, and name your new plugin. This creates a directory in ~/.nylas/dev/packages containing your new plugin (on MacOS it can be found in ~/Library/Application\ Support/Mailspring-dev/dev/packages/).

3. Start hacking!

Open the file <your-package-name>/lib/my-message-sidebar.cjsx in your favorite text editor. Your new plugin is pre-filled with a simple example component for the message sidebar (on the right when you're viewing an email). It only shows the name of the selected contact, but with a few quick changes we can build something more interesting.

Scroll down to line 34, the render method. Replace the code here to change what shows up in the sidebar. See your changes happen live when you save!

/lib/my-message-sidebar.cjs

componentWillUnmount: =>
  @unsubscribe()

  render: =>
      if @state.contact
          content = @_renderContent()
      else
          content = @_renderPlaceholder()

       <div className="my-message-sidebar">
          {content}
      </div>

  _renderContent: =>

Try opening a message in Mailspring - you'll see the new package's example text show up on the sidebar. Delete the content of the render method and save - the text should disappear.

Now let's add something - a bar that changes color based on the active contact in the sidebar. Replace the existing render method with the code to the right, then save the file.

/lib/my-message-sidebar.cjsx


  render: =>
       <div className="email-color" style={@_getStyles()}></div>

  _getStyles: =>
       domain = @state.contact.email.split("@")[1]
       hue = (domain.split('').reduce(((sum, char) -> sum + char. charCodeAt(0)), 0) % 36)*10
       color = "hsl(#{hue}, 62%, 57%)"
       return {background: color, height: 2, 'margin-top': 5}

Go back to Mailspring, and try opening a message. You should see a horizontal bar that changes color based on the domain of the contact's email address.

That's it!

Extending the Mailspring mail client is really that simple. Try making more code changes and seeing how they affect the message sidebar. When you're ready, follow one of the links below to learn more.

Keep building!

Build even more functionality into the message sidebar in our extended tutorial that picks up where this one left off.

Getting Started