# Ateliê Editor de código com cores por linguagem, números de linha, busca e blocos que recolhem, direto na sua página. > Ateliê é um componente exclusivo do THM Componentes que coloca um editor de código leve no seu painel, sem bibliotecas: realce de sintaxe para TypeScript, JavaScript, Vue, HTML, CSS, JSON e Python, números de linha, busca com Ctrl+F, dobra de blocos e atalhos de IDE. Serve para playgrounds de API, configurações e revisão de código gerado por 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/atelie/ ## Como ele é Parece a janela de um editor de programação em versão clara, num cartão branco de cantos arredondados. No topo fica uma aba com o nome do arquivo, um selo colorido da linguagem e um ponto quando há alterações não salvas, ao lado dos botões de buscar, recolher tudo e copiar. À esquerda ficam os números das linhas e setinhas para recolher blocos; a linha atual ganha um fundo levemente tingido e um filete na cor de destaque. Palavras-chave aparecem em anil, textos em verde-azulado, números em laranja e comentários em cinza. No rodapé, linha, coluna, recuo e o seletor de linguagem. ## Você pode estar procurando isto se pediu algo assim - “editor de código dentro do meu painel admin com cores na sintaxe” - “campo para editar JSON de configuração sem bagunçar a formatação” - “playground para testar chamadas da minha API no próprio site” - “caixa de código com número de linha e busca, tipo VS Code, só que leve” - “mostrar e ajustar o código que a IA gerou antes de aplicar” - “textarea que vira editor de programação com indentação automática” - “editor de código que não deixe a página pesada” ## Também chamado de editor de código, realce de sintaxe, syntax highlighting, editor de código no navegador, code playground, editor de JSON, editor de programação leve ## Quando usar - Playgrounds de API e documentação interativa em que a pessoa edita o exemplo - Edição de configurações em JSON ou de trechos de script em painéis técnicos - Revisão e ajuste de código gerado por IA antes de salvar - Ferramentas internas que pedem busca, dobra e atalhos de IDE sem um editor pesado ## Quando evitar - Projetos que exigem autocompletar inteligente, checagem de tipos ou várias abas de arquivo - Código em linguagens fora das sete suportadas, como PHP ou SQL - Leitura de arquivos com linhas longas no celular, já que o texto não quebra e rola na horizontal ## Como pedir para a sua IA ```text Adicione um editor de código leve com realce de sintaxe no playground de API do meu painel: números de linha, busca com Ctrl+F, dobra de blocos, Ctrl+S para salvar, saída do foco com Esc e Tab para não prender o teclado e as cores do meu tema. ``` 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 Ateliê ### Ateliê perde desempenho com arquivos longos? Ateliê desenha só as linhas visíveis da camada colorida e refaz o realce apenas nas linhas alteradas, o que mantém a digitação e a rolagem leves em arquivos longos. O componente não declara um limite de linhas, então teste com o maior arquivo que o seu sistema precisa abrir e compare o INP. ### Ateliê funciona com teclado e leitor de tela? Sim. Ateliê usa um textarea de verdade, com rótulo da linguagem e uma descrição dos atalhos para leitores de tela. Tab indenta em vez de sair do campo; para sair, pressione Esc e depois Tab. Resultados da busca e mensagens de status são anunciados, Ctrl+/ comenta e Ctrl+Shift com colchete recolhe blocos. ### Como salvo o que a pessoa digitou em Ateliê? Ateliê trabalha com v-model, então o texto fica sempre no seu estado. Ctrl+S emite o evento save com o código atual e tira a marca de alteração pendente, e os métodos getValue e setValue permitem ler e trocar o conteúdo pelo seu código, por exemplo antes de enviar a uma API. ## Componentes relacionados - [Errata](https://vibecode.thmtecnologia.com/componentes/errata/): Mostra o que mudou entre duas versões de um código ou texto, em vermelho e verde, para aceitar ou rejeitar cada trecho. - [Caldeira](https://vibecode.thmtecnologia.com/componentes/caldeira/): Janela de terminal escura em que a pessoa digita comandos, vê respostas coloridas e acompanha um deploy de demonstração. - [Biombo](https://vibecode.thmtecnologia.com/componentes/biombo/): Tela dividida em áreas que você aumenta, diminui ou recolhe arrastando as linhas entre elas, como num editor de código. - [Lauda](https://vibecode.thmtecnologia.com/componentes/lauda/): Editor de texto em blocos: digite barra para inserir títulos, listas e tarefas, e arraste cada bloco para reordenar. - [Gaveteiro](https://vibecode.thmtecnologia.com/componentes/gaveteiro/): Lista de pastas e arquivos que abre e fecha com um clique, como o explorador de um editor de código. --- 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.