Show HN: Nash - notas autônomas feitas em um único arquivo HTML

 (keepworking.github.io)
3 pontos por GN⁺ 2025-03-16 | 2 comentários | Compartilhar no WhatsApp
  • Nash é uma nota autônoma baseada em HTML que pode ser aberta e editada no navegador, sem precisar de serviço separado
  • As notas salvas podem ser editadas também offline, com a proposta de serem tratadas como arquivos de documento em vez de depender de Notion ou Word
  • Pode ser usado para criar conteúdo em formato de documento HTML, como blogs estáticos, conteúdo de página única ou anexos como fotos de pizza de uma galeria
  • Ao enviar por mensageiros, é possível visualizá-lo em prévia, permitindo também um fluxo de compartilhamento de conteúdo longo como se fosse um arquivo
  • Nash foi lançado como código aberto, e a página de nota em branco pode ser modificada e usada livremente

Notas HTML usadas só com o navegador

  • Nash é uma nota autônoma voltada ao conceito de note as HTML
  • Não requer software ou serviço separado; basta ter um navegador web, algo normalmente já instalado
  • As notas salvas oferecem suporte a edição offline
  • Uma nota em branco pode ser aberta em nash.html

Tipos de conteúdo e forma de compartilhamento

  • Pode ser usado para criar blogs estáticos ou conteúdo de página única
  • Também permite criar conteúdo anexando, por exemplo, fotos que estão na galeria
  • Quando enviado por mensageiros, pode ser visto em prévia, o que permite compartilhar conteúdo longo
  • Surgiu da experiência de fazer POCs de ideias simples com um único HTML, sendo uma primeira tentativa de criar um arquivo de documento que funcione sem serviço ou software separado
  • Nash foi publicado como código aberto, podendo ser modificado e usado livremente

Leituras relacionadas

2 comentários

 
xguru 2025-03-16

Nash, notas que funcionam em um único arquivo HTML

Você postou isso no Show GN e também no Hacker News, e recebeu muitos votos. Parabéns!
 
