Skip to content

Commit d3ca65a

Browse files
mattconemattcone
committed
add JotBird
1 parent ee44e6f commit d3ca65a

11 files changed

Lines changed: 270 additions & 10 deletions

File tree

‎_getting-started/flavors-of-markdown.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
One of the most confusing aspects of using Markdown is that practically every Markdown application implements a slightly different version of Markdown. These variants of Markdown are commonly referred to as *flavors*. It's your job to master whatever flavor of Markdown your application has implemented.
44

5-
To wrap your head around the concept of Markdown flavors, it might help to think of them as language dialects. People in New York City speak English just like the people in London, but there are substantial differences between the dialects used in both cities. The same is true for people using different Markdown applications. Using [Dillinger](/tools/dillinger/) to write with Markdown is a vastly different experience than using [Ulysses](/tools/ulysses/).
5+
To wrap your head around the concept of Markdown flavors, it might help to think of them as language dialects. People in New York City speak English just like the people in London, but there are substantial differences between the dialects used in both cities. The same is true for people using different Markdown applications. Using [JotBird](https://www.jotbird.com) to write with Markdown is a vastly different experience than using [Ulysses](/tools/ulysses/).
66

77
Practically speaking, this means you never know exactly what a company means when they say they support "Markdown." Are they talking about only the [basic syntax elements](/basic-syntax/), or all of the basic and [extended syntax elements](/extended-syntax/) combined, or some arbitrary combination of syntax elements? You won't know until you read the documentation or start using the application.
88

‎_getting-started/how-does-it-work.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
## How Does it Work?
22

3-
Dillinger makes writing in Markdown easy because it hides the stuff happening behind the scenes, but it's worth exploring how the process works in general.
3+
JotBird makes writing in Markdown easy because it hides the stuff happening behind the scenes, but it's worth exploring how the process works in general.
44

55
When you write in Markdown, the text is stored in a plaintext file that has an `.md` or `.markdown` extension. But then what? How is your Markdown-formatted file converted into HTML or a print-ready document?
66

7-
The short answer is that you need a *Markdown application* capable of processing the Markdown file. There are lots of applications available — everything from simple scripts to desktop applications that look like Microsoft Word. Despite their visual differences, all of the applications do the same thing. Like Dillinger, they all convert Markdown-formatted text to HTML so it can be displayed in web browsers.
7+
The short answer is that you need a *Markdown application* capable of processing the Markdown file. There are lots of applications available — everything from simple scripts to desktop applications that look like Microsoft Word. Despite their visual differences, all of the applications do the same thing. Like JotBird, they all convert Markdown-formatted text to HTML so it can be displayed in web browsers.
88

99
Markdown applications use something called a *Markdown processor* (also commonly referred to as a "parser" or an "implementation") to take the Markdown-formatted text and output it to HTML format. At that point, your document can be viewed in a web browser or combined with a style sheet and printed. You can see a visual representation of this process below.
1010

@@ -21,4 +21,4 @@ To summarize, this is a four-part process:
2121
3. Use the Markdown application to convert the Markdown file to an HTML document.
2222
4. View the HTML file in a web browser or use the Markdown application to convert it to another file format, like PDF.
2323

24-
From your perspective, the process will vary somewhat depending on the application you use. For example, Dillinger essentially combines steps 1-3 into a single, seamless interface — all you have to do is type in the left pane and the rendered output magically appears in the right pane. But if you use other tools, like a text editor with a static website generator, you'll find that the process is much more visible.
24+
From your perspective, the process will vary somewhat depending on the application you use. For example, JotBird essentially combines steps 1-3 into a single, seamless interface — all you have to do is type in the left pane and the rendered output magically appears in the right pane. But if you use other tools, like a text editor with a static website generator, you'll find that the process is much more visible.

‎_getting-started/kicking-the-tires.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22

33
The best way to get started with Markdown is to use it. That's easier than ever before thanks to a variety of free tools.
44

5-
You don't even need to download anything. There are several online Markdown editors that you can use to try writing in Markdown. [Dillinger](https://dillinger.io/) is one of the best online Markdown editors. Just open the site and start typing in the left pane. A preview of the rendered document appears in the right pane.
5+
You don't even need to download anything. There are several online Markdown editors that you can use to try writing in Markdown. [JotBird](https://www.jotbird.com) (which I built) is one of the best online Markdown editors. Just open the site and start typing in the left pane. A preview of the rendered document appears in the right pane.
66

7-
{% include image.html file="/assets/images/dillinger.png" alt="Dillinger Markdown editor" lazy="yes" %}
7+
<a href="https://www.jotbird.com">{% include image.html file="/assets/images/jotbird.png" alt="JotBird Markdown editor" lazy="yes" %}</a>
88

9-
You'll probably want to keep the Dillinger website open as you read through this guide. That way you can try the syntax as you learn about it. After you've become familiar with Markdown, you may want to use a Markdown application that can be installed on your desktop computer or mobile device.
9+
You'll probably want to keep the JotBird website open as you read through this guide. That way you can try the syntax as you learn about it. After you've become familiar with Markdown, you may want to use a Markdown application that can be installed on your desktop computer or mobile device.

‎_getting-started/whats-markdown-good-for.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ Here are some Markdown document authoring applications I recommend:
3030
- **iOS / Android:** [iA Writer](/tools/ia-writer/)
3131
- **Windows:** [ghostwriter](https://kde.github.io/ghostwriter/) or [Markdown Monster](https://markdownmonster.west-wind.com/)
3232
- **Linux:** [ReText](https://github.com/retext-project/retext) or [ghostwriter](https://kde.github.io/ghostwriter/)
33-
- **Web:** [Dillinger](/tools/dillinger/) or [StackEdit](/tools/stackedit/)
33+
- **Web:** [JotBird](/tools/jotbird/), [Dillinger](/tools/dillinger/), or [StackEdit](/tools/stackedit/)
3434

3535
<div class="alert alert-success">
3636
<i class="fas fa-lightbulb"></i> <strong>Tip:</strong> <a href="https://ia.net/writer/templates/">iA Writer</a> provides templates for previewing, printing, and exporting Markdown-formatted documents. For example, the "Academic – MLA Style" template indents paragraphs and adds double sentence spacing.

‎_includes/nav.html‎

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,33 @@
1+
<a id="jotbird-banner" class="jotbird-banner" href="https://www.jotbird.com" target="_blank" rel="noopener noreferrer">
2+
<div class="container jotbird-banner__inner">
3+
<img src="https://assets.jotbird.com/logo-black-white(2).svg" alt="JotBird" class="jotbird-banner__logo">
4+
<span class="jotbird-banner__text">Introducing JotBird — a clean, privacy-first live Markdown editor. ✨</span>
5+
<button class="jotbird-banner__close" type="button" aria-label="Dismiss announcement">×</button>
6+
</div>
7+
</a>
8+
9+
<script>
10+
document.addEventListener('DOMContentLoaded', function () {
11+
var banner = document.getElementById('jotbird-banner');
12+
if (!banner || !window.localStorage) return;
13+
14+
if (localStorage.getItem('hideJotbirdBanner') === '1') {
15+
banner.style.display = 'none';
16+
return;
17+
}
18+
19+
var closeBtn = banner.querySelector('.jotbird-banner__close');
20+
if (!closeBtn) return;
21+
22+
closeBtn.addEventListener('click', function (event) {
23+
event.preventDefault();
24+
event.stopPropagation();
25+
banner.style.display = 'none';
26+
localStorage.setItem('hideJotbirdBanner', '1');
27+
});
28+
});
29+
</script>
30+
131
<nav class="navbar navbar-expand-lg navbar-dark bg-dark mdg-nav">
232
<div class="container">
333
<a class="navbar-brand" href="/" style="margin-top: 2px; margin-bottom: 3px">
@@ -22,4 +52,4 @@
2252
</div>
2353
</div>
2454
</div>
25-
</nav>
55+
</nav>

‎_tools/jotbird.md‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
---
2+
title: JotBird
3+
category: "online editor"
4+
description: "JotBird is the beautifully simple online Markdown editor."
5+
icon: jotbird.png
6+
website: https://www.jotbird.com
7+
syntax:
8+
- id: headings
9+
available: y
10+
- id: paragraphs
11+
available: y
12+
- id: line-breaks
13+
available: y
14+
- id: bold
15+
available: y
16+
- id: italic
17+
available: y
18+
- id: blockquotes
19+
available: y
20+
- id: ordered-lists
21+
available: y
22+
- id: unordered-lists
23+
available: y
24+
- id: code
25+
available: y
26+
- id: horizontal-rules
27+
available: y
28+
- id: links
29+
available: y
30+
- id: images
31+
available: y
32+
- id: tables
33+
available: y
34+
- id: fenced-code-blocks
35+
available: y
36+
- id: syntax-highlighting
37+
available: y
38+
- id: footnotes
39+
available: y
40+
- id: heading-ids
41+
available: n
42+
- id: definition-lists
43+
available: y
44+
- id: strikethrough
45+
available: y
46+
- id: task-lists
47+
available: y
48+
- id: emoji-cp
49+
available: y
50+
- id: emoji-sc
51+
available: y
52+
- id: highlight
53+
available: y
54+
- id: subscript
55+
available: y
56+
- id: superscript
57+
available: y
58+
- id: auto-url-linking
59+
available: y
60+
- id: disabling-auto-url
61+
available: y
62+
- id: html
63+
available: n
64+
---
65+
66+
*Full disclosure: JotBird was created by the author of The Markdown Guide.*
67+
68+
JotBird is a clean, privacy-focused live Markdown editor that runs entirely in your web browser. Unlike feature-heavy editors, JotBird is designed for simplicity: you type Markdown on the left and see a real-time rendered preview on the right, with no account creation, no cookies, and no tracking. The editor automatically saves your draft locally in your browser, so there’s nothing to install and nothing stored on a server unless you choose to publish a document. The interface is minimal, fast, and approachable, making it an easy option for both beginners and experienced Markdown users who want a distraction-free writing environment.
69+
70+
{% include image.html file="/assets/images/jotbird.png" alt="The JotBird Markdown editor" %}
71+
72+
JotBird supports a wide range of Markdown features, including GitHub-style tables, task lists, strikethrough, emoji shortcodes, footnotes, and syntax highlighting in fenced code blocks. Images can be pasted directly into the editor and are uploaded automatically when you publish. Published documents receive a unique, shareable URL and expire after 30 days. The tool is intentionally lightweight and doesn’t include file management, plugin systems, or export templates, which keeps it easy to use but may limit power users who need more advanced workflows. Still, for quick notes, writing drafts, documentation snippets, and sharing Markdown-formatted content online, JotBird offers an elegant and privacy-friendly solution.
73+
74+
{% include tool-syntax-table.html %}

‎assets/css/homepage.css‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,84 @@ h1, h2, h3, h4, h5, h6 {
88
font-size: .9rem;
99
}
1010

11+
.jotbird-banner {
12+
display: block;
13+
color: #0b1f35;
14+
background: linear-gradient(120deg, #f5f9ff 0%, #e6f3ff 50%, #f8fdff 100%);
15+
border-bottom: 1px solid #d6e9f6;
16+
box-shadow: 0 6px 18px rgba(0, 49, 79, 0.08);
17+
text-decoration: none;
18+
transition: transform 120ms ease, box-shadow 160ms ease, background 160ms ease;
19+
opacity: 0.93;
20+
position: relative;
21+
}
22+
23+
.jotbird-banner:hover {
24+
transform: translateY(-1px);
25+
box-shadow: 0 10px 24px rgba(0, 49, 79, 0.12);
26+
color: #0b1f35;
27+
opacity: 1;
28+
}
29+
30+
.jotbird-banner__inner {
31+
display: flex;
32+
align-items: center;
33+
justify-content: center;
34+
gap: 12px;
35+
padding: 10px 16px;
36+
}
37+
38+
.jotbird-banner__logo {
39+
height: 26px;
40+
width: auto;
41+
}
42+
43+
.jotbird-banner__text {
44+
font-weight: 600;
45+
font-size: 0.98rem;
46+
letter-spacing: 0.01em;
47+
}
48+
49+
.jotbird-banner__close {
50+
position: absolute;
51+
right: 14px;
52+
top: 50%;
53+
transform: translateY(-50%);
54+
width: 30px;
55+
height: 30px;
56+
border: 0;
57+
border-radius: 50%;
58+
background: rgba(255, 255, 255, 0.85);
59+
color: #0b1f35;
60+
font-size: 18px;
61+
line-height: 1;
62+
cursor: pointer;
63+
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
64+
}
65+
66+
.jotbird-banner__close:hover,
67+
.jotbird-banner__close:focus {
68+
background: #ffffff;
69+
outline: none;
70+
}
71+
72+
@media (max-width: 576px) {
73+
.jotbird-banner__inner {
74+
flex-direction: column;
75+
gap: 8px;
76+
text-align: center;
77+
}
78+
.jotbird-banner__text {
79+
font-size: 0.95rem;
80+
line-height: 1.4;
81+
}
82+
.jotbird-banner__close {
83+
right: 10px;
84+
top: 10px;
85+
transform: none;
86+
}
87+
}
88+
1189
.jumbotron {
1290
background: rgba(73,155,234,1);
1391
background: -moz-linear-gradient(-45deg, rgba(73,155,234,1) 0%, rgba(3,167,221,1) 100%);

‎assets/css/page.css‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,84 @@ h1, h2, h3, h4, h5, h6 {
1010
font-size: .9rem;
1111
}
1212

13+
.jotbird-banner {
14+
display: block;
15+
color: #0b1f35;
16+
background: linear-gradient(120deg, #f5f9ff 0%, #e6f3ff 50%, #f8fdff 100%);
17+
border-bottom: 1px solid #d6e9f6;
18+
box-shadow: 0 6px 18px rgba(0, 49, 79, 0.08);
19+
text-decoration: none;
20+
transition: transform 120ms ease, box-shadow 160ms ease, background 160ms ease;
21+
opacity: 0.93;
22+
position: relative;
23+
}
24+
25+
.jotbird-banner:hover {
26+
transform: translateY(-1px);
27+
box-shadow: 0 10px 24px rgba(0, 49, 79, 0.12);
28+
color: #0b1f35;
29+
opacity: 1;
30+
}
31+
32+
.jotbird-banner__inner {
33+
display: flex;
34+
align-items: center;
35+
justify-content: center;
36+
gap: 12px;
37+
padding: 10px 16px;
38+
}
39+
40+
.jotbird-banner__logo {
41+
height: 26px;
42+
width: auto;
43+
}
44+
45+
.jotbird-banner__text {
46+
font-weight: 600;
47+
font-size: 0.98rem;
48+
letter-spacing: 0.01em;
49+
}
50+
51+
.jotbird-banner__close {
52+
position: absolute;
53+
right: 14px;
54+
top: 50%;
55+
transform: translateY(-50%);
56+
width: 30px;
57+
height: 30px;
58+
border: 0;
59+
border-radius: 50%;
60+
background: rgba(255, 255, 255, 0.85);
61+
color: #0b1f35;
62+
font-size: 18px;
63+
line-height: 1;
64+
cursor: pointer;
65+
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
66+
}
67+
68+
.jotbird-banner__close:hover,
69+
.jotbird-banner__close:focus {
70+
background: #ffffff;
71+
outline: none;
72+
}
73+
74+
@media (max-width: 576px) {
75+
.jotbird-banner__inner {
76+
flex-direction: column;
77+
gap: 8px;
78+
text-align: center;
79+
}
80+
.jotbird-banner__text {
81+
font-size: 0.95rem;
82+
line-height: 1.4;
83+
}
84+
.jotbird-banner__close {
85+
right: 10px;
86+
top: 10px;
87+
transform: none;
88+
}
89+
}
90+
1391
.jumbotron h1 {
1492
font-weight: 300;
1593
font-size: 3.2rem;

‎assets/images/jotbird.png‎

962 KB
Loading

‎assets/images/tool-icons/jotbird.png‎

41 KB
Loading

0 commit comments

Comments
 (0)