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 id="static-screenshot" src="images/4-pane-screenshot-no-shadow.png"/>
    <img id="static-composer" src="images/composer-no-shadow.png"/>
  </div>
</div>

<div id="container" class="container">
  <!--
  <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 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="images/watercolor_tree.png" style="width:300px;"/>
    </div>
  </div>

  <div class="grid feature">
    <div class="unit one-third">
      <img src="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, and Microsoft Exchange. It works great on Mac, Windows, and Linux, and has the features you already expect, like keyboard shortcuts, notifications, and multi-window controls. It feels at home on any OS, with any address.</p>
    </div>
  </div>

  <div class="grid feature">
    <div class="unit two-thirds">
      <h3>Tailored for your life.</h3>
      <p style="max-width:530px;">N1 supports plugins to add custom features in just a few lines of code. Workflows that previously required separate apps, like language translation or CRM sync, can now be added directly to your email experience. It's the first truly personal email client.
      </p>
    </div>
    <div class="unit one-third">
      <img src="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;">Welcome developers.</h3>
      <h4 style="max-width:500px; font-size:24px; color:white;">N1 can be extended using JavaScript, NodeJS, React, and Electron.</h4>
      <div class="cta" style="margin-top:40px;">
        <a href="examples" class="btn btn-large" style="margin-right:10px;">
          See Examples
        </a>
        <a href="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="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/about">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>

  <div class="unit half">
    <a href="https://www.youtube.com/watch?v=Uu4Yz2HmCgE">
      <img width="100%" src="images/talk_Uu4Yz2HmCgE.png">
      <h4 style="font-size:20px;">ReactEurope 2015: How React & Flux Turn Apps Into Extensible Platforms</h4>
    </a>
  </div>
  <div class="unit half">
    <a href="https://www.youtube.com/watch?v=JIRXVGVPzn8">
      <img width="100%" src="images/talk_JIRXVGVPzn8.png">
      <h4 style="font-size:20px;">Bay Area Electron Meetup: Making the web feel native</h4>
    </a>
  </div>
</div>
</div>

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