If the amount if lists has become zero (e.g. if you add a new board) and then add lists with items again, the items are no longer dragable between lists.

Hi. Kanboard has a plugin that allows you to visualise all your boards on one page appended one after the other.
This means less switching and more time saved.
While the original does not support it, it would be cool to move tasks across boards.
Thanks.

Lovely project. A few years ago I made something that has a small overlap with this one, and implemented a fun feature where I could share a board just through a link. Basic idea was every few seconds, I would update the fragment url with an encoded version of the data. That way I could copy the link, send it to someone, and they would effectively have a local 'fork' of the board.

The relevant ~25 lines of logic code can be found here https://github.com/jedahan/saltpeanuts/blob/master/app.js#L1-L45 , but the gist is:

const data = (() => {
  const hash = rison.decode_object(decodeURI(window.location.hash.substring(1)));
  if (hash.updated > 0) { return hash; }

  const local = rison.decode_object(localStorage.getItem('saltpeanuts') || '');
  if (local.updated > 0) { return local; }

  return {
    updated: new Date(),
    blocks: [ 'study japanese', 'email', 'mozilla/nsf', 'click me!', 'elusive index 4' ],
    schedule: {
      monday: [1, 0, 0, 4],
      tuesday: [4, 4, 4, 4],
      wednesday: [],
      thursday: [],
      friday: [],
    },
  };
})();

window.setInterval(function() {
  data.updated = new Date();
  const datastring = rison.encode_object(data);

  localStorage.setItem('saltpeanuts', datastring);
  window.location.hash = datastring;
}, 2000 );

I used rison to encode the data in human-readable, url-safe format, but you can use whatever format you prefer or write your own encode/decoder if importing the ~500 line rison.js is too heavy.

Hi @apankrat,

Great project you've just built!! Really enjoying it!

One use I want to have on this is as a bookmark store/manager.
By saying that I'm wondering if it's possible to have a fast access to a URL pasted just by clicking on it or Ctrl+Clicking or it.

Regards,
C.

This is a very minor thing, but it is a workflow improvement.
Every time I create a new list, I write the title and instinctively press CTRL+Enter to start typing notes, but this is not possible, since it just stays in the title field of the list.

I've attempted to put overflow: overlay; in some places but with no luck. I can't figure out how to hide the scrollbar, or make it thin. I'm wondering how I should go about fixing this? I frequently make my window small size.
TIA.

A monospace font would be very nice to allow for alignment of stuff.

Add an option to have local paths, e.g. C:\Windows, to be marked up as file:/// links and handled the same way as http:// and https:// links are handled right now (pulse on hover, highlighted and clickable when the CapsLock is on).

Nullboard is great, I am really finding it useful.

Pardon my ignorance here, but I tried to open my nullboard file (renamed index.html) in a different browser and it does not show my edits. I assume this is due to Local Storage in the browser where I made the edits, and the other browser has no access to that data?

Is there a way to carry my edits over to a different browser? Export/import the board?

Thank you!

• Edit: OK, the export/import worked ... great work on NB, and thanks again.

I am using NB on a number of devices -- starting with multiple Firefox profiles and ending up with at home / at work notes, and so I spent some time thinking of the best way to automatically merge different board revisions -- until 4jag's uploaded his wonderful example and I realized that we don't actually have to.

_{(And as one could easily conclude from the whole source control software industry experience, in general case this is not even possible, to start with)}

The rest was easy.

First, we introduce some unique ids for our notes -- so that we can cheat and say "hey, this is the same note" when we look at two different board revisions. And second, we leave the hard work of resolving note merge conflicts to the board owner, simply writing the old and new versions of the note text one on top on another, pretty much the same as old-school merge conflict editors do.
(In addition, some visual highlight for such "merge conflict" cases would be a nice to have.)

Now all we have to do when merging two boards is to create an index {(note id) => (note data)}, and to incrementally add our notes to that index, "merging" two notes with the same id.

Here is a more detailed description of the above, along with a proof-of-concept implementation (check the gif for a demo) :

