# Diff Viewer Mostra o que mudou entre duas versões de um código ou texto, em vermelho e verde, para aceitar ou rejeitar cada trecho. > O Diff Viewer é um componente exclusivo do THM Componentes que compara duas versões de um código ou texto e mostra o que entrou e o que saiu, lado a lado ou numa coluna só, com as palavras alteradas em destaque. Cada bloco pode ser aceito ou rejeitado, o que o torna próprio para revisar mudanças de agentes de IA. - Categoria: Aplicações e produtividade - Origem: Exclusivo THM, criado pela THM Tecnologia Inteligente; o prompt traz o código-fonte completo - Peso no carregamento: Médio: canvas ou animação contínua; bom para uma seção - Tecnologia: Vue 3, TypeScript - Interação: Mouse, Toque, Teclado - URL: https://vibecode.thmtecnologia.com/componentes/diff-viewer/ ## Como ele é Lembra a tela de revisão de código de um repositório, num cartão branco de cantos arredondados. O cabeçalho mostra o arquivo, quem propôs a mudança, a contagem de linhas somadas e removidas e uma barrinha de quadrados verdes e vermelhos. Linhas removidas aparecem em fundo rosado com sinal de menos; linhas novas, em fundo verde-claro com sinal de mais, e as palavras trocadas ganham um tom mais forte. Trechos sem mudança ficam recolhidos num botão que mostra as linhas. Cada bloco tem botões de aceitar e rejeitar, e uma barra de progresso conta quantos já foram revisados. ## Você pode estar procurando isto se pediu algo assim - “mostrar o que a IA mudou no código antes de eu aprovar” - “comparar duas versões de um texto com vermelho e verde” - “tela de revisão de mudanças igual à do GitHub dentro do meu app” - “aceitar ou rejeitar cada alteração que o agente sugeriu” - “ver as diferenças entre dois contratos linha por linha” - “comparador de versões de configuração para o meu painel” - “destacar só as palavras que mudaram entre duas frases” ## Também chamado de diff viewer, visualizador de diff, comparação de código, code diff, side-by-side diff, revisão de código, text compare ## Quando usar - Aprovação de mudanças propostas por agentes de IA antes de aplicar no projeto - Revisão de código em ferramentas internas e painéis técnicos - Comparação de versões de contratos, políticas e documentos com aceite por trecho - Histórico de configurações versionadas, para ver o que mudou entre duas datas ## Quando evitar - Arquivos binários, imagens ou planilhas, que não se comparam linha a linha - Revisões que pedem comentários em cada linha, recurso que o componente não tem ## Como pedir para a sua IA ```text Crie uma tela de revisão que mostre o diff entre o código atual e o que o agente de IA propôs: lado a lado ou unificado, palavras alteradas em destaque, aceitar ou rejeitar cada bloco, atalhos n e p para navegar, modo unificado no celular e o texto final pronto para aplicar. ``` Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar. ## Perguntas sobre Diff Viewer ### O Diff Viewer devolve o texto final depois da revisão? Sim. A cada decisão, o Diff Viewer emite o texto resultante com as listas de blocos aceitos, rejeitados e pendentes, e dispara o evento resolve quando não resta nenhum pendente. A prop pendingAs define se os blocos ainda não revisados entram como a versão nova ou como a original. ### O Diff Viewer funciona no celular? Funciona. Abaixo de 640 pixels de largura, o Diff Viewer usa sempre o modo unificado, numa coluna só, e esconde as dicas de atalho para caber na tela. Linhas longas rolam na horizontal por uma barra própria, que aceita arrastar com o dedo. ### Dá para revisar as mudanças no Diff Viewer pelo teclado? Dá. No Diff Viewer, n e p levam à próxima mudança e à anterior, a aceita e r rejeita o bloco atual e já pulam para o próximo pendente, e u desfaz a decisão. As setas rolam o código na horizontal, e cada decisão é anunciada a leitores de tela com a contagem de revisadas. ## Componentes relacionados - [Approval Card](https://vibecode.thmtecnologia.com/componentes/approval-card/): Cartão em que a pessoa revisa o que a IA vai fazer e segura o botão para aprovar, ou então rejeita ou edita o pedido. - [Version Timeline](https://vibecode.thmtecnologia.com/componentes/version-timeline/): Linha do tempo das versões de um documento, com régua para voltar no tempo, comparação lado a lado e botão de restaurar. - [Code Editor](https://vibecode.thmtecnologia.com/componentes/code-editor/): Editor de código com cores por linguagem, números de linha, busca e blocos que recolhem, direto na sua página. - [Agent Trace](https://vibecode.thmtecnologia.com/componentes/agent-trace/): Painel que mostra, passo a passo, o que a IA está pensando, quais ferramentas chamou e quanto tempo cada etapa levou. - [Comments Layer](https://vibecode.thmtecnologia.com/componentes/comments-layer/): Pins numerados que você solta sobre uma imagem ou tela para comentar, responder e marcar como resolvido. --- THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.