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).
🇦🇷 ES / 🇬🇧 EN: bilingual interface, with a selector in the sidebar and in the map header. The change is instant, your choice is saved in the browser, and the README opens in the active language.
📤 Export notebook: from a notebook’s view you can export everything as a single .md with an index, or as separate files inside a .zip (see the Exporting a Notebook section).
Note ID: shown in the metadata, handy for writing links by hand in the form [Title](nota:ID).
Collapsible map legend on mobile: on small screens the map’s notebook list folds away so it does not cover the graph.
Opening the app or clicking “📚 Notebooks” 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 single note is exported to .md, the link appears as nota:ID and only works inside this application. When a notebook is exported (📤), links to notes in the same notebook become internal links in the document or links between files.
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 📂 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; 📌 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 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 ← Notes button in the map header.
The 🇦🇷 ES / 🇬🇧 EN selector in the sidebar (and in the map header) switches the interface language instantly. Spanish is the default and your choice is saved in the browser. On the web, the map uses the same preference as the application; on desktop each file remembers its own. The README opens directly in the active language.
urgente → red
importante → green
When a notebook is open, the 📤 Export notebook button appears to the right of View all. It opens a dialog with two options:
📝 Everything in one .md: a single file named after the notebook, with an index at the top and each note as a chapter (with author, tags and dates). Headings inside each note are lowered a level so they do not clash with the chapters.
📦 Separate files (.zip): a .zip file with a folder named after the notebook and one .md per note. Each file has the same header as a note exported individually, so it can be imported again with 📂 Import .md.
What you see on screen is what gets exported, in the order chosen in the selector (newest, title A-Z, etc.). The button is hidden while a search or tag filter is active, and in the linked-notebooks view, because in those cases the screen mixes notes from other notebooks.
Links between notes ([Title](nota:ID)) pointing to notes in the same notebook become internal links (in the single .md) or links between files (in the .zip). Links to another notebook are kept as plain text.
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.