<!DOCTYPE html>
<html lang="en">
<head>
{{> gaOptimize}}
<meta
charset="utf-8"
http-equiv="X-UA-Compatible"
content="IE=edge,chrome=1"
/>
<link rel="icon" href="{{imageBaseUrl}}/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Joplin, the open source note-taking application" />
<link rel="stylesheet" href="{{{assetUrls.css.fontawesome}}}">
<link
rel="stylesheet"
href="{{cssBaseUrl}}/bootstrap5.0.2.min.css"
as="style"
/>
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap"
rel="stylesheet"
as="style"
media="all"
onload="this.media='all'; this.onload = null"
/>
<script
src="{{jsBaseUrl}}/jquery-3.6.0.min.js"
rel="preload"
as="script"
></script>
<link rel="stylesheet" href="{{{assetUrls.css.site}}}" as="style" />
<title>Joplin</title>
</head>
<body class="front-page website-env-{{env}}">
<div class="container-fluid" id="main-container">
{{#navbar}}
{{> navbar}}
{{/navbar}}
<div class="blue-bg" id="top-section">
<div class="container">
<div class="row">
<div class="col-12">
<div class="alert alert-danger alert-env-dev" role="alert">
Running in {{env}} mode!
</div>
<h1 class="text-center">
Free your <span class="frame-bg frame-bg-blue">notes</span>
</h1>
<p class="text-center" id="top-section-text">
Joplin is an open source note-taking app. Capture your thoughts and securely access them from any device.
</p>
<br />
<br />
<p class="text-center">
<a href="{{baseUrl}}/download/" class="button-link btn-blue download-button">Download the app</a>
{{#showJoplinCloudLinks}}
<a href="{{baseUrl}}/plans/" class="button-link btn-trans plans-button">Sign up with Joplin Cloud</a>
{{/showJoplinCloudLinks}}
</p>
<picture class="img-fluid img-center" id="top-section-img">
<source type="image/webp" srcset="
{{imageBaseUrl}}/home-top-img-4x.webp 4820w,
{{imageBaseUrl}}/home-top-img-2x.webp 2388w,
{{imageBaseUrl}}/home-top-img.webp 1205w
">
<source type="image/png" srcset="
{{imageBaseUrl}}/home-top-img-2x.png 2388w,
{{imageBaseUrl}}/home-top-img.png 1205w
">
<img id="top-section-img-img" src="{{imageBaseUrl}}/home-top-img-2x.png">
</picture>
</div>
</div>
</div>
</div>
<div id="multimedia-notes-section">
<div class="container">
<div class="row">
<div class="col-12 col-md-5 col-xxl-6">
<div class="ml-30 ml-mobile-0">
<h2 id="multimedia-title">
<span class="frame-bg frame-bg-yellow">Multimedia</span> notes
</h2>
<p id="multimedia-text">
Images, videos, PDFs and audio files are supported. Create
math expressions and diagrams directly from the app. Take
photos with the mobile app and save them to a note.
</p>
<br />
<p>
<a href="{{baseUrl}}/download/" class="button-link btn-blue">Download the app</a>
</p>
</div>
</div>
<div class="col-12 col-md-7 col-xxl-6">
<br class="d-block d-lg-none" />
<br class="d-block d-lg-none" />
<img
src="{{imageBaseUrl}}/multimedia-notes-img.png"
alt=""
class="img-fluid"
id="multimedia-notes-section-img"
/>
</div>
</div>
</div>
</div>
{{#showJoplinCloudLinks}}
<div id="work-together-section" class="gray-bg">
<div class="container">
<div class="row">
<div class="col-6 d-none d-md-block"></div>
<div class="col-12 col-md-6">
<div class="ml-30 ml-mobile-0">
<h2>Work <span class="frame-bg frame-bg-yellow">together</span></h2>
<p>
With Joplin Cloud, share your notes with your friends, family
or colleagues and collaborate on them.
</p>
<p>You can also publish a note to the internet and share the URL with others.</p>
<br/>
<p>
<a href="{{baseUrl}}/plans/" class="button-link btn-blue">Try it now</a>
</p>
<br class="d-block d-md-none" />
<br class="d-block d-md-none" />
<div class="text-center">
<img
src="{{imageBaseUrl}}/work-together-img.png"
alt=""
class="img-fluid d-block-inline d-md-none"
/>
</div>
</div>
</div>
</div>
</div>
</div>
{{/showJoplinCloudLinks}}
<div id="save-web-section" class="blue-bg">
<div class="container">
<div class="row">
<div class="col-12 col-md-6">
<div class="ml-30 ml-mobile-0">
<h2 id="save-web-title">
Save <span class="frame-bg frame-bg-blue">web pages</span> <br />as notes
</h2>
<p>
Use the web clipper extension, available on Chrome and
Firefox, to save web pages or take screenshots as notes.
</p>
<br />
<p>
<a href="{{baseUrl}}/clipper/" class="button-link btn-blue">Get the clipper</a>
</p>
</div>
</div>
<div class="col-12 col-md-6">
<br class="d-block d-md-none" />
<br class="d-block d-md-none" />
<img
src="{{imageBaseUrl}}/save-web-img.png"
alt=""
class="img-fluid"
id="save-web-img"
/>
</div>
</div>
</div>
</div>
<div id="customise-it-section">
<div class="container">
<div class="row">
<div class="d-none d-md-block col-md-6">
<img
src="{{imageBaseUrl}}/customise-it-img.png"
alt=""
class="img-fluid"
/>
</div>
<div class="col-12 col-md-6">
<div class="ml-30 ml-mobile-0">
<h2 id="customise-it-title">
<span class="frame-bg frame-bg-yellow-lg">Customise</span> it
<br />
to your needs
</h2>
<p>
Customise the app with plugins, custom themes and multiple
text editors (Rich Text or Markdown). Or create your own
scripts and plugins using the Extension API.
</p>
<br />
<p>
<a href="{{baseUrl}}/help/#plugins" class="button-link btn-blue">Find out more</a>
</p>
<br class="d-block d-lg-none" />
<br class="d-block d-lg-none" />
<img
src="{{imageBaseUrl}}/customise-it-img.png"
alt=""
class="img-fluid d-block d-md-none"
/>
</div>
</div>
</div>
</div>
</div>
<div id="your-note-section" class="blue-bg">
<div class="container">
<div class="row">
<div class="col-12">
<h2 class="text-center">
Your notes, <span class="frame-bg frame-bg-blue-lg">everywhere</span> you are
</h2>
<p class="text-center" id="your-note-text">
Access your notes from your computer, phone or tablet by synchronising with various services, including Joplin Cloud, Dropbox and OneDrive. The app is available on Windows, macOS, Linux, Android and iOS. A terminal app is also available!
</p>
<br />
<br />
<p class="text-center">
<a href="{{baseUrl}}/download/" class="button-link btn-blue">Download it now</a>
</p>
<br />
</div>
</div>
</div>
</div>
<div id="your-data-section" class="gray-bg">
<div class="container">
<div class="row">
<div class="col-12 col-md-6">
<br class="d-block d-md-none" />
<div class="ml-30 ml-mobile-0">
<h2>100% <span class="frame-bg frame-bg-yellow-lg">your data</span></h2>
<p>
The app is open source and your notes are saved to an open
format, so you'll always have access to them. Uses End-To-End Encryption (E2EE) to secure your notes and ensure no-one but
yourself can access them.
</p>
<br />
<p>
<a href="{{baseUrl}}/e2ee/" class="button-link btn-blue">More about E2EE</a>
</p>
</div>
</div>
<div class="col-12 col-md-6">
<br class="d-block d-md-none" />
<br class="d-block d-md-none" />
<br class="d-block d-md-none" />
<img
src="{{imageBaseUrl}}/your-data-img.png"
alt=""
class="img-fluid"
/>
</div>
</div>
</div>
</div>
<div id="in-the-press-section">
<div class="container">
<div class="row">
<div class="col-12">
<br />
<h2 class="text-center">
In the <span class="frame-bg frame-bg-yellow">Press</span>
</h2>
<br />
</div>
<div class="d-none d-md-block col-3">
<img
src="{{imageBaseUrl}}/in-the-press-img-left.png"
alt=""
class="img-fluid d-none d-md-block"
/>
</div>
<div class="d-none d-md-block col-6">
<div
id="{{pressCarouselRegular.id}}"
class="carousel slide d-none d-md-block"
data-bs-ride="carousel"
>
{{#pressCarouselRegular}}
{{> pressCarouselButtons}}
{{/pressCarouselRegular}}
<div class="carousel-inner">
{{#pressCarouselRegular.items}}
{{> pressCarouselItem}}
{{/pressCarouselRegular.items}}
</div>
</div>
</div>
<div class="d-none d-md-block col-3">
<div class="text-right">
<br />
<img
src="{{imageBaseUrl}}/in-the-press-img-right.png"
alt=""
class="img-fluid d-none d-md-inline-block"
/>
</div>
</div>
</div>
<div class="row d-block d-md-none">
<div class="col-12">
<div
id="{{pressCarouselMobile.id}}"
class="carousel slide"
data-bs-ride="carousel"
>
{{#pressCarouselMobile}}
{{> pressCarouselButtons}}
{{/pressCarouselMobile}}
<div class="carousel-inner">
{{#pressCarouselMobile.items}}
{{> pressCarouselItem}}
{{/pressCarouselMobile.items}}
</div>
</div>
</div>
</div>
</div>
</div>
<div id="sponsors-section" class="gray-bg">
<div class="container">
<div class="row">
<div class="col-12">
<h2 class="text-center">
Our <span class="frame-bg frame-bg-blue-lg">sponsors</span>
</h2>
<p class="text-center" id="your-note-text">
Thank you for your support!
</p>
<br />
<div class="text-center sponsors-org">
{{#sponsors.orgs}}
<a class="sponsor-org-item" href="{{url}}"><img title="{{title}}" src="{{imageBaseUrl}}/sponsors/{{imageName}}"></a>
{{/sponsors.orgs}}
</div>
<div class="text-center sponsors-github">
{{#sponsors.github}}
<div class="sponsor-github-item">
<a href="https://github.com/{{name}}" title="{{name}}">
<img width="50" src="https://avatars2.githubusercontent.com/u/{{id}}?s=96&v=4">
</a>
</div>
{{/sponsors.github}}
</div>
<br />
</div>
</div>
</div>
</div>
{{> footer}}
</div>
<script
src="{{jsBaseUrl}}/bootstrap5.0.2.min.js"
rel="preload"
as="script"
></script>
<script src="{{{assetUrls.js.script}}}"></script>
{{> analytics}}
</body>
</html>