Los componentes de código amplían las posibilidades, y en toda la comunidad de Webflow, los desarrolladores están creando todo tipo de experiencias creativas con ellos.
Desde visualizaciones 3D hasta gráficos adaptables, estos proyectos demuestran cómo React lleva a Webflow más allá de sus límites. A continuación, daremos un vistazo rápido a qué son los componentes de código y destacaremos algunos ejemplos iniciales de la comunidad que pueden ayudarte a despertar ideas para tus propios proyectos.
¿Qué son los componentes de código?
Los componentes de código son componentes de React que se pueden usar en el lienzo de Webflow. Permiten aprovechar bibliotecas de React existentes o incorporar elementos de interfaz avanzados en tu sitio de Webflow (piensa en integraciones de datos, lógica avanzada o interactividad compleja).
Con DevLink, puedes importar componentes de código desde cualquier base de código externa a Webflow e instalarlos en tus sitios. Los diseñadores y especialistas en marketing pueden arrastrarlos y soltarlos en el lienzo, además de editar propiedades y espacios con contenido dinámico como parte de su flujo de trabajo habitual en Webflow.
Con los componentes de código, una página puede hacer cosas como validar un formulario en tiempo real, filtrar una lista de productos, recordar las preferencias del usuario o extraer datos del lado del cliente desde una API.
¿Te perdiste el anuncio de la conferencia de Webflow? Míralo aquí!
Cómo nuestra comunidad está usando los componentes de código
Desde el lanzamiento de esta función, hemos visto a la comunidad crear componentes de código de formas divertidas y, a veces, inesperadas. Los desarrolladores están experimentando con:
- Contenido multimedia e interactividad integrados
- Efectos 3D y diseño moderno
- Visualizaciones de datos impulsadas por el CMS
- Incorporación de componentes de interfaz existentes desde sistemas de diseño
Estos son solo algunos de los muchos ejemplos que los desarrolladores han compartido, pero ejemplifican el verdadero poder de los componentes de código para lograr interactividad personalizada, diseños ricos en contenido y más. Echemos un vistazo a algunos ejemplos para verlos en acción y cómo funcionan por dentro.
Reproductor de audio
Nuestro primer ejemplo es un componente de código de reproductor de audio creado por Michael Wells, con diseño y música de Xfiner.
El componente renderiza un elemento de lienzo que muestra una forma de onda de un archivo de audio e indicadores de progreso visuales a medida que los usuarios controlan la reproducción. Cuando los usuarios configuran el archivo de audio, el componente expone una propiedad para que pueda cargarse desde varias fuentes, incluidas URL externas y recursos de Webflow. Otra característica destacable es que el componente puede gestionar el estado de reproducción en múltiples instancias. Puedes presionar el botón de reproducción en un reproductor y luego en otro, lo que pausará automáticamente el primero. Esto es posible porque el componente gestiona las instancias y las funciones de devolución de llamada en un estado global compartido.
Nos gusta este ejemplo porque funciona en muchísimos casos de uso, desde páginas de destino de podcasts hasta portafolios de músicos. El componente ofrece señales visuales claras y una forma sencilla de configurar la fuente del archivo de audio y el estilo mediante variables de estilo.
Explora más a fondo este caso de uso:
Sistema de partículas interactivo en 3D
Otro componente que nos entusiasmó ver es el componente de código de sistema de partículas 3D creado por Frederico Leonardo.
Este componente también renderiza un elemento canvas y utiliza un contexto WebGL (Web Graphics Library) para dibujar cientos de partículas que reaccionan al movimiento del ratón. El renderizado con WebGL mantiene un rendimiento fluido a medida que aumenta el número de partículas en pantalla. El componente cuenta con varias propiedades configurables, como la cantidad de partículas, los valores hexadecimales para los colores de relleno y la velocidad de animación.
Este es un excelente ejemplo de hasta dónde puedes llevar las visualizaciones personalizadas dentro del canvas, simplificando al mismo tiempo la configuración para los usuarios que integran el componente en Webflow.
Explora más a fondo este caso de uso:
Echa un vistazo a otros componentes de código que ha creado Frederico y cómo utiliza Claude Skills con Claude Code y nuestro servidor MCP de Webflow para acelerar el desarrollo de componentes.
Gráficos adaptables e informes meteorológicos
Ahora, exploremos un componente de gráfico adaptable impulsado por una popular biblioteca de JavaScript, Chart.js, creado por Riziki Nielsen.
Nos gusta este componente porque Riziki explica lo sencillo que es usar herramientas como Claude Code y una biblioteca externa de React muy utilizada para crear rápidamente un gráfico altamente configurable y adaptable desde el primer momento. El componente expone múltiples propiedades, desde datos y etiquetas hasta colores. Para los colores, el componente lee las variables del sitio para un estilo dinámico. El gráfico también acepta datos como JSON serializado, lo que demuestra cómo pasar estructuras de datos complejas a través de propiedades.
En este tutorial, Riziki también muestra cómo creó un widget de resumen meteorológico basado en datos del CMS. Utilizado en una lista de colección, el componente extrae datos meteorológicos actuales según una propiedad de nombre de ciudad vinculada a un campo de elemento de colección. Los datos dinámicos muestran entonces la temperatura, los niveles de humedad, el viento, etc., todo en el canvas.
Desde propiedades simples hasta estructuras de datos complejas, este ejemplo muestra el abanico de posibilidades que ofrecen las visualizaciones personalizadas.
Explora más a fondo este caso de uso:
Patrones emergentes
Los ejemplos anteriores, junto con otros muchos de la comunidad, revelan patrones emergentes en la forma en que los desarrolladores crean componentes de código para Webflow:
- Las composiciones basadas en slots de componentes ofrecen a los diseñadores la flexibilidad de combinar contenido de Webflow con componentes interactivos de React.
- Las integraciones de bibliotecas externas inyectadas como código personalizado en sitios de Webflow no son una solución nueva, pero los componentes de código ofrecen a los desarrolladores una nueva vía para crear soluciones de interfaz personalizadas con bibliotecas web y de React populares. Esto es posible sin exponer el código a usuarios menos técnicos que crean páginas en Webflow.
- Sistemas de interfaz reutilizables donde los desarrolladores empaquetan sus componentes de sistemas de diseño pulidos y listos para producción para llevarlos a Webflow.
- Las plantillas y herramientas evolucionan rápidamente para ayudar a acelerar el desarrollo de componentes de código o proporcionar estructuras que sirvan de punto de partida a otros desarrolladores.
¡Nos entusiasma ver todos los componentes creativos que están construyendo los desarrolladores! Webflow sigue invirtiendo en la extensibilidad para desarrolladores, y la comunidad está ayudando a dar forma a ese futuro mediante la experimentación y el aprendizaje compartido.
Llega más lejos con los componentes de código
¿Te han inspirado algunos de los ejemplos anteriores? Empieza a crear tus propios componentes de código consultando nuestra documentación para desarrolladores. Además, sigue nuestro tutorial de iniciación, donde explicamos cómo crear un cañón de confeti en React para añadirlo a tus sitios de Webflow.
Una vez que hayas creado un componente de código, compártelo con la comunidad en nuestro Foro. ¡Estamos deseando ver lo que creas!
Webflow Enterprise
Con la confianza de más de 300 000 de las marcas líderes del mundo, Webflow Enterprise permite a tu equipo crear, gestionar y optimizar sitios web sofisticados a gran escala de forma visual, todo ello respaldado por una seguridad de nivel empresarial.
