O que o visualizador JSX corre
Um componente React, em JSX ou TypeScript, com os seus hooks e o seu estado: o que o Claude e o ChatGPT escrevem quando lhes pede uma aplicação. As linhas import carregam as bibliotecas que o componente indica, como lucide-react, recharts ou framer-motion, e os componentes do shadcn/ui de @/components/ui. As classes do Tailwind ganham estilo à medida que escreve.
O componente corre numa moldura isolada, noutro endereço, por isso não consegue ler o solta.now, os seus cookies nem as suas contas. O que regista, e cada erro, aparece na Consola por baixo da página, com a linha do seu código de onde veio.
Abrir um artefacto React do Claude ou do ChatGPT
- Na conversa, copie o código do componente, da primeira linha
importaté ao fim. - Carregue em Colar acima, ou cole-o no código. A página aparece ao lado, ou por baixo no telemóvel.
- Se algo não funcionar, a Consola indica o erro e a linha: diga os dois à sua IA e cole o que ela devolver.
Aberto de qualquer outra forma, o mesmo código mostra uma página em branco: porque é que um artefacto React abre em branco.
O que pode ficar diferente no link
A pré-visualização é montada aqui, no seu browser. 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 em vez do Sucrase para o JSX, e uma folha de estilos feita de antemão em vez da versão do Tailwind para browser. De vez em quando, um pequeno pormenor, quase sempre um estilo, fica diferente no link. Abra o link uma vez antes de o enviar.
Há dois limites iguais nos dois sítios. Um componente é um só ficheiro, por isso um import de outro ficheiro seu, como ./utils, não encontra nada. E as bibliotecas vêm da internet, por isso a pré-visualização precisa de ligação para mostrar um componente.
Da pré-visualização ao link
Quando funcionar, Criar link, por baixo da página, monta o componente e publica-o no seu próprio endereço, e abre-se sem conta, em qualquer telemóvel. Uma página de HTML simples abre no visualizador HTML, e o testador de HTML começa por uma página para escrever, com a Consola aberta.
Perguntas
O que é um ficheiro JSX?
JSX é JavaScript com etiquetas parecidas com HTML, a forma como se escrevem os componentes React. Um ficheiro .jsx ou .tsx é um componente, não uma página: tem de ser montado antes de um browser o conseguir mostrar. Este visualizador monta-o à medida que escreve.
Porque é que o meu artefacto do Claude aparece em branco quando o abro?
Um artefacto React é um componente, não uma página. Aberto como ficheiro, ou num visualizador de HTML simples, não tem nada que um browser consiga desenhar, por isso mostra uma página em branco. Cole-o aqui, e o visualizador monta-o.
Que bibliotecas consegue carregar?
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, através do esm.sh.
Funciona com TypeScript?
Sim. Um ficheiro .tsx corre, com os tipos retirados antes. O visualizador não verifica os tipos, por isso um erro de tipo não trava a pré-visualização.
O meu código é enviado para algum lado?
Fica guardado neste browser até carregar em «Limpar». A pré-visualização vai buscar as bibliotecas que o seu código importa, ao esm.sh e ao Solta, mas não o seu código. Nada dele é enviado ao Solta até carregar em «Criar link».
Posso abrir um ficheiro .jsx do meu computador?
Sim. O botão «Abrir ficheiro» aceita ficheiros .jsx, .tsx e .html. No telemóvel, «Código» e «Página» alternam no ecrã, e no computador «Telemóvel» mostra a página com 390 píxeis de largura.
Durante quanto tempo fica o link online?
Um site publicado sem conta fica online durante 24 horas. Para o manter, inicie sessão a partir do cartão que mostra o endereço, e continua no mesmo endereço.