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.
📎 Links between notes: from the editor you can insert a link to another note, chosen from all notes grouped by notebook.
Incoming links: each note’s metadata lists the notes that link to it.
🗺️ Notes Map: an interactive view showing how notes, notebooks, and tags are connected (file grafo.html). On desktop the .json must be loaded manually; on the web it loads automatically (see the Notes Map section).
Opening the app or clicking “📚 Libretas de Notas” shows the home screen with all notebooks in a visual grid. Click any notebook to see its notes, or use the + button to create a new one.
Pinned notes 📌 appear at the top, before the notebooks. Click on one to open a preview.
The ☰ button opens the side panel with:
Each notebook has buttons to change color (16-color palette), link to others (🔗), rename (✎), and delete (🗑).
Note cards show title, author, notebook, dates, size, and tags. Click a card to open the preview. The large + card creates a new note in the active notebook.
Toolbar: Hn (headings H1–H3), B (bold), I (italic), Cód (code block), ` (inline code), List, ☐ (checklist), ” (blockquote), 🔗 (link), 📎 (link to another note), 🖼️ (image URL), — (horizontal rule).
You can also import .md files (with or without YAML frontmatter) and export notes as .md.
Use the embed iframe directly in Markdown:
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" allowfullscreen></iframe>
Replace VIDEO_ID with the characters after v= in the video URL.
Interactive checklists (checking/unchecking saves the change)
Markdown tables with borders and alternating rows
Metadata collapsible on mobile (▶ Metadatos button)
Click tag → filter; click notebook name → go to that notebook
The 📌 button pin/unpin the note. Fixed notes appear on the home screen.
Links to other notes (📎) are shown in amber; clicking one opens the linked note. If the linked note was deleted, the link appears struck through in gray.
In Metadatos, the Enlaces entrantes (incoming links) row lists the notes that link to the current one (Notebook › Title); click to open them.
Search: Searches all notes (title, author, content, tags)
🏷️: The button next to the search opens a dropdown with all the tags to filter globally.
Tags: Filter globally across all notebooks
Active notebook: Only filters the view when no search or tag filter is active
View all: Clears notebook filter
💡 What is the purpose of linking notebooks?
Linking two or more notebooks creates a thematic or structural relationship between them. It is not just a tag; it is a way to group sets of notes that belong to the same project, idea, or context.
Practical examples:
If you have a notebook “Poems” and another “Drafts of poems”, linking them allows you to see, from any note in “Poems”, all notes in “Drafts” (and vice versa).
A writing project: notebooks “Research”, “Characters”, “Chapters”. Link them to have a unified view.
A personal journal: notebooks “2023”, “2024”, “Reflections”. When linked, the 🔗 badge on any note will show you notes from all three.
Technical behavior:
Links are bidirectional: if you link A with B, B automatically becomes linked with A.
Clicking the 🔗 badge that appears on notes belonging to linked notebooks opens a special grouped view: all notes from the current notebook are shown, followed by notes from each linked notebook, each group with its colored header. You can add new notes to any group from that same view.
There is no limit on how many notebooks you can link.
Usage tip: Use links to build broader working contexts that go beyond a single notebook, without losing separate organization.
The 📎 button in the editor toolbar opens a picker with all notes, grouped by notebook and searchable. Choosing one inserts a link of the form [Title](nota:ID) into the text. If you had text selected, that text becomes the link label.
The link uses the note’s ID, not its title: it keeps working even if you rename the note.
If the linked note is deleted, the link is shown struck through in gray.
When a note is exported to .md, the link appears as nota:ID and only works inside this application.
From the sidebar, 🗺️ Notes Map opens grafo.html in the same tab. It is an interactive map where each note is a node and all its connections are visible. It is read-only: it never modifies your notes.
⚠️ Where the Map gets its data:
On the web (server): if index.html and grafo.html are on the same site (exact same address), the map reads the application’s notes automatically and updates by itself when you save changes. Nothing needs to be loaded. The first time in a given browser, import your backup in the application (💾 Backup → Import JSON); from then on the map sees it with no extra steps.
On desktop (local files): browsers usually do not share storage between files opened from disk, so the map appears empty. You must load the .json manually: export a backup from the application (💾 Backup → Export JSON) and, in the map, use 📂 Cargar JSON (Load JSON). In this mode the map does not update by itself: after editing notes, export again and reload the file.
What you see:
Notes: circles colored by notebook; the more links a note has, the larger it is. Pinned notes 📌 have an amber border.
Notebooks: large circles with a ring. Tags: gray diamonds (only tags used by 2 or more notes).
Lines: links between notes (amber, with arrow), notebook membership, linked notebooks (dashed violet), and tags (dotted gray).
How to use it:
Dragging the background pans the view; the mouse wheel zooms. Dragging a node moves it and pins it in place; 📌 Soltar fijados (Release pinned) frees them.
Hovering over a node highlights its neighbors. Clicking opens a side panel with the rendered note and its outgoing and incoming links; the Abrir en el principal (Open in main app) button opens the note in the application.
The header buttons show or hide each type of connection, and the legend lets you hide notebooks.
The search box highlights matches in titles, tags, and text; Enter jumps to the first one and, pressed again, to the following ones.
To return to the application, you can use the ← Notas (Notes) button in the map header.
urgente → red
importante → green
Export JSON: Download full backup
Import JSON: Restore from backup
Leave alert: If there are unsaved changes, closing the page offers a backup
⚠️ Delete All: Clears all data (with confirmation)
The ☀️/🌙 button toggles dark/light theme. Preference is saved.
This project is distributed under the GNU General Public License v3.0.