• https://github.com/gf-mse/nullboard/blob/dev/README.md

Sadly I am not a design genius like Alexander, so board merging commands and the like simply go to Nullboard menu, along with some keyboard shortcuts to make repetitive operations a tad easier.

Lastly, this, again, is a proof-of-concept project, so while it works, there are some unpolished bits here and there -- for example, I did not update the board format code (shame on me!) or did not introduce a check that all board elements are of the new format and e.g. all the notes have unique ids before merging. Please check the proof-of-concept warning ssection of the README file for details.

However, the same README file has a fairly detailed description of the revision history, which shall make it relatively easy to explore the code, if intended.

@apankrat Alexander, please kindly let me know your thoughts, when you have time.

Tagging: #2, #54 .

Nice little app! I use it for writing complex markdown documents, the multiple column layout helps me to have a clear overview of the document structure.

FYI I quickly made a small script which converts a NBX file to a markdown document (board title becomes h1, columns titles are h2 and raw notes are h3): https://github.com/brrd/nbx2md

You might be interested in making this markdown export a nullboard feature. If so then feel free to use my code.

After importing a saved revision of the same board, it is automagically assigned a new board id, what leaves us with two identical board names in the menu; if the issue is not attended immediately, then it is up to us as the user to figure out which is which, and makes the whole thing a little confusing.

I wonder what if we would allow the user to choose if the existing board shall be overwritten on import -- something along the lines of the following (982e26384f)?

I can easily make a PR if required ))

This looks great! I really like the minimalism. Something I would like is the ability to view my todo-lists from my phone. I use Firefox Focus on mobile, which clears cache/history on exit each time. This would be a problem for nullboard since state is saved locally. Is there a way for me to sync this on my personal server and have it show-up from any device that I use. It would be really nice for it not be tied to a specific device.

First of all, thanks the project is awesome!

Is a feature like synchronization between different browsers on the roadmap? Or switching to DB storage (have seen sth about it on other issues but not many reactions lately).

In the meantime has somebody figured out a solution to automatically back up the boards on Linux?
Manually exporting boards upon changes is very painful :')

It would be useful to label cards, especially when tracking a lot of different types of task on the card (e.g. feature request, bug, ui/ux, and performance).

1. Add/remove labels on cards.
2. Add/remove labels on lists (a different set to the ones on cards).
3. Select the background/foreground colour for the labels.
4. Create new labels in-place.
5. Auto-complete for existing labels in the list select drop-down.
6. Group by label for lists with a configurable ordering.
7. Label hierarchy -- e.g. release/[VERSION], feature-request/[PRIORITY].
8. Archived lists/cards could be implemented by having labels have an "archived" flag and a default "Archived" label with that flag set.
9. Filter the view to show selected card/list labels. (This could be how the archive support is implemented, i.e. a default Archive flag is hidden by default.)

The idea behind the list grouping labels is to be able to organize cards in a way that keeps the information when moved into completed lists, and to better organize long lists.

• I have mapped CapsLock to Escape. Maybe K or L would be good for links.
• I wish to tweak the Enter-related keyboard shortcuts. E.g. new note Enter, new note above Shift+Enter, line break with Ctrl-Enter or sth.

Offer some user storage options like gdrive. I think of a similar mechanism draw.io has.

Would be lovely to have a feature to search notes in/across boards?

macOS Monterey Version 12.6
Firefox 106.0.5 (64-bit)
Also tested on Chrome 107.0.5304.87 (x86_64)

STR

• Right click on a note to open the context menu
• Click anywhere outside the context menu to close it
  OR
• Middle click on a note once

ER

• Nothing happens

AR

• Drag and drop mode seems to have been toggled for that note and even though I am no longer holding any mouse buttons or keys down, the note is still following my cursor until I click to place it again

This occurs because the jQuery mousedown listener that primes a note does not differentiate between the mouse key codes. The below PR fixes this

