Joplin-vieweb: a simple web viewer/editor for Joplin notes

Apps
1

Hello.

Presentation

I'm going to use Joplin as a notes application (instead of OneNote).
It's a long time I wanted for something like Joplin: opensource, not coupled to a web giant, and without illimited storage: storage has a price, we should pay for it.

This dev is to provide an online view of my Joplin notes.
It's running on a "Django server", running beside a configured & running Joplin terminal app.

It looks like Joplin:

joplin-vieweb-screenshot
joplin-vieweb-screenshot1913×1078 322 KB

Features and not(-yet?) features

Yes it does :heart:

  • Protect joplin-vieweb access by login (see here how to logout)
  • Display notebooks, and notes
    • images
    • attachments
  • search for notes
  • code syntax highlight
  • Add a table of content if note contains headers
  • Display tags, and notes linked.
  • Joplin sync:
    • Background periodic joplin sync
    • Manual trigged sync, with notebooks and tag refresh
    • Supported target: nextcloud, Joplin server
  • Public link if note has public tag
  • Option to number (or not) header in notes:
  • Tag edition: add / remove / create tags in notes:
  • Checkbox list changes can be saved to notes.
  • Note edition / deletion, with support of image paste, and image / attachment drag&drop.
  • Note creation
  • Notebook edition: create / rename / delete
  • Notes history: list of the latest notes consulted, to be able to open them quickly, or pin them:
  • Tabs in notes (not displayed in joplin applications). Syntax here.
  • Hyperlink preview in notes, on mouse hover:
  • Render Latex:

No it doesn't (yet?) :broken_heart:

  • Sort notebooks nor notes
  • Move note or notebook from one notebook to another.
  • No specific handling for todos.
  • Link to another not in a note

Read more on

github.com/joplin-vieweb

28 Likes
2

so you're creating a web version for joplin?

3

Hello.

Mainly a viewer. I need to access my notes online.
About edition (create, edit, delete) of notes... not for now.
And I expect implementing tag edition, because I use them to find easily my notes (so if I cannot find one note fats enough, I want to be able to edit its tags).

1 Like
4

will you be releasing this for general use anytime soon?

5

I've done.
If you visit the github page you'll find some instructions to install your own server.
On the readme, quick instructions for starting in a django project (if you're used to).
Or you also have a full step-by-step guide to setup a full web server for joplin vieweb (with nginx).

1 Like
6

Nice work!

7

Hey just want to note that there is some prior art in this area:

8

Hello.
Yes I know, and I know it's more advanced.
And I started by trying it (you can read why not joplin-web? in my github).

I was a bit "shy" to post my app because the other exists, more-featured. My purpose is really not to "compete", but I thought it may interess somes...

1 Like
9

I'm pretty sure that other project in not maintained so nothing to be shy about.

I tried it a year ago or so, it was working but slow to the point of being unusable. Maybe it was because I hosted it on raspberry pi.

2 Likes
10

Hey I just wanted to make sure you knew just in case! There are actually two joplin-web projects, the post-fork and prefork one, and I think the prefork was a bit simpler than the repo that's up there now).

You're doing great, no need to be shy -- you sharing your work with everyone is awesome :slight_smile:

4 Likes
11

Hello.

New version, that brings mainly the Jolpin sync feature:

  • background joplin sync to keep your server synchronised with your cloud
  • Manually trigged sync: usefull when you start using and testing joplin-vieweb.

Some screenshots:
image image
(yes, the 2 top tabs are flipped :wink: <=> cannot click during the sync)

I added some icons for attached files:

image

12

Hello.
New version 1.7:

  • Share notes with public tag with a public link.
    image
  • Option to number (or not) header in notes (#14):
    image

Upgrade

1 Like
13

Wow nice work!!!

14

Hello.
New version of joplin-vieweb which handle tags edition:
image

Once tags edited, a little reminder not to forget to synchronize Joplin:

image

1 Like
15

New version 1.9 of joplin-vieweb:

  • Checkbox lists changes can be saved or discarded:
    image
    Once saved, a little reminder not to forget to synchronize Joplin:
    image
16

New version with notes edition / deletion

New version V1.10 of joplin-vieweb:
image

image

Attachments and images are supported (drag'n'drop, or paste image from clipboard): a big thanks to easymde.

Install / update procedure here.

Next to come: note creation, but I needed note edition first.

2 Likes
17

Great project!

Is it suitable for using on a mobile phone?

18

Hello.
Thanks.
Well, it's not really a good UX on mobile: I did it with laptop or PC in mind, this is my use case.
Sometimes I use it from my mobile: it's usable, but not designed for.

Here is a screenhot for notebooks and notes selection:

image
image342×615 99.5 KB

And here a screenshot when you slide to right for note reading:

image
image285×521 68.9 KB

As you can see, you can read, but the interface is not responsive.
I think I'll do it one day, but it's not my main use case (Github enh).

Edit: I've just had a look to OneNote on the web on mobile to get inspired about mobile navigation between notebooks, pages and notes. In fact it's not well designed for mobile! Just use the mobile in landscape mode.
I tried with joplin-vieweb (I didn't get the idea before, shame on me;-)), and it's not so bad (the headers of the accordion overlap a little):

image
image986×381 73.2 KB

1 Like
19

new version with note creation

New version 1.11 of joplin-vieweb that brings note creation feature:
joplin_create_note

Also displays the notebook or tag panel after synchronization is finished, and select and display the last selected note .

2 Likes
20

New release 1.12 of joplin-vieweb.

Main feature

notebook edition: create / rename / delete:
notebook_edition

Others enh:

  • After synchro, all is refreshed, and the last notebook / tag / note are selected again.
  • Create buttons are hidden while note edition
  • popups are nicer than default javascript alert / confirm
  • Notes list: an icon in front of each note
  • Note edition: side-by-side edition (markdown on the left, preview on the right) is possible without fullscreen.