O que o visualizador JSX roda
Um componente React, em JSX ou TypeScript, com os hooks e o estado dele: o que o Claude e o ChatGPT escrevem quando você pede um app. As linhas import carregam as bibliotecas que ele cita, como lucide-react, recharts ou framer-motion, e os componentes do shadcn/ui de @/components/ui. As classes do Tailwind ganham estilo enquanto você digita.
O componente roda num quadro isolado, em outro endereço, então não consegue ler o solta.now, os seus cookies nem as suas contas. O que ele registra, e cada erro, aparece no Console embaixo da página, com a linha do seu código de onde veio.
Abrir um artefato React do Claude ou do ChatGPT
- Na conversa, copie o código do componente, da primeira linha
importaté o fim. - Aperte Colar acima, ou cole no código. A página aparece ao lado, ou embaixo no celular.
- Se algo não funcionar, o Console mostra o erro e a linha: diga os dois para a sua IA e cole o que ela mandar de volta.
Aberto de qualquer outro jeito, o mesmo código mostra uma página em branco: por que um artefato React abre em branco.
O que pode ficar diferente no link
A prévia é montada aqui, no seu navegador. O seu link é montado no servidor do Solta, com as mesmas bibliotecas nas mesmas versões e os mesmos componentes do shadcn/ui, mas com outro software: o esbuild no lugar do Sucrase para o JSX, e uma folha de estilo feita antes no lugar da versão do Tailwind para navegador. De vez em quando um detalhe pequeno, quase sempre um estilo, fica diferente no link. Abra o link uma vez antes de enviar.
Dois limites são iguais nos dois lugares. Um componente é um arquivo só, então um import de outro arquivo seu, como ./utils, não encontra nada. E as bibliotecas vêm da internet, então a prévia precisa de conexão para mostrar um componente.
Da prévia ao link
Quando funcionar, Gerar link, embaixo da página, monta o componente e publica no próprio endereço, e ele abre sem conta, em qualquer celular. Uma página de HTML simples abre no visualizador HTML, e o testador de HTML começa por uma página para escrever, com o Console aberto.
Perguntas
O que é um arquivo JSX?
JSX é JavaScript com tags parecidas com HTML, o jeito como os componentes React são escritos. Um arquivo .jsx ou .tsx é um componente, não uma página: ele precisa ser montado antes que um navegador consiga mostrá-lo. Este visualizador monta o componente enquanto você digita.
Por que o meu artefato do Claude fica em branco quando eu abro?
Um artefato React é um componente, não uma página. Aberto como arquivo, ou num visualizador de HTML simples, ele não tem nada que um navegador consiga desenhar, então mostra uma página em branco. Cole o código aqui, e o visualizador monta o componente.
Que bibliotecas ele carrega?
O React 18.3.1 e os pacotes que o Claude e o ChatGPT mais usam: lucide-react, recharts, framer-motion, os componentes do shadcn/ui e outros, nas versões que um site no Solta usa. Qualquer outro pacote do npm também carrega, pelo esm.sh.
Funciona com TypeScript?
Sim. Um arquivo .tsx roda, com os tipos tirados antes. O visualizador não confere os tipos, então um erro de tipo não para a prévia.
O meu código é enviado para algum lugar?
Ele fica guardado neste navegador até você apertar Limpar. A prévia busca as bibliotecas que o seu código importa, no esm.sh e no Solta, mas não o seu código. Nada dele é enviado ao Solta até você apertar Gerar link.
Posso abrir um arquivo .jsx do meu computador?
Sim. Abrir arquivo aceita arquivos .jsx, .tsx e .html. No celular, Código e Página se revezam na tela, e no computador Celular mostra a página com 390 pixels de largura.
Por quanto tempo o link fica no ar?
Um site publicado sem conta fica no ar por 24 horas. Para mantê-lo, entre pelo cartão que mostra o endereço, e ele continua no mesmo endereço.