Estudio de widgets

En el Estudio de widgets escribes, previsualizas y publicas un widget. Para abrirlo, abre uno de tus widgets desde Mi perfil y haz clic en Editar. Necesita un navegador de ordenador.

Distribución

Zona	Para qué sirve
Pestaña IA	Describe lo que quieres y deja que la IA escriba o cambie el código. Es experimental. En el plan Gratis tiene un cupo mensual de IA.
Pestaña Código	El editor de código, con autocompletado para React, la biblioteca Blotch, tus entradas y tus imágenes, y subrayados rojos para los errores de tipos.
Salida	Debajo del editor. Consulta Salida.
Vista previa	A la derecha. Muestra tu widget, que se vuelve a dibujar un par de segundos después de que dejes de escribir. Elige un Tamaño de la vista previa o arrastra los bordes de la vista previa para probar cualquier tamaño. El menú Borde te deja probar los bordes que la gente puede ponerle.

La barra de herramientas muestra la última versión que publicaste, Cambios sin publicar si has guardado algo desde entonces, y Publicar. Un medidor indica qué parte del límite de longitud del código de un widget has usado.

Menús

Menú	Elemento	Para qué sirve
Archivo	Guardar	Guarda tu código y tus entradas públicas. Ctrl+S (⌘S en un Mac).
	Publicar…	Lanza lo último que has guardado. Consulta Publicar y lanzar versiones.
	Historial de versiones…	Todos tus guardados, con lo que cambió. Restaurar carga uno en el editor.
	Configuración del widget	Nombre, descripción, icono, categoría y visibilidad. Consulta Ajustes del widget.
	Entradas	Entradas públicas, entradas privadas e integraciones. Consulta Tipos de entrada.
	Recursos	Las imágenes que has subido. Consulta Añadir tus propias imágenes.
	Eliminar	Elimina el widget. Solo aparece mientras nadie lo tenga instalado.
Editar	Insertar icono…	Busca un icono y añade el código que lo dibuja. Ctrl+Shift+. (⌘⇧. en un Mac).
	Cambiar tema de la vista previa	Alterna la vista previa entre el tema claro y el oscuro.
	Formatear	Ordena la disposición de tu código.
	Descartar cambios	Descarta todo lo que no hayas guardado.

Salida

El panel que hay debajo del editor tiene tres pestañas:

• Salida muestra lo que tu widget registra con console.log, console.warn y console.error, y cualquier error que lo detenga. Haz clic en Corregir con IA junto a un error para obtener una propuesta de corrección. Otros métodos de console, como console.table, no están disponibles.
• Definiciones de tipos muestra las definiciones de tipos que carga el editor para los paquetes que importas.
• Red muestra cada solicitud que hace tu widget y su respuesta. Haz clic en Crear definiciones de tipos junto a una respuesta para copiar un tipo de TypeScript que la describa.

Borrar registros vacía la pestaña actual. El candado activa y desactiva el desplazamiento automático.

Tu código

• Tu widget es el componente llamado Widget, o la exportación predeterminada del archivo:

  export const Widget = () => {
    // ...
  };

• Escribe TypeScript o JavaScript. Los errores de tipos se subrayan, pero no impiden que tu widget se dibuje ni que se publique.

• Dale estilo con Tailwind CSS. Los únicos colores son foreground y background. Consulta Cómo se ejecutan los widgets.

• Importa desde la biblioteca Blotch con ~lib/, y desde npm con una versión fija. Consulta Usar paquetes npm.