- Organização dos padrões de design que se repetem, com base na experiência de criação de HTML tools que reúnem HTML, JavaScript e CSS em um único arquivo executável
- Explicação, com foco em casos concretos, de como pequenas ferramentas — mais de 150 criadas ao longo de 2 anos — são realmente feitas e mantidas
- Uma estrutura sem etapa de build e com uso de CDN faz surgir naturalmente um fluxo de desenvolvimento baseado em copiar e colar
- Expansão do que é possível fazer só com recursos do navegador: URL, localStorage, abrir arquivos, downloads, Pyodide e WebAssembly
- O fortalecimento de um fluxo em que a própria coleção de ferramentas se torna a base de desenvolvimento, por meio de prompts, registros de resultados e recombinação de ferramentas existentes
Conceito e exemplos de HTML tools
Estrutura básica de uma HTML tool
- Composição em um único arquivo HTML, com JavaScript e CSS inline
- Como não usa React, que exige build de JSX, fica simples copiar e redistribuir
- As bibliotecas necessárias são carregadas diretamente de CDNs como CDNjs ou jsDelivr, mantendo as dependências no mínimo
- O código é mantido na faixa de algumas centenas de linhas para reduzir o custo de manutenção e continuar legível e editável rapidamente por LLMs
Prototipagem com Canvas e Artifacts
- Uso de ChatGPT Canvas, Claude Artifacts e Gemini Canvas para executar a HTML tool imediatamente e definir a forma inicial
- Inclusão da condição “No React” para gerar código que funcione direto, sem etapa de build
- Exemplo que converte JSON colado em YAML
Quando fica mais complexo, migrar para agentes de código
- Com Claude Code ou Codex CLI, é possível automatizar tarefas repetitivas, incluindo testes no navegador com Playwright
- Em ferramentas mais complexas, como um visualizador de threads do Bluesky, usa-se a estratégia de “fazer upgrade” para esses agentes
- As ferramentas são adicionadas ou atualizadas criando PRs diretamente no repositório simonw/tools
- O processo de trabalho com agentes baseados na web pode ser visto no vídeo de uso do Claude Code for web
Gerenciamento de dependências com CDN
- Ao usar bibliotecas adicionais, elas são carregadas a partir de uma CDN
- Há uma allow-list de CDNs permitidas por Artifacts/Canvas dos LLMs, então instruções como “usar PDF.js” acabam resultando na montagem da URL
- Quando necessário, usa-se o método de buscar a URL no cdnjs ou jsDelivr e colá-la no chat
- Tudo funciona em um único arquivo HTML, sem instalação via npm nem processo de build
- npm + etapa de build reduzem a produtividade para hackear rapidamente ferramentas individuais e fazer self-hosting
- As URLs de CDN incluem versões, o que ajuda a manter a reprodutibilidade por longos períodos
Hospedagem estática externa
- A hospedagem dentro das plataformas de LLM costuma ter muitas restrições de sandbox, e às vezes bloqueia o carregamento de dados/imagens por URL externa ou links para fora
- Em termos de experiência do usuário, isso também pode gerar mensagens de alerta, carregamentos extras e divulgação da plataforma
- A combinação “No React + CDN” facilita publicar em qualquer lugar, sem build
- Ao enviar um arquivo HTML para o GitHub Pages, ele já fica acessível por uma URL fixa
- A maioria das ferramentas é gerenciada no repositório simonw/tools e disponibilizada em tools.simonwillison.net
Entrada e saída centradas em copiar e colar
- Muitas ferramentas usam como mecanismo central transformar uma entrada colada e depois permitir copiar de volta para a área de transferência
- Como copiar e colar no celular é incômodo, o botão “Copy to clipboard” é adicionado com frequência
- A área de transferência do sistema pode guardar vários formatos ao mesmo tempo, e os eventos de paste do JavaScript também conseguem acessar esses dados “ricos”
- Ferramentas representativas
Ferramentas de depuração
- Criação de ferramentas dedicadas para inspecionar a estrutura real dos dados manipulados no navegador
- clipboard-viewer: mostra todos os dados da área de transferência, como texto, texto rico, imagens e arquivos
- Ferramentas adicionais
Salvar estado na URL
- Mesmo sem banco de dados no servidor, dá para armazenar bastante estado na URL
- Esse padrão é preferido em ferramentas pensadas para favoritos e compartilhamento
- icon-editor: preserva diretamente na URL o estado de edição de um ícone 24×24
Uso de localStorage
- localStorage é uma API do navegador que guarda dados de forma persistente no dispositivo do usuário, sem expô-los ao servidor
- É usado para armazenar estados grandes difíceis de colocar na URL ou valores secretos, como chaves de API, evitando risco de exposição em logs do servidor de um host estático
- word-counter: salva automaticamente o texto em edição
- render-markdown: mantém o conteúdo escrito em Markdown
- haiku: salva a chave de API no localStorage para gerar haicais com base em imagens da webcam
Uso de APIs com CORS liberado
- CORS (Cross-origin resource sharing) é o mecanismo que controla se o JavaScript no navegador pode chamar APIs de outros domínios
- APIs com cabeçalhos CORS abertos são recursos muito úteis para HTML tools, e vale a pena ir reunindo essa lista com o tempo
- São usados iNaturalist, PyPI, GitHub (com acesso anônimo ao conteúdo de repositórios públicos via raw.githubusercontent.com), Bluesky, Mastodon e outros
- Exemplos de ferramentas
Chamar APIs de LLM diretamente
- As APIs JSON da OpenAI, Anthropic e Gemini podem ser chamadas diretamente do navegador via CORS
- Como embutir a chave de API no HTML traz risco de roubo e cobrança indevida, usa-se o “padrão de secrets”, salvando a chave no localStorage
- Do ponto de vista da experiência do usuário, emitir e colar a chave de API gera bastante atrito, mas funciona
- Ferramentas de exemplo
Não ter medo de abrir arquivos
- Com
<input type="file">, é possível ler e usar arquivos diretamente no navegador, sem precisar enviá-los ao servidor
- ocr: usa PDF.js e Tesseract.js para transformar um PDF em imagens de páginas e executar OCR no navegador
- social-media-cropper: permite abrir/colar imagens e recortá-las em proporções de redes sociais, como Twitter/LinkedIn 2:1 e Substack 1.4:1
- ffmpeg-crop: gera comandos ffmpeg para corte de vídeo
Oferecer arquivos para download
- Mesmo sem servidor, o navegador pode gerar arquivos e oferecê-los para download
- O ecossistema JavaScript já conta com várias bibliotecas para gerar diferentes formatos
- Ferramentas de exemplo
- svg-render: renderiza SVG e permite baixar em PNG/JPEG
- social-media-cropper: oferece download da imagem recortada
- open-sauce-2025: cria uma agenda e disponibiliza para download um arquivo ICS que pode ser adicionado ao calendário
Pyodide e WebAssembly
- Pyodide é uma distribuição que compila Python para WebAssembly e o executa no navegador
- Como pode ser carregado de forma limpa via CDN, não há motivo para não usá-lo em HTML tools
- Com micropip, é possível carregar adicionalmente pacotes Python puros do PyPI via CORS
- Exemplos de ferramentas
Indo além com WebAssembly
- A base que torna o Pyodide possível é o WebAssembly, e ele também permite carregar no navegador softwares escritos em outras linguagens
- Squoosh.app oferece várias bibliotecas de compressão de imagem no navegador
- Exemplos de ferramentas
Recombinar ferramentas anteriores
- Quando há uma coleção pública única com mais de 100 itens, recombinar ferramentas com ajuda de LLMs se torna mais uma vantagem
- Às vezes, copia-se uma ferramenta anterior para o contexto; em agentes de código, usa-se referência pelo nome ou busca por exemplos
- O código-fonte de ferramentas funcionais também serve como documentação, inclusive dos padrões de uso de bibliotecas de edição, aumentando a taxa de sucesso dos LLMs
- Registro completo do processo de criação do pypi-changelog: transcrição do prompt
- O prompt foi estruturado para mandar olhar a ferramenta “pypi package explorer”, depois ler o código-fonte de zip-wheel-explorer, buscar wheels via API do PyPI, renderizar o diff entre versões e fornecer um botão Copy em uma nova ferramenta
- Veja também Executando OCR no navegador
Registro de prompts e transcrições
- O hábito de salvar e publicar o histórico de uso de LLMs ajuda a desenvolver a própria capacidade de utilizá-los
- Para ferramentas criadas em plataformas de LLM em formato de chat, o recurso de share é usado como meio de registro
- Ao usar agentes como Claude Code e Codex CLI, copia-se a transcrição completa do terminal, converte-se o log em HTML com terminal-to-html e compartilha-se via Gist
- Ao salvar a ferramenta pronta no repositório, inclui-se no commit message um link para a transcrição — coleção de registros: tools.simonwillison.net/colophon
Encerramento
- Ao longo do último ano e meio, explorar LLMs e HTML tools dessa forma foi muito divertido e ajudou bastante a entender o alcance do que se pode fazer com HTML e as capacidades dos LLMs
- Para começar sua própria coleção de ferramentas, basta criar um repositório no GitHub, ativar o GitHub Pages e começar copiando arquivos .html para dentro dele
- Como bônus, foi disponibilizado um link de transcrição com capturas de tela deste texto adicionadas usando Claude Code e shot-scraper
3 comentários
Padrões de HTML
Parece interessante.
Muito legal.