Qué ejecuta el visor JSX
Un componente de React, en JSX o TypeScript, con sus hooks y su estado: lo que escriben Claude y ChatGPT cuando les pides una app. Sus líneas import cargan las bibliotecas que nombra, como lucide-react, recharts o framer-motion, y los componentes de shadcn/ui desde @/components/ui. Las clases de Tailwind toman estilo mientras escribes.
El componente se ejecuta en un marco aislado, en otra dirección, así que no puede leer solta.now, tus cookies ni tus cuentas. Lo que registra, y cada error, aparece en la Consola debajo de la página, con la línea de tu código de donde vino.
Abrir un artefacto de React de Claude o ChatGPT
- En el chat, copia el código del componente, desde la primera línea
importhasta el final. - Pulsa Pegar arriba, o pégalo en el código. La página aparece al lado, o debajo en el celular.
- Si algo no funciona, la Consola nombra el error y la línea: díselos a tu IA y pega lo que te devuelva.
Abierto de cualquier otra forma, el mismo código muestra una página en blanco: por qué un artefacto de React se abre en blanco.
Qué puede verse distinto en el enlace
La vista previa se arma aquí, en tu navegador. Tu enlace se arma en el servidor de Solta, con las mismas bibliotecas en las mismas versiones y los mismos componentes de shadcn/ui, pero con otro software: esbuild en lugar de Sucrase para el JSX, y una hoja de estilos hecha de antemano en lugar de la versión de Tailwind para el navegador. De vez en cuando un detalle pequeño, casi siempre un estilo, se ve distinto en el enlace. Abre el enlace una vez antes de enviarlo.
Dos límites son iguales en los dos lugares. Un componente es un solo archivo, así que un import de otro archivo tuyo, como ./utils, no encuentra nada. Y las bibliotecas vienen de internet, así que la vista previa necesita conexión para mostrar un componente.
De la vista previa a un enlace
Cuando funcione, Crear enlace, debajo de la página, lo arma y lo publica en su propia dirección, y se abre sin cuenta, en cualquier celular. Una página de HTML simple se abre en el visor HTML, y el probador de HTML empieza por una página para escribir, con la Consola abierta.
Preguntas
¿Qué es un archivo JSX?
JSX es JavaScript con etiquetas que parecen HTML, la forma en que se escriben los componentes de React. Un archivo .jsx o .tsx es un componente, no una página: hay que armarlo antes de que un navegador pueda mostrarlo. Este visor lo arma mientras escribes.
¿Por qué mi artefacto de Claude sale en blanco cuando lo abro?
Un artefacto de React es un componente, no una página. Abierto como archivo, o en un visor HTML simple, no tiene nada que un navegador pueda dibujar, así que muestra una página en blanco. Pégalo aquí, y el visor lo arma.
¿Qué bibliotecas puede cargar?
React 18.3.1 y los paquetes que Claude y ChatGPT usan más: lucide-react, recharts, framer-motion, los componentes de shadcn/ui y otros, en las versiones que usa un sitio en Solta. Cualquier otro paquete de npm también carga, a través de esm.sh.
¿Funciona con TypeScript?
Sí. Un archivo .tsx se ejecuta, sin sus tipos, que se quitan antes. El visor no revisa los tipos, así que un error de tipo no detiene la vista previa.
¿Mi código se envía a algún lugar?
Se guarda en este navegador hasta que pulses Borrar. La vista previa busca las bibliotecas que importa tu código, en esm.sh y en Solta, pero no tu código. Nada de él se envía a Solta hasta que pulses Crear enlace.
¿Puedo abrir un archivo .jsx de mi computadora?
Sí. Abrir archivo acepta archivos .jsx, .tsx y .html. En el celular, Código y Página se turnan en la pantalla, y en la computadora Celular muestra la página con 390 píxeles de ancho.
¿Cuánto tiempo sigue en línea el enlace?
Un sitio publicado sin cuenta sigue en línea 24 horas. Para conservarlo, inicia sesión desde la tarjeta que muestra su dirección, y sigue en la misma dirección.