Mailspring/index.html

---
layout: default
title: N1 - An extensible, open-source mail client built on the modern web.
overview: true
---

<div class="hero">
  <div class="hero-bg-left"></div>
  <div class="hero-bg-right"></div>
  <div class="copy">
    <img class="screenshot" src="images/hero_screenshot.png" width="100%">
  </div>
</div>

<div class="container">
  <div class="grid">
    <div class="unit whole" style="text-align: center; margin-top:60px;">
      <h1 style="margin-bottom:0;">N1</h1>
      <h4 style="max-width:500px;">An extensible, open-source mail client built on the modern web.</h4>
      <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>Legible &amp; Beautiful</h3>
      <p>Meticulous design that supports your actual handling of email. With a  subdued visual style
 and highly refined typography, N1 is easily the most uniquely designed and beautiful mail client available.</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>Works everywhere.<br>Supports everyone.</h3>
      <p>N1 is a proper desktop client that runs on all major operating systems. It isn't bound
to live in a web browser, gets proper desktop notifications and integrates well with your
system. Email shouldn't simply live in one of your browser tabs.</p>
      <img src="images/platforms.png" style="width:317px;"/>
    </div>
  </div>

  <div class="grid feature">
    <div class="unit two-thirds">
      <h3>Designed for Extensibility.</h3>
      <p> In N1, plugins are first-class citizens - many of them make up
core parts of the experience. We've exposed rich, powerful APIs that let you build
everything from the simplest workflow enhancements to entirely new views of your personal data.
</p>
    </div>
    <div class="unit one-third">
      <img src="images/watercolor_airdrop.png" style="width:300px;"/>
    </div>
  </div>

</div>


<div class="hacker">
  <div class="container">
    <div class="grid">
      <div class="unit half" style="text-align: left; margin-top:60px;">
        <h3 style="margin-bottom:0; color:white;">Welcome Developers.</h3>
        <h4 style="max-width:500px; color:white;">Innovate on top of email with JavaScript, NodeJS and React.</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><code class="lang-coffee">render: =&gt;
          &lt;<span class="hljs-type">Popover</span> <span class="hljs-keyword">ref</span>=<span class="hljs-string">"popover"</span>
                   className=<span class="hljs-string">"translate-language-picker pull-right"</span>
                   buttonComponent={@_renderButton()}&gt;
            &lt;<span class="hljs-type">Menu</span> items={ <span class="hljs-type">Object</span>.keys(<span class="hljs-type">YandexLanguages</span>) }
                  itemKey={ (item) -&gt; item }
                  itemContent={ (item) -&gt; item }
                  onSelect={@_onTranslate}
                  /&gt;
          &lt;/<span class="hljs-type">Popover</span>&gt;
        </code></pre>

      </div>
    </div>
  </div>
</div>