Canvas: editor de notas client-side com arquitetura offline

ter., 14 de outubro de 2025 - 2 min read

Acessar Canvas →

O desenvolvimento desta ferramenta surgiu da necessidade de um ambiente para criação rápida de anotações e armazenamento temporário de textos. As soluções existentes não ofereciam um workflow eficiente para tarefas comuns como revisão, edição e remoção de formatação de forma ágil. Canvas foi desenvolvido especificamente para atender esses requisitos operacionais.

Stack tecnológica

Camada base: HTML5 com elementos semânticos, CSS3 com Grid Layout, variáveis customizadas, backdrop-filter para glassmorphism e media queries para acessibilidade, JavaScript ES6+ em Vanilla JS.

Bibliotecas externas: marked.js (parsing Markdown), DOMPurify (sanitização XSS), highlight.js (syntax highlighting), KaTeX e Mermaid (lazy loading para fórmulas e diagramas).

Persistência: localStorage API para notas e configurações, garantindo operação offline após carregamento inicial.

Funcionalidades principais

Gerenciamento de notas

Operações CRUD completas (criar, salvar, carregar, renomear, deletar) com importação/exportação de arquivos e salvamento automático.

Editor avançado

Numeração de linhas, minimapa de navegação, word wrap configurável, ajuste de tipografia e área de edição otimizada para documentos extensos.

Sistema de busca

Interface customizada com suporte a expressões regulares, navegação entre resultados (Ctrl+F), substituição individual ou global, e renderização virtual de destaques para performance em textos longos.

Visualizador Markdown

Pipeline de renderização com marked.js, sanitização via DOMPurify, syntax highlighting automático e suporte para tabelas, listas, imagens, fórmulas matemáticas (KaTeX) e diagramas técnicos (Mermaid).

Configurações persistentes

Painel de preferências com controle de tema (claro/escuro), efeitos de vidro, comportamento do editor e opções de acessibilidade, todas armazenadas localmente.

Casos de uso

Anotações rápidas: Registro ágil com salvamento automático, sem gestão manual de arquivos.

Scratchpad persistente: Área de transferência avançada para armazenamento temporário de texto e código.

Editor Markdown: Composição e pré-visualização de documentos com renderização fiel.

Editor de snippets: Ambiente isolado com fonte monoespaçada e syntax highlighting.

Privacidade offline-first: Dados armazenados exclusivamente no dispositivo local, sem transmissão para servidores externos.


Acessar Canvas →