I've often felt limited by the current state of note-making/todo/spreadsheet tools (ideally, they're all grouped into one app with cross platform sync), and this looks like a great step in the quick notemaking aspect. Glad to see it's open source as well.
Thanks. This also supports markdown to-do lists and I manage all of my tasks by putting #todo on my notes (which then show up when I search for the hashtag).
The only thing missing there is spreadsheets, which feels like it might be a little bit of feature-creep. Thanks for the feedback :-)
I use Apple Notes for this, and it is surprisingly great. Being able to drag and drop images and screenshots is great.
Having them synchronized to the phone instantly is very convenient.
As a bonus, I can add sketches when I open notes on my iPad using the Apple Pencil. It is sweeter because I can even search for a text fragment I hand-wrote in one of those sketches.
Saying all of this here because, I wish there was an open source/self-hosted alternative that did that. This website showed portable apps on all platforms, and open source, got me very excited until I realized I can't just drag and drop images into a note. Neither can I add sketches on the fly.
Sorry, I didn't mean to critique your open source effort, and sound negative. My intent is to highlight an alternative that I enjoy, and perhaps bring some ideas for discussion.
Thanks! There are some keyboard shortcuts (there's a page in the help notepad on them) but I would like to add more.
Not too sure what you mean on the bounding box thing, like the little border around elements?
If you want to dismiss the sidebar just click the little ">>" or press "f". Hiding the breadcrumbs in the focus mode is on my todo list. Thanks for the list, I genuinely appreciate it.
Yeah, I mean the rectagle with shadow. Not needed.
It also feels wrong that is 'modal', you are editing or moving. I'd rather click and start writing. having to do another click for note type, when 90% of the time it's text, feels like a deal breaker.
I really like the instant-text suggestion. I might be able to make it so when you have the "insert" menu open it'll automatically insert a markdown element if you just start typing. I'm a little busy with uni right now so I'm not sure how quickly I can get through anything, although I am open to pull requests.
If I could do every single action without a mouse, it'd be fantastic. Navigate around notes with arrow keys.
I think you took the 'webapp' UX model a bit too far (where everything must be click, animation, multiple choice. Not even right click). Few modern web apps do these things well. One is checkvist.
Your target user likes the keyboard (coders, writers). Listen to them (us)
Agree about the bounding box, best seen when editing, rest of the time just a distraction.
I've been chasing a onenote alternative for some time, this looks promising. I have to add, I loved the old Onenote heirachy, notebooks down the left (rotated labels), sections across the top, pages down the right.
And more screen shots always help for those too lazy to trial. And add some default notebook/section/note naming, so people can just click and start adding notes.
Thanks, the reason I made this was because of how big of a fan I was of OneNote, but all the little things that I wanted to change (and first-class linux support) drove me to write this.
I was clicking around for a minute, not figuring out how to get started. You have to click "Notepads" and "New" first. I didn't see "New" because when I click a dropdown, I expect all menu items to be BELOW the initial button, so I skipped "New" and thought "Import" was the first menu-item. I must be an idiot.
Then I have to give my note a title... I don't know?? I just want to create a note, not title it... so I enter no title and press "OK" and... nothing!
So I press "New" again, enter random keystrokes as a title, and... now what? I continue pressing random buttons, now I try "+ Section" (whatever that means). I got a collapsable section and 2 new buttons. Great.
Now I press "+ Note" and I finally get a "Hey, you can do stuff now!" message.
Is it so hard to just initially create a note without having to create a "Notepad" and a "Section" first? And you have to name both things before you can do anything.
So I insert a text with markdown, enter some random text... now I want to save it. I see a big huge blue button: That must be SAVE! Oh, it isn't. It's "bibliography", whatever that means. The big red button? Oh that's delete... I haven't created anything, but at least I know how to delete it just in case.
I also like how the label for the text-area is "formatting help" and is actually a link to "formatting help" and not the label for the text-area.
Anyways, I found out you "save" by just clicking wherever. Fine. So I now wanted to actually name my thing. I'm clicking the title in the header. Double-clicking. Nope, that doesn't work. Looking for a rename button here... Oh maybe the sidebar. So I see that cog icon and I think: There, that's where you must be able to rename it, right?
And yes, a modal! With a RENAME button! Cool. So I press the RENAME button and POOF modal gone. Wtf??? Since the blue button I saw earlier wasn't a confirm/save button but a "open a modal" button, I assumed it opened another modal, but no: Now it just closes the modal. Whatever.
So I open the modal again and notice the name is actually an input field (gotta love Google Material Design). So I change the name and click the modal away, assuming it is saved automatically just like with notes. My changes aren't saved. Fuck.
So I open the modal AGAIN and assume the "RENAME" button is a SAVE button. Finally...
This whole thing is a neat idea, but there is much room for improvement on the GUI.
Sorry to hear that you got frustrated. I did try to make little help videos (and I have a note about structure in the help notepad) but I understand that it should be intuitive without having to watch that or view the help notepad.
The bibliography list lets you attach URLs to elements on your note, which is helpful for when you go back for essay-writing and stuff. The formatting-help thing isn't actually a label but I understand the confusion there, I'll look into ways to improve that.
Opened the menu, created the new notebook. Then it's just empty canvas. I tried clicking into it but nothing really happens. The Android keyboard doesn't show, which means there's no text input.
Yeah, the mobile UX is really a sore point right now, on the sidebar, you create a section and then create a note. When you open the note you should see a message saying your note is empty. Dismiss the sidebar and when you tap on the canvas it'll open an insert menu.
The mobile UI is definitely more of a read-experience but I'd love to change that (and if any developers want to help with that it'd be awesome)
This is a wonderful looking project, thanks for making it open source! I am thinking of forking it for my own side-project and contributing to the development if possible.
As other commenters already noted, the UI/UX of the app will need some work. Just some initial thoughts:
- Organisation of the notes is cumbersome: it wasn't clear to me what is meant with a note and a section, and how to actually start writing (I would expect to be able to start writing right away rather than first creating a notebook/section/note, choosing a title, etc...)
- I would like to tag my notes à la Evernote, and filter notes based on this.
- Speaking of searching/filtering: it would be nice to list all search results (and organisation of the notes for that matter) in the main view.
- Maximise screen real estate for the actual note taking: why is there such a huge header and side nav... on a 13" screen I barely have room to see my notes. I would like to hide all that in a hamburger menu.
- Keyboard shortcuts!
- The ability to drag and drop images or other documents would be nice
- The text in the textarea when taking a note is so small & there is no padding.
Anyway, hope that's useful feedback.. thanks again for this work! I will look further into it.
Just on a couple points I may already have what you're looking for, you can type in a hashtag (like #todo) anywhere in a markdown element and then that note will show up in a search for that hashtag (that search also works cross-notepads).
The side-nav can be hidden (although the rest of the chrome can't, which is something I want to get sorted). Also, on the textarea size, I think I'm using the browser default, but I might be wrong there.
Thanks for a decent list though, it's great to have action items.
Forks are always welcome and I appreciate all pull requests.
Good comment, but please don't indent like that, it makes things very hard to read. Two spaces at the start of the line turns on code formatting, which uses a monospace font and scrolls sideways instead of wrapping: https://news.ycombinator.com/formatdoc
* Organisation of the notes is cumbersome: it wasn't clear to me what is meant with a note and a section, and how to actually start writing (I would expect to be able to start writing right away rather than first creating a notebook/section/note, choosing a title, etc...)
* I would like to tag my notes à la Evernote, and filter notes based on this.
* Speaking of searching/filtering: it would be nice to list all search results (and organisation of the notes for that matter) in the main view.
* Maximise screen real estate for the actual note taking: why is there such a huge header and side nav... on a 13" screen I barely have room to see my notes. I would like to hide all that in a hamburger menu.
* Keyboard shortcuts!
* The ability to drag and drop images or other documents would be nice
* The text in the textarea when taking a note is so small & there is no padding.
Ha! Thanks for that, I'm mostly a lurker here so I was surprised to learn HN puts everything on one line, I thought indenting it was the only way to have a bulleted list.
I think it would be easier if there was no textbox, no click and insert text. Merely click, have a blinking cursor appear, write anywhere. After you've finished writing click again in an empty space and have the text box created, so you can resize it.
Similarly for drawing.
Ditch the boxes altogether while writing/drawing and have them appear afterwards for manipulation.
edit: Other than that your program looks quite promising!
In terms of features, being able to paste an image (e.g. like pasting into a github comment, or into a gdoc) would be great. I find I use screenshots into the clipboard more than saving to a file, however I don't know if others do as much nor if Windows / Mac supports that.
This is the #1 reason I just moved from a big markdown role to using OneNote at work. Screen clips, whiteboards, drawings all things that are quite handy to have next to the indexable typed notes. Quite happy after a couple weeks.
Mac: Ctrl+Cmd+Shift+4 to grab a rectangular selection to the clipboard.
Does windows have something similar? I've been using PrintScrn and Paint but it's comparably very awkward. I know there are apps, but "working in places where I haven't / can't install apps" is a requirement.
Yeah, other platforms support it. I want to get drag and drop working as well, so that would probably be a good thing to add with that. Thanks for the comments :-)
I have been using Zim[0] for quite few years now. With various plugins, it allows me to write LaTeX equations, formatted code, tables etc. Overall it has been really good, but I feel the only thing missing is the support for mobile devices.
I agree, although this isn't 100% zero-knowledge. The keys are managed server side because the server needs to be able to read your notepad for the diff-sync.
People who prefer structured outlining (over non linear snippet collections) may find fluid-outliner[1] interesting.
After not finding any good signup-free privacy-aware zero-installation solution, which supported both rich text and markdown, I started prototyping on the above. It is quite early stage but fairly usable. Any feedback/contributions are welcome.
Oh wow! That looks really cool. You could possibly even create compatibility with my app using the parser that I wrote https://github.com/MicroPad/Web-Parser
Looks quite nice.
Though some features which I think would make this more appealing (at least to me):
Ability to draw lines between two elements.
Link to other Sections/Notes.
Copy & Paste images into it, rather than uploading.
Really nice tool, and I'll be sure to look at it to see how it changes.
- Instead of asking "Are you sure" to delete an element, just go ahead and delete it, but make it undoable. This allows for quicker workflow.
- If I double-click an empty space, I would like to immediately insert a Text element and start typing, without having to aim the mouse again and click Text.
I'll probably be coming back to this when I need some note taking. Thanks for sharing this!
Thanks for the feedback! I like the undo concept, that should be do-able.
On the quick-typing thing I was thinking that I could make it so that if you just start typing with the insert thing open, it'll automatically put you in a text element. What do you think about that?
Generally for usability I'd suggest to take a good look at OneNote, which in my eyes gets the "type and draw everywhere, with minimal friction" concept very right. And while the underlying data model of such an application may necessitate a collection of objects being scattered on a canvas, that doesn't mean that the interaction model has to follow that directly. So indeed, just let me type anywhere.
Another thing that adds friction in my eyes is that when editing text your first click changes the interface into text editing mode where the text neither stays at the position you've seen it before, nor can you actually interact with it with that first click. So when I see a word that I'd like to change and I click there, that will only spawn the edit window for that text object, instead of just placing a cursor there so I can directly edit it.
>Instead of asking "Are you sure" to delete an element, just go ahead and delete it, but make it undoable. This allows for quicker workflow.
Counterpoint: this makes it harder to tell that information that you might want to be really sure is deleted (like someone elses credit card number or your passport number) is actually deleted. The deletion workflow is now delete it->check to see if it's in the undo list->really for reals delete it.
That's a way worse UX than a confirm dialog, and more risky for the customer. Remember that your grandmother might be using this to temporarily store her credit card pin.
I don’t think clicking yes in a confirm dialog implies that anything was “truly deleted.” It might well still be living in the undo history, other indexes, auto save files, backups, and it could certainly live in memory (especially if it was moved by the garbage collector).
It would be very foolish to assume that just because one has clicked “yes, delete” that the data is gone forever.
Is there is a guide to help setup a self-hosted version fo this app? I'd assume there would be a server which does the actual parsing and syncing, along with a web app which is used to render onto a web page?
I absolutely love the idea by the way, can't wait to try it!
101 comments
[ 4.4 ms ] story [ 318 ms ] threadThe only thing missing there is spreadsheets, which feels like it might be a little bit of feature-creep. Thanks for the feedback :-)
Having them synchronized to the phone instantly is very convenient. As a bonus, I can add sketches when I open notes on my iPad using the Apple Pencil. It is sweeter because I can even search for a text fragment I hand-wrote in one of those sketches.
Saying all of this here because, I wish there was an open source/self-hosted alternative that did that. This website showed portable apps on all platforms, and open source, got me very excited until I realized I can't just drag and drop images into a note. Neither can I add sketches on the fly.
Sorry, I didn't mean to critique your open source effort, and sound negative. My intent is to highlight an alternative that I enjoy, and perhaps bring some ideas for discussion.
You can quickly add a sketch by clicking on an empty note and then insert a "drawing" element. It'll also work with the Surface pens.
I really appreciate the comparison, I don't use Apple notes so it's nice to know what they offer.
Thanks for the feedback.
- Hmm, no shortcuts? or keyboard support in general. Press arrow down to highlight a search result fails
- bounding box for a note not needed (see onenote)
- Search the content of a note not possible?
- Too much chrome while note writing?
These are simple things to fix. Great project!
Not too sure what you mean on the bounding box thing, like the little border around elements?
If you want to dismiss the sidebar just click the little ">>" or press "f". Hiding the breadcrumbs in the focus mode is on my todo list. Thanks for the list, I genuinely appreciate it.
I really like the instant-text suggestion. I might be able to make it so when you have the "insert" menu open it'll automatically insert a markdown element if you just start typing. I'm a little busy with uni right now so I'm not sure how quickly I can get through anything, although I am open to pull requests.
I think you took the 'webapp' UX model a bit too far (where everything must be click, animation, multiple choice. Not even right click). Few modern web apps do these things well. One is checkvist.
Your target user likes the keyboard (coders, writers). Listen to them (us)
I've been chasing a onenote alternative for some time, this looks promising. I have to add, I loved the old Onenote heirachy, notebooks down the left (rotated labels), sections across the top, pages down the right.
And more screen shots always help for those too lazy to trial. And add some default notebook/section/note naming, so people can just click and start adding notes.
Great work
Then I have to give my note a title... I don't know?? I just want to create a note, not title it... so I enter no title and press "OK" and... nothing!
So I press "New" again, enter random keystrokes as a title, and... now what? I continue pressing random buttons, now I try "+ Section" (whatever that means). I got a collapsable section and 2 new buttons. Great.
Now I press "+ Note" and I finally get a "Hey, you can do stuff now!" message.
Is it so hard to just initially create a note without having to create a "Notepad" and a "Section" first? And you have to name both things before you can do anything.
So I insert a text with markdown, enter some random text... now I want to save it. I see a big huge blue button: That must be SAVE! Oh, it isn't. It's "bibliography", whatever that means. The big red button? Oh that's delete... I haven't created anything, but at least I know how to delete it just in case.
I also like how the label for the text-area is "formatting help" and is actually a link to "formatting help" and not the label for the text-area.
Anyways, I found out you "save" by just clicking wherever. Fine. So I now wanted to actually name my thing. I'm clicking the title in the header. Double-clicking. Nope, that doesn't work. Looking for a rename button here... Oh maybe the sidebar. So I see that cog icon and I think: There, that's where you must be able to rename it, right?
And yes, a modal! With a RENAME button! Cool. So I press the RENAME button and POOF modal gone. Wtf??? Since the blue button I saw earlier wasn't a confirm/save button but a "open a modal" button, I assumed it opened another modal, but no: Now it just closes the modal. Whatever.
So I open the modal again and notice the name is actually an input field (gotta love Google Material Design). So I change the name and click the modal away, assuming it is saved automatically just like with notes. My changes aren't saved. Fuck.
So I open the modal AGAIN and assume the "RENAME" button is a SAVE button. Finally...
This whole thing is a neat idea, but there is much room for improvement on the GUI.
The bibliography list lets you attach URLs to elements on your note, which is helpful for when you go back for essay-writing and stuff. The formatting-help thing isn't actually a label but I understand the confusion there, I'll look into ways to improve that.
I'd love if you would take the time to formalise some of your criticism in a github issue: https://github.com/MicroPad/Web/issues
I'll look into adding them to the main site.
Opened the menu, created the new notebook. Then it's just empty canvas. I tried clicking into it but nothing really happens. The Android keyboard doesn't show, which means there's no text input.
The mobile UI is definitely more of a read-experience but I'd love to change that (and if any developers want to help with that it'd be awesome)
As other commenters already noted, the UI/UX of the app will need some work. Just some initial thoughts:
Anyway, hope that's useful feedback.. thanks again for this work! I will look further into it.Just on a couple points I may already have what you're looking for, you can type in a hashtag (like #todo) anywhere in a markdown element and then that note will show up in a search for that hashtag (that search also works cross-notepads).
The side-nav can be hidden (although the rest of the chrome can't, which is something I want to get sorted). Also, on the textarea size, I think I'm using the browser default, but I might be wrong there.
Thanks for a decent list though, it's great to have action items.
Forks are always welcome and I appreciate all pull requests.
I'd like to give it a shot if I found some spare time.
* Organisation of the notes is cumbersome: it wasn't clear to me what is meant with a note and a section, and how to actually start writing (I would expect to be able to start writing right away rather than first creating a notebook/section/note, choosing a title, etc...)
* I would like to tag my notes à la Evernote, and filter notes based on this.
* Speaking of searching/filtering: it would be nice to list all search results (and organisation of the notes for that matter) in the main view.
* Maximise screen real estate for the actual note taking: why is there such a huge header and side nav... on a 13" screen I barely have room to see my notes. I would like to hide all that in a hamburger menu.
* Keyboard shortcuts!
* The ability to drag and drop images or other documents would be nice
* The text in the textarea when taking a note is so small & there is no padding.
https://news.ycombinator.com/formatdoc
There is no bulleted list format; just start the line with a bullet (such as a hyphen) and put a blank line between list items.
Similarly for drawing.
Ditch the boxes altogether while writing/drawing and have them appear afterwards for manipulation.
edit: Other than that your program looks quite promising!
I'm thinking as a compromise for the mean-time I plan to automatically insert the text-box when you have the insert menu open and just start typing.
Thanks for the thoughts. It's great to get constructive feedback.
In terms of features, being able to paste an image (e.g. like pasting into a github comment, or into a gdoc) would be great. I find I use screenshots into the clipboard more than saving to a file, however I don't know if others do as much nor if Windows / Mac supports that.
Does windows have something similar? I've been using PrintScrn and Paint but it's comparably very awkward. I know there are apps, but "working in places where I haven't / can't install apps" is a requirement.
Although I use it every day, I haven't bothered looking up keyboard shortcuts for it.
https://en.m.wikipedia.org/wiki/Snipping_Tool
Edit: that might be specific to the OneNote clipping tool though.
Mac: CMD+SHIFT+4 (Ctrl not req'd.)
[0]: http://zim-wiki.org/
MicroPad _works_ on mobile, but not very nicely. That is a key thing I want to improve though.
standardnotes.org is another in that space
I have written what I hope is a pretty plain-english privacy policy here https://getmicropad.com/policy.php#privacy
After not finding any good signup-free privacy-aware zero-installation solution, which supported both rich text and markdown, I started prototyping on the above. It is quite early stage but fairly usable. Any feedback/contributions are welcome.
[1] https://github.com/fluid-notion/fluid-outliner
> The web-client works on any modern browser. It doesn't matter if you're using a Chromebook, a Surface, or a toaster.
Apparently toaster beats windows phone, because it doesn't work on my Lumia
Also, yeah. After trying OneNote for a couple years I was just hooked with the infinite canvas concept.
Really nice tool, and I'll be sure to look at it to see how it changes.
The closest I can give you to lines right now is for you to insert a "drawing" element and doing a line there. That's not a great solution though.
- Instead of asking "Are you sure" to delete an element, just go ahead and delete it, but make it undoable. This allows for quicker workflow.
- If I double-click an empty space, I would like to immediately insert a Text element and start typing, without having to aim the mouse again and click Text.
I'll probably be coming back to this when I need some note taking. Thanks for sharing this!
On the quick-typing thing I was thinking that I could make it so that if you just start typing with the insert thing open, it'll automatically put you in a text element. What do you think about that?
An interesting read none the less
Another thing that adds friction in my eyes is that when editing text your first click changes the interface into text editing mode where the text neither stays at the position you've seen it before, nor can you actually interact with it with that first click. So when I see a word that I'd like to change and I click there, that will only spawn the edit window for that text object, instead of just placing a cursor there so I can directly edit it.
Counterpoint: this makes it harder to tell that information that you might want to be really sure is deleted (like someone elses credit card number or your passport number) is actually deleted. The deletion workflow is now delete it->check to see if it's in the undo list->really for reals delete it.
That's a way worse UX than a confirm dialog, and more risky for the customer. Remember that your grandmother might be using this to temporarily store her credit card pin.
It would be very foolish to assume that just because one has clicked “yes, delete” that the data is gone forever.
I absolutely love the idea by the way, can't wait to try it!