GN⁺ 2025-03-16
Comentários do Hacker News

  • Boa parte do trabalho pesado é resolvida por um único atributo HTML simples, mas poderoso, e surpreendentemente parece que muitos desenvolvedores não o conhecem
    É um recurso que existe há bastante tempo

    • Essa única linha representava quase 90% da implementação inicial do Writely
      O Writely foi a startup que depois virou o Google Docs, e digo isso como um dos fundadores
      Os outros 90% eram código de backend que tivemos de escrever para sincronizar corretamente as edições, porque cada navegador tinha bugs estranhos e diferentes na implementação de contenteditable :-)
    • É realmente incrível. Por volta de 2016 eu ainda fazia muitos sites sob medida para pequenas e médias empresas, e percebi que a maior parte podia ser feita com algo como WP
      Só que (1) estilizar no WP era trabalhoso demais e eu não queria manter isso, (2) eu não queria depender de funcionalidades de plugins e de upgrades do WP, e (3) eu queria permitir que pessoas com permissões diferentes editassem partes diferentes da mesma página, o que era praticamente impossível na maioria dos CMSs
      Então criei um CMS quase do zero baseado apenas em contenteditable e TinyMCE, marcando as áreas editáveis com essa tag. Claro que, antes de salvar, o backend verificava quem podia editar o quê
      Quando um cliente ou funcionário faz login, ele pode editar diretamente apenas as áreas da página para as quais tem permissão, e o CMS mostra uma borda pontilhada nas partes editáveis. Fontes e cores ficam salvas na configuração do TinyMCE, então não é preciso vasculhar nem mexer no HTML. Se quiser, também dá para mexer diretamente
      Para o cliente, isso parece bem mágico. Em vez de ir para uma página de edição separada para ver como a alteração vai ficar, ele faz a edição no próprio lugar na página, salva, e a mudança é publicada imediatamente
      A maioria desses sites continua no ar hoje, 5 a 10 anos depois, e quase não exige manutenção da minha parte
    • Algumas semanas atrás fiz uma demo ao vivo desse conceito. Para um recurso escondido do HTML, é realmente simples e poderoso
      https://news.ycombinator.com/item?id=43179649
    • Isso é bom. Antigamente, já fiz um editor de PDF convertendo documentos para HTML e depois colocando contenteditable="true" no div de nível superior
    • Soa como “ah, tem uma coisa incrível aqui, ela se chama roda e existe há um bom tempo”
      Acho que já trabalhei com isso 20 anos atrás
      ContentEditable foi introduzido pela primeira vez no IE 5.5 em 2000 e, em 2007, já podia ser usado em todos os principais navegadores

  • Gostei muito, e gostei ainda mais ao ver o código-fonte porque está sendo escrito em JavaScript puro
    Hoje se subestima o quanto dá para criar apps web bastante interativos sem bibliotecas nem frameworks
    A ideia de criar um app web local simples como uma única página HTML também é excelente. Uma vez fui com meu filho a um museu de ciências e usamos um animador simples de stop motion; depois criei um app web parecido e copiei como um único arquivo HTML para o notebook dele, para que pudesse usar sem internet
    Só que eu tenho preguiça de escrever JavaScript puro diretamente, então fiz com React e um bundler, e o resultado final fica empacotado em um único arquivo HTML. Talvez um dia eu publique no Show HN

    • Assim como antes havia o “você não precisa de jQuery para fazer isso”, agora precisamos do “você não precisa de React, Vue, Svelte ou coisa parecida para fazer isso”
      Com JavaScript puro comum e um bom nível de habilidade, dá para fazer quase tudo de forma mais limpa e mais fácil de manter
      Depois de décadas mantendo coisas feitas por outras pessoas, vi que um design quase estupidamente simples feito por alguém inteligente vence as outras combinações
    • Gosto desse aspecto do Quarto. Ele permite criar arquivos HTML independentes para compartilhar com outras pessoas

  • Bem feito
    Vale considerar mudar o comportamento para que, ao abrir a página pelo navegador a partir do disco local, ela entre automaticamente em modo de edição, e, quando estiver publicada no site de alguém e acessível pela web pública, vire uma visualização normal somente leitura. Basta verificar se o endereço é http/https
    Claro, ainda deve haver alguma forma de contornar isso para ver também em modo de edição, como um parâmetro de query string ou um fragmento mágico de URL
    Também deveria ser possível definir exceções para determinados domínios ou prefixos de URL. Se o padrão for keepworking.github.io ou <https://keepworking.github.io/nash/>, o modo de edição continuaria ativo nesse site e não seria preciso fazer nada especial para a demo
    Seria ainda melhor se essa exceção pudesse ser alterada pelo usuário. Assim, por exemplo, outras pessoas também poderiam obter o mesmo comportamento sem o truque do item 1

    • Gosto muito da ideia de um site em que você pode editar o conteúdo e salvar localmente
      Pessoalmente, acho ótimo e gostaria que continuasse exatamente como está

  • Com https://rpdillon.net/redbean-tiddlywiki-saver.html, dá para transformá-lo em um app portátil autossuficiente com salvamento “de verdade”

    • Fiz algo parecido no passado, e dá para ver em https://original.littr.me
    • Seria bom fazer com que ele sugerisse salvar o arquivo
      Assim ficaria muito mais próximo de um recurso em que você pode ter favoritos pessoais quando quiser

  • Bom. Houve uma discussão anterior que mencionava essa ideia e o TiddlyWiki
    https://news.ycombinator.com/item?id=43179649

  • Eu gostaria que os navegadores dessem suporte melhor a apps web locais
    Se arquivos locais pudessem acessar facilmente armazenamento persistente, isso abriria muitas oportunidades para apps com GUI rápidos e fáceis. Na prática, seria o caminho oposto ao Electron

    • Como um arquivo pode acessar alguma coisa? Um arquivo é apenas dados, então não pode fazer nada

  • Legal. Talvez por eu estar tão acostumado a escrever a parte em JavaScript de um site fora do HTML de fato, quando vi pela primeira vez pensei: “uau, que curioso que dá para fazer isso só com HTML”
    Mas, ao olhar o código-fonte, vi que havia JavaScript dentro de uma tag script comum, e isso me fez lembrar de novo que também dá para fazer desse jeito

    • HTML é subestimado
      A maior parte das telas que vemos todos os dias, até mesmo editores de código, são páginas HTML
    • Não é necessariamente a abordagem a adotar se você quer separação ou controle de versão. Mas certamente é uma abordagem possível
      O mais surpreendente é que as pessoas usam frameworks e colocam dentro do HTML coisas que nem são JavaScript, com estruturas em que um JavaScript externo é anexado depois ou precisa fazer hidratação. Parece juntar o pior dos dois lados
      Eu estou mais no extremo oposto: JavaScript é o centro e, tirando index.html, não tenho arquivos com extensão .html. Também não coloco HTML dentro do JavaScript. Os templates parciais são todos .htm e são hidratados antes de serem adicionados ao DOM

  • Seria bom aparecer um aviso ao tentar fechar a página depois de editar sem salvar
    Vale considerar adicionar um manipulador onbeforeunload

    • Esta página da web também tem um aviso ao fechar, mas, de modo geral, é uma boa sugestão

  • Gosto desse tipo de ferramenta simples. Há pouco tempo criei uma “homepage”/dashboard personalizado simples: https://github.com/rcarmo/onepage-by-spec

    • Acabei de atualizar para também permitir “salvar”

  • Muito bom. É frustrante ver cada vez mais softwares escondendo atrás de uma assinatura recursos que poderiam ser facilmente executados localmente e que já eram assim, além de impor limitações artificiais
    Estou criando um editor Markdown gratuito que roda só dentro do navegador e consegue editar arquivos locais por meio da nova File System Access API. Essa API só está disponível em navegadores baseados em Chromium
    https://zareith.github.io/chillmd/