have tried many alternatives over the years
currently use 3x5 cards because alternatives are too clunky (why does anyone use MS OneNote?)
have switched over to NB and luv it
still use 3x5 cards (kept in jacket/shirt pocket, etc.) as pencil+paper is still the least obtrusive note-taking mechanism, especially when mobile/desktop is difficult/inappropriate
then xfer paper notes to NB
NB and 3x5 is the best solution i've found during 20+ years of taking notes
TY!

Expected behaviour: Import/Export behaves like Save/Load in a desktop software. (To facilitate data preservation after cache clearing, and the sharing of boards between users/browsers.)

Problem: Saving a board by exporting it works as expected. However, reimporting doesn't replace the original board but opens up a new board with a different internal ID. Result: two boards with the same name but possibly differing contents in the board list, one of which then has to be deleted manually.

Requested solution: Importing a board preserves the internal ID (-> change importBoard). If there is already a board with this ID open, replace it after asking for confirmation from the user.

Hey there! Good job on this app, I really like it! Pleasantly minimalistic, and good design choices on data storage/export.

One feature I would appreciate is the ability to move lists to another board. I started a board for a new project yesterday, but found out pretty soon that I need more space, so I had to expand to several boards. I didn't want to retype everything, but manually cutting/pasting JSON across exported files and then re-importing isn't particularly pleasant either.

In short: Moving lists across boards (if technically feasible) would greatly increase scalability.

First , what a super piece of code , simple and so efficient
I use MD and orgmode for a lot of such things , so my direct idea was to be able to copy paste an MD file content
using hash # as list name, ## as inside list title and - as todo lists
pasting would parse and draw the NB equivalent of the marldown todo list
it would be an easy way to initialize lists from an editor once the structure is ready , OFF it goes pasted into NB and creates the magic !!
here's a sample of one of my lists

#feature #enhancement
It could be super usefull as a shortcuts to reduce all notes with a keyboard short cut and revert to uncollapse everyhting when looking for something

It seems that touch is not supported, both on mobile screens and on desktop (laptops).

Looking through the scripts, I'm not clear whether you included the code of an existing drag-and-drop framework, or rolled your own. Is it Dragster? (Maybe an older version? I see the word "dragsters" in there, but the latest Dragster supports touch screens).

I was hoping to update the drag/drop code to support touch, but I just thought I ask first so I might find a better starting point.

Thank you!

please mahe this in electron or photon http://photonkit.com ,
for example main menu in photon as icons
save, import file

Right now, items (notes/lists/boards) can either exist or not. I find it very useful to archive items (could just make them hidden) when I'm done with them instead of just removing them. This allows me to go through and look at past things if I wanted to.

Just saw this project on HN and am very impressed. I just want to suggest that can we have due date and recurring option to tiles? that would make it more usable

A second level of index/indirection is often useful. If you can work in some markup processing to maintain a db of crosslinks by #string then we can co-relate things in different lists by subtopic.

Also by date.

