Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 205a046

Browse files
feat(home): add Obsidian comparison article
1 parent f3aec70 commit 205a046

File tree

2 files changed

+259
-0
lines changed

2 files changed

+259
-0
lines changed
Lines changed: 246 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,246 @@
1+
<template>
2+
<q-page style="font-size: 16px; margin-top: 150px; margin-bottom: 150px">
3+
<ResponsiveContainer style="max-width: 1000px">
4+
<h1 style="font-size: 32px; font-weight: bold">
5+
Comparing Obsidian and DeepNotes
6+
</h1>
7+
8+
<Gap style="height: 52px" />
9+
10+
<div style="max-width: 600px">
11+
<p>
12+
<b>Obsidian</b> is a note-taking application first released by Shida
13+
Li and Erica Xu in 2020 that works with Markdown files. It is similar
14+
to DeepNotes, especially after the introduction of Obsidian Canvas in
15+
2022.
16+
</p>
17+
18+
<p>
19+
Both are designed for deep interlinking and nesting of notes. But,
20+
while Obsidian focuses on customizability, DeepNotes is more
21+
opinionated in its approach.
22+
</p>
23+
24+
<p>Here is a detailed comparison of their features:</p>
25+
26+
<Gap style="height: 72px" />
27+
</div>
28+
29+
✅ Win <InlineGap style="width: 4px" /> ✴️ Neutral
30+
<InlineGap style="width: 4px" /> ❌ Loss
31+
32+
<Gap style="height: 12px" />
33+
34+
<table>
35+
<tr>
36+
<th style="width: 200px">Features</th>
37+
<th style="width: 400px">Obsidian</th>
38+
<th style="width: 400px">DeepNotes</th>
39+
</tr>
40+
41+
<tr>
42+
<td style="font-weight: bold">Open source</td>
43+
<td>❌ Obsidian is not open source.</td>
44+
<td>
45+
✅ DeepNotes is fully open source. Its code is available
46+
<a
47+
href="https://github.com/DeepNotesApp/DeepNotes"
48+
target="_blank"
49+
>
50+
here</a
51+
>.
52+
</td>
53+
</tr>
54+
55+
<tr>
56+
<td style="font-weight: bold">Extensibility</td>
57+
<td>✅ Obsidian has support for extensibility through plugins.</td>
58+
<td>❌ DeepNotes doesn't support extensions.</td>
59+
</tr>
60+
61+
<tr>
62+
<td style="font-weight: bold">Canvas flexibility</td>
63+
<td>
64+
❌ Notes that can be colored and linked with arrows, but can't be
65+
nested or collapsed. (With plugins maybe?)
66+
</td>
67+
<td>
68+
✅ DeepNotes offers very flexible notes as a differentiator. Each
69+
note can have a head and a body, and can also be nested, collapsed,
70+
colored and linked with arrows.
71+
</td>
72+
</tr>
73+
74+
<tr>
75+
<td style="font-weight: bold">Page navigation</td>
76+
<td>
77+
✴️ Obsidian allows to navigate through its pages using the file
78+
system, links between pages, or through file search.
79+
</td>
80+
<td>
81+
✴️ One of the differentiators of DeepNotes is its unique page
82+
navigation system, which keeps track of the last path taken to reach
83+
each page. This allows the user to automatically build their page
84+
hierarchy by simply creating and navigating through their pages.
85+
</td>
86+
</tr>
87+
88+
<tr>
89+
<td style="font-weight: bold">
90+
WYSIWYG<br />(What You See Is What You Get)
91+
</td>
92+
<td>
93+
❌ Obsidian Canvas isn't WYSIWYG (With plugins maybe?). What you see
94+
during editing differs from the final visual product. Obsidian
95+
(non-canvas) is WYSIWYG though.
96+
</td>
97+
<td>
98+
✅ DeepNotes is WYSIWYG. What you see during editing is the final
99+
visual product.
100+
</td>
101+
</tr>
102+
103+
<tr>
104+
<td style="font-weight: bold">Offline editing</td>
105+
<td>✅ Obsidian supports note editing while offline.</td>
106+
<td>
107+
❌ DeepNotes currently doesn't support note editing while offline.
108+
This is due to technical challenges regarding data synchronization.
109+
</td>
110+
</tr>
111+
112+
<tr>
113+
<td style="font-weight: bold">Realtime collaboration</td>
114+
<td>
115+
❌ Obsidian doesn't support realtime collaboration. The closest
116+
thing available is file syncing, but you must be careful with
117+
conflicts and data loss. Syncing takes a few seconds to complete.
118+
</td>
119+
<td>
120+
✅ DeepNotes supports true realtime collaboration. Users editing the
121+
same page can see each other's names and what they're doing.
122+
</td>
123+
</tr>
124+
125+
<tr>
126+
<td style="font-weight: bold">Text search</td>
127+
<td>
128+
✅ Obsidian offers high performance text search across all pages,
129+
possible thanks to its offline-first approach.
130+
</td>
131+
<td>
132+
❌ DeepNotes currently only offers text search within the current
133+
page.
134+
</td>
135+
</tr>
136+
137+
<tr>
138+
<td style="font-weight: bold">Pricing</td>
139+
<td>
140+
✴️ Obsidian is free for the base product. It offers two paid
141+
add-ons: Obsidian Sync and Obsidian Publish, each separately costing
142+
8ドル/year or 10ドル/month.
143+
</td>
144+
<td>
145+
✴️ DeepNotes offers 50 personal pages for free. It has a Pro plan,
146+
which costs 3ドル.99/year or 4ドル.99/month, and offers unlimited pages
147+
and collaborative groups.
148+
</td>
149+
</tr>
150+
151+
<tr>
152+
<td style="font-weight: bold">Security</td>
153+
<td>
154+
✅ Obsidian offers end-to-end encryption through Obsidian Sync.
155+
</td>
156+
<td>✅ DeepNotes offers end-to-end encryption by default.</td>
157+
</tr>
158+
159+
<tr>
160+
<td style="font-weight: bold">Publishing</td>
161+
<td>✅ Obsidian supports publishing through Obsidian Publish.</td>
162+
<td>
163+
✅ DeepNotes supports publishing through public groups, which are
164+
included in the Pro plan.
165+
</td>
166+
</tr>
167+
168+
<tr>
169+
<td style="font-weight: bold">Graph view</td>
170+
<td>✅ Obsidian offers a graph view displaying all of its pages.</td>
171+
<td>❌ DeepNotes doesn't offer a graph view.</td>
172+
</tr>
173+
174+
<tr>
175+
<td style="font-weight: bold">Themes</td>
176+
<td>
177+
✅ Obsidian supports light and dark themes by default. It also
178+
supports themes created by the community.
179+
</td>
180+
<td>❌ DeepNotes offers only a dark theme for now.</td>
181+
</tr>
182+
</table>
183+
184+
<Gap style="height: 48px" />
185+
186+
<h2 style="font-size: 28px; font-weight: bold">Conclusion</h2>
187+
188+
<Gap style="height: 16px" />
189+
190+
<div style="max-width: 600px">
191+
<p>
192+
Obsidian and DeepNotes are both great note-taking and personal
193+
knowledge management apps. Each is really good at what it does.
194+
Obsidian is great at managing and linking information utilizing
195+
Markdown files, canvases, and its plugin ecosystem, while DeepNotes
196+
has a canvas-first approach, and innovates with its page navigation
197+
system and extremely flexible notes.
198+
</p>
199+
200+
<p>
201+
Ultimately, the choice between Obsidian and DeepNotes boils down to
202+
personal preference and the specific features that align with your
203+
workflow and note-taking style.
204+
</p>
205+
206+
<Gap style="height: 42px" />
207+
208+
<p>
209+
If you'd like to see it in action, you can
210+
<router-link :to="{ name: 'register' }"
211+
>try DeepNotes for free</router-link
212+
>.
213+
</p>
214+
</div>
215+
</ResponsiveContainer>
216+
</q-page>
217+
</template>
218+
219+
<script setup lang="ts">
220+
const description =
221+
'A detailed comparison of Obsidian and DeepNotes, two note-taking apps with a focus on deep interlinking and nesting of notes.';
222+
223+
useMeta(() => ({
224+
title: 'Comparing Obsidian and DeepNotes',
225+
226+
meta: {
227+
description: { name: 'description', content: description },
228+
},
229+
}));
230+
</script>
231+
232+
<style lang="scss" scoped>
233+
table {
234+
border-collapse: collapse;
235+
236+
width: 100%;
237+
238+
th,
239+
td {
240+
padding: 5px 8px;
241+
border: 1px solid rgba(255, 255, 255, 0.2);
242+
243+
vertical-align: top;
244+
}
245+
}
246+
</style>

‎apps/client/src/router/routes.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -214,6 +214,19 @@ const routes: RouteRecordRaw[] = [
214214
],
215215
},
216216

217+
{
218+
path: '/articles',
219+
component: () => import('src/layouts/HomeLayout/HomeLayout.vue'),
220+
children: [
221+
{
222+
path: 'comparing-obsidian',
223+
component: () =>
224+
import('src/pages/home/Articles/ComparingObsidian.vue'),
225+
name: 'articles/comparing-obsidian',
226+
},
227+
],
228+
},
229+
217230
...(isIncluded(process.env.MODE, ['ssr', 'spa'])
218231
? [
219232
{

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /