Mailspring/index.html

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

{% include hero.html %}

<div id="container" 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="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; color:white;">Innovate on top of email with 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="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 style="padding:30px;"></div>