Editor de texto minimalista que roda no navegador e salva todo o conteúdo na URL

 (github.com/antonmedv)
3 pontos por GN⁺ 2025-12-25 | 1 comentários | Compartilhar no WhatsApp
  • Editor de texto leve que funciona no navegador e salva todo o texto no hash da URL
  • O conteúdo digitado usa compressão deflate para reduzir o tamanho da URL e funciona 100% no cliente, sem servidor de backend
  • Inclui recursos básicos de conveniência como salvamento automático (atraso de 500 ms), modo escuro e suporte a dispositivos móveis
  • É possível definir o título do documento com # Title ou adicionar atributos de estilo à tag <article> para também salvá-los na URL
  • Como basta compartilhar a URL para transmitir o documento, é útil para compartilhar notas simples ou snippets de código

Visão geral

  • textarea.my é um editor de texto minimalista executado inteiramente no navegador
    • Todos os dados são salvos no hash da URL, então não há necessidade de servidor ou banco de dados separados
    • Feito em JavaScript, pode ser usado imediatamente sem processo de instalação

Principais recursos

  • Compressão de texto (Compression magic)

    • Comprime o texto digitado com o algoritmo deflate para minimizar o tamanho da URL
    • Permite compartilhar notas longas com URLs em torno de 500 caracteres

  • Armazenamento e compartilhamento via URL

    • O conteúdo escrito é incluído no hash da URL, permitindo copiar e compartilhar o link
    • Mesmo sem armazenamento em servidor, é possível restaurar o documento apenas pelo link

  • Salvamento automático e modo escuro

    • Oferece salvamento automático com atraso de 500 ms após a digitação
    • Reconhece a configuração de modo de cores do sistema e aplica automaticamente o modo escuro

  • Interface amigável para mobile

    • Também é possível escrever documentos no smartphone com a mesma funcionalidade
    • O design responsivo é adequado para uso em movimento

  • Arquitetura sem backend

    • Como diz a frase “Zero servers were harmed”, é um app totalmente baseado no cliente
    • Não há carga de servidor nem problemas de armazenamento de dados pessoais

Como usar

  • Acesse textarea.my e comece a digitar imediatamente
  • É possível ver a URL ficando maior conforme o texto é inserido
  • Você pode copiar a URL e compartilhá-la com outras pessoas

Dicas avançadas (Pro tips)

  • Se você inserir # Title na primeira linha do documento, isso será definido como o título da página
  • Os dados são salvos tanto no localStorage quanto na URL, garantindo preservação dupla
  • Se adicionar um atributo style à tag <article> nas ferramentas de desenvolvedor, esse estilo também será salvo na URL

Links de exemplo

  • Há um documento de exemplo de Crime and Punishment, de Fyodor Dostoevsky
  • Há um documento de exemplo de An Ode to Comic Sans, escrito pelo ChatGPT

Características técnicas

  • Construído com base em JavaScript
  • Gerencia os dados apenas com hash da URL e localStorage, sem requisições ao servidor
  • A estrutura simples ajuda a minimizar riscos de segurança e garantir carregamento rápido

Conclusão

  • O textarea.my é um editor de texto ultraleve que funciona em um ambiente serverless e oferece
    uma abordagem única em que é possível salvar e transmitir documentos apenas compartilhando a URL
  • É uma ferramenta adequada para desenvolvedores e designers usarem em registro rápido de ideias, anotações de código e criação de documentos de teste

Leituras relacionadas

1 comentários

 
GN⁺ 2025-12-25
Comentários do Hacker News

  • Curiosamente, eu também fiz quase exatamente a mesma coisa, só que para mapas
    Eu precisava de uma forma de desenhar em cima do mapa e compartilhar um link para que outra pessoa pudesse ver a própria localização
    Fazer anotações em uma captura de tela resolve o primeiro problema, mas não o segundo
    Então implementei eu mesmo meio que na pegada de Vibe engineering. É como um conceito de “app instantâneo” para um objetivo específico
    Dá para hospedar barato sem backend, então também dá para distribuir de graça
    Link da demo do MapDraw

    • Muito legal! Estou usando agora para planejar uma viagem
      Será que daria para adicionar anotações de texto também? E seria bom se o botão de apagar removesse só a última forma ou permitisse apagar a seleção, em vez de limpar tudo
    • A expressão “Vibe engineered” é engraçada demais. vibe coding tudo bem, mas chamar isso de engineering é hilário :D
    • A responsividade da página é muito melhor do que a de qualquer app de mapa que já usei
    • Muito bom! Um bug para relatar: ao mover o mapa, o desenho acompanha suavemente, mas ao dar zoom o desenho só se move depois que a animação termina
    • Projeto realmente incrível

  • Eu estava fazendo algo parecido hoje de manhã
    Fica mais limpo usar .toBase64({ alphabet: "base64url" }) e fromBase64({ alphabet: "base64url" }) em vez de usar replace na string base64
    Veja a documentação do MDN

  • Segundo a especificação, URLs podem ter no mínimo 8.000 caracteres
    Os principais navegadores suportam mais de 64.000 caracteres, e o Chrome suporta até 2MB
    RFC9110 seção 4.1-5, referência no StackOverflow, documentação do Chromium

    • Chrome tem 2MB, Firefox 1MB e WebKit não tem limite
      Só para constar, até o texto completo de Crime and Punishment cabe em uma URL
    • Parece que a indústria da vigilância vai deixando as URLs cada vez maiores para enfiar mais coisas como utm-tracker e IDs de campanha
      Se você olhar links de compartilhamento do Instagram ou do YouTube, eles vêm com parâmetros de rastreamento de centenas de caracteres
    • Só lembrando que character e octet não são a mesma coisa. Se não tiver sido convertido para URI-safe ASCII, 1 caractere não equivale a 1 byte

  • Não entendo por que armazenar os dados na URL e deixá-la inflada. Salvar em localStorage não seria suficiente?

  • Anos atrás eu fiz algo parecido com uma planilha
    Funcionava mudando de aba no campo de entrada e recarregando a página
    Link de exemplo
    O código inteiro tinha umas 130 linhas
    Mais exemplos

  • Eu criei um pequeno framework JS para facilitar a implementação desse tipo de compartilhamento baseado em URL
    Link do GitHub do lost.js

  • Gosto dessa abordagem do ponto de vista de privacidade
    Por isso estou pensando em adicionar uma opção de salvar na URL também ao meu editor kraa.io

    • Mas, do ponto de vista de privacidade, textarea.my inclui scripts de rastreamento
      Há código do Cloudflare beacon injetado, então é preciso tomar cuidado
    • Nesse caso, haveria alguma vantagem de privacidade em relação a usar um editor de texto nativo local?

  • Anos atrás eu fiz algo parecido para tablaturas de guitarra
    Veja tabviewer.app
    Resolvi o problema da URL ficar longa demais usando um serviço de encurtamento de URL

  • Projeto legal, mas quando carreguei “Crime and Punishment”, meu navegador mobile travou
    Parece que a URL não foi projetada para aguentar esse nível de “castigo”

  • Fazendo um pouco de divulgação, eu também criei algo parecido, mas ninguém se interessou
    Link do GitHub do Buffertab

    • O recurso de entrada por voz é interessante. Fiquei curioso se você chegou a pensar em usar Whisper wasm em vez da API da OpenAI