(this kind of thing tends to the "you're bigging it up too much" and a WONTFIX is a fine response.

Hi!

First of all thanks for this brilliant app!

I like to have quite large lists and I noticed that this UI setting is not restored between sessions/load of the page.

STR:

1. Modify the list width to a non default value using the UI preferences button
2. Close the tab
3. Open nullboard in a new browser tab

ER:
The list width is the same as before the tab was closed

AR:
The list width is back to the default value

I have a vendetta against horizontal scrolling, and sometimes my lists are really short

Nice job ! Any (easy) way of adding basic text formatting (bold, italic, underline, font color, bulleted list, numbered list) ?

Get rid of localStorage, basically.

As new tab page replacement please?
Needs some work if multiple tab is open, one can overwrite another...

Apart from that one call to Object.assign, the rest of the code seems to be compatible with older browsers. Could you add a polyfill for Object.assign to make this app work also in older browsers?

The following makes the print / print preview appear better:

@media print {
    .teaser, .logo {
        visibility: hidden;
    }
}

Would be great if you could add in something like this.

Feature request: ask for confirmation before deleting a board.

Nullboards does look better than Focalboard, but it is only browser only, is it possible to convert this into an app with a browser-stored DB?

Straight to the facts: This is really great!

I've been looking for something like this for a long time, to be honest.

It's simple, stylish, very straightforward to use. And it works offline! Yay.

Just one question:
This has a very nice touch and polished feel, but I think a favicon, even a very simple one embedded into the HTML, would really round off the overall look.

Let me know what you think.

Using Windows 10 Firefox on a 24" 16:10 1920x1200 monitor I have to increase the size to 150% to get an acceptable font size.
With the default font size the three columns used by the sample page use less then half of my screen width.

Hi, i have created a new board. But the new board is not visible on the other device. What can i do?

And can i set a board as default `?

Hi all!

So... where is the nullboard agent source code?

The data can also be automatically backed up to a local disk (with the help of Nullboard Agent).

reference

• https://nullboard.io/backups

Great effort! One quick suggestion: currently lists on a board wrap every fourth column. In case this isn't a conceptual thing, it would be nice if a board could leverage the full width of a browser window on larger screens.

DISCLAIMER: I haven't tried this, just going off the advertising that is really enticing. (I found NullBoard looking for an easy self-hosted project tracker to help work on some app ideas of my own, so I'll hopefully be trying Tauri in the near future.)

Tauri is supposedly (if I understand correct) a lightweight yet more robust alternative to Electron that bundles a frontend app and its backend server, runs the frontend using the system web UI, and is cross-platform.

So, for instance, instead of building a NullBoard Agent for each OS and having to run it in the background separately from the front-end, the Agent and the single-page app could be bundled into a single application (and should hopefully work on all desktop OSes).

The single-page app would still be useable as an HTML file without the local backups, since Tauri is designed (again, if I understand correctly) such that in practice the frontend and backend still communicate over HTTP just like a web app.

(One thing I don't know: Tauri's support for localStorage… Well, but it would be straightforward to implement a localStorage alternative that sends data to the backend where it's saved as a file, I suppose.)

I'll admit, I admire the system tray solution to managing a background server for a local web application – I wanted to build apps this way myself around a decade ago, but didn't figure out a good way to get the system tray bit on all three OSes. Same time period where I wanted to do the export/import trick that NullBoard is doing but FileReader wasn't well supported so while export was easy import wasn't doable without a backing "server" app. I even had a page where list items were editable and could be added and deleted, though I never worked out a satisfactory method for saving and it wasn't as robust nor as featureful as NB.

Thanks a ton for NullBoard! 🚀

Hello Alexander,

I just discovered your one-page Kanban app, and it's fantastic! As great as it is already, I have a few suggestions I hope you will consider:

• Ctrl+Arrows to move notes up and down lists, and left and right between adjacent lists, when the focus is on editing a note in place.

• Key combination to spit note, creating a new note above or below while editing note.

• Key combination to move lists left and right with focus on editing title

• Ability to include Twitter handles and URLs in notes and have them become clickable links (currently, URLs seem to make the GUI shake)

Thanks for listening, and for a really great app.

Michael

According to MDN,

<meta> elements which declare a character encoding must be located entirely within the first 1024 bytes of the document.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta#attr-charset

In addition, you should always specify the characterset as early as possible within your HTML's <head> block (within the first kilobyte) …

https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Writing_style_guide/Code_style_guide/HTML#document_characterset

At one point I believe one of these pages noted that browsers essentially have to parse the document enough to find the meta tag with the charset attribute, then stop, throw it out and start over parsing with the specified charset, so the earlier it shows up the better. I don't know if that specific reason is still applicable. I haven't been able to find it again searching MDN's docs now.

the = menu items, could they be self-documenting CTRL- kbd accellerators or something? I would love to be able to do some stuff without mouse. HJKL and emacs steerage even for item sorting in list?

Mate, you are an absolute life-saver. How do I donate?

PS. had to quickly hack up a simple Python backup server, nudge me to clean it up a little and upload )
PPS. actually, that might be a base to make this sync-able between several machines, what would probably make this app even more awesome

The "Export This Board" function breaks on suckless surf.
Pressing the export function opens a new terminal and outputs an error message curl: (3) URL using bad/illegal format or missing URL.