Notebook (Obsidian style)

Userland
1

I’m designing an Obsidian-style note-taking system in HTML and JavaScript that works both locally (on your desktop) and on a web server. It allows you to create many notebooks to store notes, tag them, link notebooks, and more. It also has the option to generate an interactive map showing all the relationships: linked notes, tags, internal links, etc., just like Obsidian.

Why?

To avoid relying on installations or dependencies and to allow for customization “a piacere”.

I haven’t uploaded it to GitHub yet. I’d like you to try it on my site (it saves data to your browser’s localStorage - I don’t access your data -, with the option to export to a .json file), or you can download it for inspection.

… and to learn…

If you want to try it:

If you want to download it, “right click->save as:”

Index.html

Marked.min.js

grafo.html

Test file with data=test.json

Upon entering the page, you’ll find the “Backup->Importar JSON” button in the sidebar. You may need to refresh the page. You can modify, create, and delete to see how it works.

Clicking the “:world_map: Mapa de notas” button will take you to the interactive map.

The READMEs:
English

First paragraph:

:books: Notebooks – Version 2.0

Note management system with virtual notebooks, Markdown editor, tags, global search, links between notes, connection map, and JSON export.

Without a backend for ease of use and portability, it saves data to the browser’s localStorage, allowing you to export all content to a .json file with the date and time embedded in the filename.

The system consists of three files: index.html (the application), marked.min.js, and grafo.html (the Notes Map, optional). A local copy of marked.min.js is included to enable rendering Markdown without an internet connection. All three must be in the same folder.

Español

For now it’s in Spanish but I’m working on making it bilingual (Spanish - English)

Ideas for the future:

Make it modular: separate html, css, and javascript(s) to facilitate necessary changes without struggling with a 3000-line file (index.html) or nearly 900 lines (grafo.html).

Main screen:

notebook1
notebook11071×783 75.1 KB

notebook2
notebook21072×785 152 KB

:world_map: Mapa de notas:
grafo
grafo1074×782 79.4 KB

As always: let me know if you find it interesting, if you try it, or if you think it’s garbage or crap.

Thanks, greetings from Argentina. :argentina:

2

It is now available in Spanish and English.

3

Estuve afinando algunos detalles, algunos colores, la nota por defecto si no hay datos en localStorage, la visualización en móviles, creo que va quedando bien.

I was fine-tuning some details, some colors, the default note if there is no data in localStorage, the mobile display, I think it’s going well.

4

Personal note management system with Markdown support.

Notebooks is a 100% private, local, cloud-free alternative. It runs directly in your browser as a static web application (HTML, CSS and JavaScript), guaranteeing that no data ever leaves your computer. SECURE, PRIVATE, FREE AS IN FREEDOM, AND FREE OF CHARGE.

:shield: Privacy and Total Control

  • :locked: 0% Cloud, 100% Local: No remote servers, no telemetry, no data collection. Everything lives in your local storage or in .json files that you control.

  • :bust_in_silhouette: No sign-up, no users: Forget about creating accounts, remembering passwords, or depending on a third-party service deciding to shut down or change its policies.

  • :open_file_folder: Data sovereignty (JSON / Markdown): Export and import whole projects whenever you want. Your notes are not trapped in proprietary formats (vendor lock-in); you can keep your backups on a USB drive, on your own disk, or migrate to Markdown whenever you need to.

:light_bulb: PKM features in a single file

  • :rocket: Total portability: No installation required. Just open index.html in any browser and you are done.

  • :link: Knowledge network: Connect ideas with links between notes ([Title](nota:ID)), link thematic notebooks, and check incoming links (backlinks).

  • :world_map: Visual notes map (2D graph): See the structure of your thoughts in an interactive Canvas 2D viewer (grafo.html) that processes the network of notes and tags in an ultra-lightweight way.

  • :pencil: Full editor: Live Markdown preview, interactive checklists, tables, metadata, special tags, and dark/light mode.

  • :globe_with_meridians: Multilingual: Interface and documentation built in, dynamically available in Spanish and English.

  • :memo: Notes in Markdown format

  • :label: Organizational tags

  • :magnifying_glass_tilted_left: Global search

  • :floppy_disk: JSON export/import

  • :page_facing_up: Individual export to .md

“Simplicity is the ultimate sophistication” — Leonardo da Vinci

5

Hola Daniel,

Me he bajado los archivos para probarlo en mi portatil y te comento alguna cosa:

La he encontrado muy prometedora, utilizo notas continuas en el movil, y veo esta opción muy interesante para tenerlas tambien en el portatil.

He creado un par de libretas y en ellas varias notas, las he grabado como backup tal como pide antes de salir y genera un .json.

