Mailspring/index.html

---
layout: default
title: N1 - The extensible, open source mail client.
overview: true
---

{% include hero.html %}

<div id="static-client-images">
  <div id="static-screenshot-wrap">
    <img class="static-screenshot" src="{{ site.baseurl }}/images/4-pane-screenshot-no-shadow.png"/>
    <img class="static-composer" src="{{ site.baseurl }}/images/composer-no-shadow.png"/>
  </div>
</div>

<div id="container" class="container">

  <div id="window-container-after-spacer" style="text-align:center;">
    <p>Download now for Mac OS X, Windows, and Linux!</p>
    <a id="bottom-download-button" class="btn btn-large btn-emphasis" href="https://invite.nylas.com/download">
      Download
    </a>
  </div>

  <!--
  <div id="static-client" class="grid">
    <div class="unit whole" style="text-align: center; margin-top:60px;">
      <div class="cta" style="margin-top:40px;">
        <a class="btn btn-large" style="margin-right:10px;" href="{{ site.baseurl }}/docs">
          Explore the Docs
        </a>
        <a class="btn btn-large btn-emphasis" href="https://invite.nylas.com/download">
          Download
        </a>
      </div>
    </div>
  </div>
  -->

  <div id="beautiful-inside-and-out" class="grid feature" style="margin-top: 60px;">
    <div class="unit two-thirds" style="margin-top:60px;">
      <h3>Beautiful inside and out.</h3>
      <p style="max-width:530px;">N1 is designed to be friendly, with an emphasis on clean typography, subtle drop shadows, and delightful buttons. When you use N1, things feel familiar with nothing out of place. It's just the way things should be.</p>
    </div>
    <div class="unit one-third" style="text-align: right;">
      <img src="{{ site.baseurl }}/images/watercolor_tree.png" style="width:300px;"/>
    </div>
  </div>

  <div id="all-platforms" class="grid feature">
    <div class="unit one-third">
      <img src="{{ site.baseurl }}/images/watercolor_earth.png" style="width:300px;"/>
    </div>
    <div class="unit two-thirds">
      <h3>All platforms and providers.</h3>
      <p style="max-width:530px;">
      N1 is compatible with hundreds of email providers, including Gmail, Yahoo, iCloud, Microsoft Exchange, and more. It's a desktop app that can run offline, and feels great on Mac, Windows, and Linux. N1 is for everyone.</p>
    </div>
  </div>

  <div id="developers-welcome" class="grid feature">
    <div class="unit two-thirds">
      <h3>Developers welcome.</h3>
      <p style="max-width:530px;">
      N1 is designed for extensibility, and includes a JavaScript plugin architecture that enables anyone to create powerful new features. Plugins can add buttons, sidebars, composer elements, or remix the entire UI. And if plugins aren't enough, the N1 codebase is also <a href="https://github.com/nylas/n1">open&nbsp;source&nbsp;free&nbsp;software</a>. Developers, start your engines.
      </p>
    </div>
    <div class="unit one-third">
      <img src="{{ site.baseurl }}/images/watercolor_airdrop.png" style="width:300px;"/>
    </div>
  </div>

</div>


<div class="hacker">
  <div class="grid" style="position:relative;">
    <div class="unit half" style="text-align: left;">
      <h3 style="margin-bottom:0; color:white;">Born from the browser.</h3>
      <h4 style="max-width:500px; font-size:24px; color:white;">N1 can be extended using JavaScript, NodeJS, React, Flux, and Electron.</h4>
      <div class="cta" style="margin-top:40px;">
        <a href="{{ site.baseurl }}/examples" class="btn btn-large" style="margin-right:10px;">
          See Examples
        </a>
        <a href="{{ site.baseurl }}/docs/" class="btn btn-large btn-emphasis">
          Get Started
        </a>
      </div>
    </div>
    <div class="unit half">
      <pre style="background-color:rgba(0,0,0,0.4); color:white; font-size: 0.8em; line-height: 1.6em; margin-right:45px; padding-left: 20px; border-radius:4px; border:1px solid rgba(0,0,0,0.4);">
        <code class="javascript">
render: <span class="hljs-keyword">function</span>() {
  <span class="hljs-keyword">return</span> <span class="hljs-tag">&lt;Popover </span>
    <span class="hljs-literal">ref</span>=<span class="hljs-string">"popover"</span>
    <span class="hljs-literal">className</span>=<span class="hljs-string">"translate-language-picker pull-right"</span>
    <span class="hljs-literal">buttonComponent</span>={<span class="hljs-variable">@_renderButton()</span>}&gt;
    <span class="hljs-tag">&lt;Menu</span>
      <span class="hljs-literal">items</span>={ <span class="hljs-tag">Object</span>.keys(<span class="hljs-tag">YandexLanguages</span>) }
      <span class="hljs-literal">onSelect</span>={<span class="hljs-variable">@_onTranslate</span>}/&gt;
  <span class="hljs-tag">&lt;/Popover&gt;</span>
}</code>
        </pre>
    </div>
    <div style="position:absolute; width:300px; height:200px; bottom:0; right:0;">
      <img src="{{ site.baseurl }}/images/popover_translate.png" style="width:300px;"/>
    </div>
  </div>
</div>

<div class="container">
<div class="grid">
  <h3>Meet the team behind N1</h3>
  <p>
    We're a <a href="https://nylas.com/team-and-culture/">small team of engineers</a> solving
    big problems - and we're <a href="https://nylas.com/jobs">hiring!</a>
    If you'd like to get in touch, feel free to email us at <a href="mailto:hello@nylas.com">hello@nylas.com</a>.
    N1 is <a href="https://github.com/nylas/N1">open source</a> and we welcome
    pull requests!
  </p>

  <p>You can learn more about the engineering behind N1 through some of
  the talks we've given:</p>

  <div class="unit half">
    <a href="https://www.youtube.com/watch?v=zIJf8TGgJ2M">
      <img width="100%" src="{{ site.baseurl }}/images/talk_brooklynjs.jpg">
      <div style="font-size:20px; margin-top:10px;">Brooklyn.js: Building N1 in Electron</div>
    </a>
  </div>
  <div class="unit half">
    <a href="https://www.youtube.com/watch?v=Uu4Yz2HmCgE">
      <img width="100%" src="{{ site.baseurl }}/images/talk_Uu4Yz2HmCgE.png">
      <div style="font-size:20px; margin-top:10px;">ReactEurope 2015: How React & Flux Turn Apps Into Extensible Platforms</div>
    </a>
  </div>
  <div class="unit half">
    <a href="https://www.youtube.com/watch?v=JIRXVGVPzn8">
      <img width="100%" src="{{ site.baseurl }}/images/talk_JIRXVGVPzn8.png">
      <div style="font-size:20px; margin-top:10px;">Bay Area Electron Meetup: Making the web feel native</div>
    </a>
  </div>
</div>
</div>

<div style="padding:30px;"></div>