Previsualizador de React (TSX/JSX)
Escribe un componente React en TSX o JSX y mira cómo se renderiza al instante, sin instalar Node ni un proyecto. Gratis, directo en tu navegador.
Tu componente (TSX/JSX)
Vista previa
Define function App() { … } con tu componente. Corre en tu navegador; la primera vez carga React desde una CDN pública para poder renderizarlo.
Cómo funciona
Escribe tu componente
Define function App() { ... } con tu JSX o TSX.
Da clic en Previsualizar
Se compila en tu navegador y se renderiza al instante.
Ajusta y repite
Corrige tu código y vuelve a previsualizar cuantas veces quieras.
Preguntas frecuentes
¿Necesito instalar Node o crear un proyecto para probar un componente React?
No. Escribe tu componente y esta herramienta lo compila y renderiza directo en tu navegador, sin terminal, sin npm install y sin configurar nada.
¿Soporta TypeScript (TSX) o solo JSX?
Soporta ambos. Los tipos de TypeScript se quitan al compilar, así que puedes escribir tu componente con o sin anotaciones de tipo.
¿Por qué mi componente no aparece en la vista previa?
Esta herramienta busca un componente llamado exactamente App (function App() {...}) y lo renderiza. Si tu componente tiene otro nombre, cámbialo a App para verlo.
¿Puedo usar import y export en mi código?
Todavía no: esta herramienta compila un solo componente autocontenido, sin módulos externos. Usa React.useState, React.useEffect, etc. directamente en vez de importar hooks.
¿Mi código se sube a algún servidor?
No. Se compila con Sucrase directo en tu navegador. Lo único que se descarga de internet es React, para poder renderizar tu componente en el recuadro de vista previa.