Sin embargo tras cerrar el navegador y volver a cargar el index.html solo aparecen las dos libretas originales del inicio. Tengo que ir a backup e importar el .json generado para que aparezcan en el menu lateral derecho, pero no en la pantalla central hasta que clico en “Libretas de notas” y entonces se actualiza.

Yo esperaba que al iniciar ya salieran en la pantalla inicial las libretas nuevas generadas sin tener que recuperarlas del backup ni tener que actualizar en ¨libretas de notas", tal y como aparecen las dos iniciales siempre, ya que por otra parte cada modificación que se graba genera otro .json y al final tines un listado enorme de .json, cuando se supone que son copias de seguridad para no perder información y no para utilizar cada vez que se inicia la aplicación.

Espero haberme explicado.

Un saludo

Hi Daniel,

I downloaded the files to try it on my laptop and I have a few things to share:

I found it very promising. I use continuous notes on my phone, and I think this option is very interesting for having them on my laptop as well.

I created a couple of notebooks and several notes in them. I saved them as a backup as prompted before exiting, and it generated a .json file.

However, after closing the browser and reloading index.html, only the two original notebooks from the beginning appear. I have to go to backup and import the generated .json file for them to appear in the right-hand sidebar, but not on the main screen until I click on “Notebooks,” and then it updates.

I expected that upon startup, the newly generated notebooks would appear on the initial screen without having to retrieve them from the backup or update in “Notebooks,” just as the initial two always appear. Currently, each saved modification generates another .json file, resulting in a huge list of .json files. These are supposed to be backups to prevent data loss, not something to be used every time the application starts.

I hope this is clear.

Regards

6

Hola, JuanD. Gracias por interesarte en el tema.
Los datos se almacenan en localStorage, por más que los hayas cargado desde un archivo, si tenés activada la opción de borrar los datos al salir del navegador, los datos se pierden. Sucede con navegadores tipo TOR o los forks de Firefox que apliquen privacidad extrema. También puede suceder si está utilizando el modo privado o de incógnito.
Si tenés la opción de no borrar los datos al cerrar el navegador configurala de ese modo.
Supongo que eso es lo que pasa. Yo lo uso en Firefox, Zen-browser y Brave, tanto en PC como en móvil (menos Zen, sólo PC), y no borro datos del sitio, sólo historial, caché. Si tenés tildado “Cookies y datos del sitio” te seguirá pasando.

Por eso está la opción de backup.

La idea de generar archivos .json independientes es por si querés guardar distintos proyectos, podés guradarlos con diferentes nombres para identificarlos, o en subcarpetas. O sobreescribir los existentes. El nombre predeterminado del .json es más que nada como guía.

Espero que eso solucione el problema. Un abrazo

Hi JuanD, thanks for taking an interest in this.

The data is stored in localStorage. Even if you loaded it from a file, if you have your browser set to delete data when you close it, the data will be lost. This can happen with browsers like Tor or Firefox forks that use very strict privacy settings.

If your browser has an option to keep site data when closing the browser, make sure that option is enabled.

I assume that’s what’s happening. I use it with Firefox, Zen Browser, and Brave, both on PC and mobile (except Zen, which I only use on PC), and I don’t delete site data—only the browsing history and cache. It can also happen if you’re using private or incognito mode,
If you have “Cookies and site data” checked when clearing your browsing data, you’ll keep running into this problem.

That’s what the backup option is for.

The idea behind generating separate .json files is that you can save different projects using different names to identify them, or organize them into subfolders. Or overwrite the existing ones. The default .json filename is mainly there as a guide.

I hope that solves the problem. A hug

7

Efectivamente, uso Firefox con borrado de cookies y datos del sitio cada vez que lo cierro, ahora he gestionado como excepción la " libretas de notas" y me funciona correctamente.

Gracias por la rapida respuesta, ahora probaré a ir importando las notas del móvil.

That’s right; I use Firefox with settings to clear cookies and site data every time I close it. I’ve now added the “notebooks” to the exceptions list, and it’s working correctly.

Thanks for the quick response; now I’ll try importing the notes from my mobile.

8

Me alegro que haya sido sólo eso.
Con respecto al sistema de almacenamiento de datos, está pensado así, sin base de datos, para su total portabilidad, pensar en sincronización en la nube implicaría un backend tal vez incompatible con la idea. Yo lo soluciono guardando también los .json en dropbox, nextcloud o mega.nz . Tal vez que este dato te sirva.

I’m glad it was just that.
With regard to the data storage system, it is thus thought, without a database, for its total portability, to think about synchronization in the cloud would imply a backend perhaps incompatible with the idea. I solve it by also saving the .jsons in dropbox, nextcloud or mega.nz. Maybe this data will help you.