Sistema de gestión de notas con libretas virtuales, editor Markdown, etiquetas, búsqueda global, enlaces entre notas, mapa de conexiones y exportación JSON.
Sin backend para facilitar el uso y la portabilidad, guarda los datos en el localStorage del navegador, pudiendo exportar todo el contenido a un archivo .json con fecha y hora en el nombre del archivo.
El sistema consta de tres archivos: index.html (la aplicación), marked.min.js y grafo.html (el Mapa de notas, opcional). Se incluye una copia local de marked.min.js para poder renderizar Markdown sin necesidad de conexión a internet. Los tres deben estar en la misma carpeta.
📎 Enlaces entre notas: desde el editor se puede insertar un enlace a otra nota, elegida entre todas las notas agrupadas por libreta.
Enlaces entrantes: en los metadatos de cada nota se listan las notas que la enlazan.
🗺️ Mapa de notas: vista interactiva que muestra cómo se conectan las notas, las libretas y las etiquetas (archivo grafo.html). En escritorio hay que cargar el .json manualmente; en la web se carga automáticamente (ver la sección Mapa de notas).
Al abrir la app o hacer clic en el título “📚 Libretas de Notas” se muestra la pantalla de inicio con todas las libretas en una grilla visual. Hacé clic en cualquier libreta para ver sus notas, o usá el botón + para crear una nueva.
Las notas fijadas 📌 aparecen arriba de todo, antes de las libretas. Hacé clic en una para abrir su preview.
El botón ☰ abre el panel lateral con:
Cada libreta tiene botones para cambiar color (paleta de 16 colores), enlazar con otras (🔗), renombrar (✎) y eliminar (🗑).
Las tarjetas muestran título, autor, libreta, fechas, tamaño y etiquetas. Clic en tarjeta → abre preview. El botón + grande crea una nueva nota en la libreta activa.
Barra de herramientas: Hn (encabezados H1–H3), B (negrita), I (cursiva), Cód (bloque), ` (inline), List, ☐ (checklist), ” (cita), 🔗 (enlace), 📎 (enlace a otra nota), 🖼️ (imagen URL), — (separador).
También podés importar archivos .md (con o sin frontmatter YAML) y exportar como .md.
Usá el iframe de embed directamente en el Markdown:
<iframe width="560" height="315" src="https://www.youtube.com/embed/ID_VIDEO" allowfullscreen></iframe>
Reemplazá ID_VIDEO con los caracteres que aparecen después de v= en la URL del video.
Checklists interactivos (marcar/desmarcar guarda el cambio)
Tablas Markdown con bordes y filas diferenciadas
Metadatos contraíbles en móvil (botón ▶ Metadatos)
Clic en etiqueta → filtra; clic en libreta → va a esa libreta
El botón 📌 fija/desfija la nota. Las notas fijadas aparecen en la pantalla de inicio.
Los enlaces a otras notas (📎) se ven en ámbar; al hacer clic abren la nota enlazada. Si la nota enlazada fue eliminada, el enlace aparece tachado en gris.
En Metadatos, la fila Enlaces entrantes lista las notas que enlazan a la actual (Libreta › Título); un clic las abre.
Búsqueda: Busca en todas las notas (título, autor, contenido, etiquetas)
🏷️: El botón al lado de la búsqueda abre un dropdown con todas las etiquetas para filtrar globalmente.
Etiquetas: Filtran globalmente
Libreta activa: Solo filtra la vista cuando no hay búsqueda ni etiqueta activa
Ver todas: Desactiva el filtro de libreta
💡 ¿Para qué sirve enlazar libretas?
Enlazar dos o más libretas crea una relación temática o estructural entre ellas. No es una simple etiqueta: es una forma de agrupar conjuntos de notas que pertenecen a un mismo proyecto, idea o contexto.
Ejemplos prácticos:
Si tienes una libreta “Poemas” y otra “Borradores de poemas”, al enlazarlas podrás ver, desde cualquier nota de “Poemas”, también todas las notas de “Borradores” (y viceversa).
Un proyecto de escritura: libretas “Investigación”, “Personajes”, “Capítulos”. Enlázalas para tener una vista unificada.
Un diario personal: libretas “2023”, “2024”, “Reflexiones”. Al enlazarlas, el badge 🔗 en cualquier nota te mostrará las notas de las tres.
Comportamiento técnico:
Los enlaces son bidireccionales: si enlazas A con B, automáticamente B queda enlazada con A.
Al hacer clic en el badge 🔗 que aparece en las notas pertenecientes a libretas enlazadas, se abre una vista agrupada especial: se muestran todas las notas de la libreta actual, seguidas de las notas de cada libreta enlazada, cada grupo con su cabecera de color. Puedes añadir nuevas notas a cualquier grupo desde esa misma vista.
No hay límite de cuántas libretas puedes enlazar.
Consejo de uso: Usa los enlaces para construir contextos de trabajo más amplios que una sola libreta, sin perder la organización por separado.
El botón 📎 de la barra del editor abre un selector con todas las notas, agrupadas por libreta y con buscador. Al elegir una, se inserta en el texto un enlace con la forma [Título](nota:ID). Si tenías texto seleccionado, ese texto pasa a ser la etiqueta del enlace.
El enlace usa el ID de la nota, no su título: sigue funcionando aunque le cambies el nombre.
Si la nota enlazada se elimina, el enlace queda tachado en gris.
Al exportar una nota a .md, el enlace sale como nota:ID y solo funciona dentro de esta aplicación.
Desde el sidebar, 🗺️ Mapa de notas abre grafo.html en la misma pestaña. Es un mapa interactivo donde cada nota es un nodo y se ven todas sus conexiones. Es de solo lectura: nunca modifica tus notas.
⚠️ De dónde toma los datos el Mapa:
En la web (servidor): si index.html y grafo.html están en el mismo sitio (misma dirección exacta), el mapa lee automáticamente las notas de la aplicación y se actualiza solo cuando guardás cambios. No hay que cargar nada. La primera vez en un navegador, importá tu backup en la aplicación (💾 Backup → Importar JSON); desde ahí el mapa lo ve sin pasos extra.
En escritorio (archivos locales): los navegadores suelen no compartir el almacenamiento entre archivos abiertos desde el disco, por lo que el mapa aparece vacío. Hay que cargar el .json manualmente: exportá un backup desde la aplicación (💾 Backup → Exportar JSON) y en el mapa usá 📂 Cargar JSON. En este modo el mapa no se actualiza solo: después de editar notas, exportá de nuevo y volvé a cargar el archivo.
Qué se ve:
Notas: círculos coloreados según su libreta; son más grandes cuanto más enlazadas están. Las notas fijadas 📌 llevan borde ámbar.
Libretas: círculos grandes con anillo. Etiquetas: rombos grises (solo las usadas por 2 o más notas).
Líneas: enlaces entre notas (ámbar, con flecha), pertenencia a una libreta, libretas enlazadas entre sí (violeta punteada) y etiquetas (gris punteada).
Cómo se usa:
Arrastrar el fondo mueve la vista; la rueda del mouse hace zoom. Arrastrar un nodo lo mueve y lo deja fijo; 📌 Soltar fijados los libera.
Al pasar el mouse sobre un nodo se resaltan sus vecinos. Un clic abre un panel lateral con la nota renderizada y sus enlaces salientes y entrantes; el botón Abrir en el principal la abre en la aplicación.
Los botones del encabezado muestran u ocultan cada tipo de conexión, y la leyenda permite ocultar libretas.
El buscador resalta las coincidencias en título, etiquetas y texto; Enter salta a la primera y, al repetirlo, a las siguientes.
Para volver a la aplicación, podés usar el botón ← Notas del encabezado del mapa.
urgente → rojo
importante → verde
Exportar JSON: Descarga backup completo
Importar JSON: Restaura desde backup
Alerta al salir: Si hubo cambios, al cerrar la página se ofrece hacer backup
⚠️ Borrar Todo: Elimina todo (con confirmación)
El botón ☀️/🌙 alterna tema oscuro/claro. La preferencia se guarda.
Este proyecto se distribuye bajo la GNU General Public License v3.0.