Crea interfaces LVGL arrastrando y soltando, directamente en tu navegador.
Cómo funciona PicoPixel
PicoPixel transforma el desarrollo LVGL de un proceso centrado en código a un flujo de trabajo visual de arrastrar y soltar. Ve de un lienzo en blanco a una interfaz embebida lista para producción en minutos — diseña visualmente, previsualiza con un simulador LVGL en vivo y exporta código C limpio. No necesitas instalar nada.
¡Empieza ya. Es gratis!Del diseño al dispositivo en 6 pasos
Diseña tu interfaz
Abre PicoPixel en tu navegador — sin descargas, sin instalación. Arrastra widgets LVGL desde la paleta a un lienzo con precisión de píxeles y ajusta su aspecto desde el editor.
- •Botones, etiquetas, deslizadores, interruptores, arcos, gráficos, desplegables, selectores de rueda, casillas de verificación, áreas de texto, vistas de pestañas, contenedores e imágenes
- •Establece la resolución de pantalla objetivo para que coincida con tu hardware
- •Configura colores, bordes, espaciado interior, fuentes, opacidad, degradados y sombras
- •Usa herramientas de alineación y distribución para posicionar widgets con precisión
- •Organiza pantallas y capas para interfaces multipágina
Conecta las interacciones
Usa el Editor visual de Eventos para conectar acciones de widgets sin escribir una sola línea de código C. PicoPixel genera los callbacks de eventos LVGL automáticamente.
- •Pulsar botón → navegar a otra pantalla
- •Cambio de valor del deslizador → actualizar una etiqueta
- •Alternar casilla de verificación → mostrar u ocultar un panel
- •Selección de desplegable → cambiar un estilo o activar una acción
- •Arrastra acciones sobre widgets — sin tener que escribir callbacks
Previsualiza en el simulador en vivo
PicoPixel compila LVGL a WebAssembly y lo ejecuta directamente en tu navegador. La previsualización es el motor de renderizado LVGL real — no una maqueta.
- •Ve exactamente cómo se renderiza tu interfaz en hardware
- •Prueba interacciones táctiles, desplazamiento y animaciones
- •Los indicadores de interacción señalan qué elementos se pueden tocar o desplazar
- •Comparte un enlace del simulador con tu equipo o cliente — sin necesidad de entorno de desarrollo
Exporta código listo para producción
Descarga los archivos fuente de tu interfaz en código C de LVGL. Solo utilizan llamadas estándar a la API de LVGL, sin dependencias propietarias, por lo que puedes añadirlos a cualquier proyecto compatible.
- •Definiciones de widgets y código de diseño
- •Declaraciones de estilo
- •Enlaces de manejadores de eventos
- •Referencias de fuentes y recursos de imágenes
- •API estándar LVGL 8.x — sin biblioteca de tiempo de ejecución de PicoPixel
Integra y flashea
Agrega los archivos exportados a tu proyecto ESP-IDF, Arduino o PlatformIO. Compila, flashea, y la interfaz en tu dispositivo coincide con el simulador píxel por píxel.
- •Funciona con ESP32, STM32, Arduino, Raspberry Pi Pico y cualquier plataforma compatible con LVGL
- •Incluye el archivo de cabecera de la interfaz y llama a ui_init() después de configurar el controlador de pantalla
- •En la mayoría de las configuraciones no hace falta modificar el sistema de compilación
- •O entrega el zip a un asistente de programación con IA y deja que maneje la integración
Colabora e itera
Invita a miembros del equipo a tu proyecto. Todos editan el mismo lienzo en tiempo real. Usa el control de versiones integrado para seguir los cambios y revertir cuando sea necesario.
- •Edición colaborativa en tiempo real — cursores en vivo, comentarios, anotaciones
- •Control de versiones integrado con historial detallado de sesiones
- •Revierte a cualquier estado anterior y compara versiones
- •Comparte enlaces del simulador para que clientes y colaboradores revisen tu trabajo
¿Por qué arrastrar y soltar para LVGL?
Construir interfaces embebidas con LVGL tradicionalmente significa escribir código C línea por línea — posicionando widgets con coordenadas de píxeles, aplicando estilos mediante llamadas a funciones y recompilando después de cada cambio. Funciona, pero tardas en ver el resultado de cada cambio y cuesta imaginar la interfaz a partir del código.
El enfoque de arrastrar y soltar de PicoPixel reemplaza ese ciclo con un editor visual donde ves el resultado al instante. Arrastra un botón al lienzo, redimensiónalo, cambia su color, agrega una etiqueta — y el simulador LVGL en vivo muestra exactamente cómo se verá en tu dispositivo. Cuando termines, exporta código C limpio que compila en ESP32, STM32, Arduino y cualquier plataforma compatible con LVGL.
El flujo de trabajo visual es más rápido para el prototipado, más fácil para equipos (diseñadores e ingenieros pueden colaborar en tiempo real) y produce el mismo código LVGL listo para producción que escribirías a mano. Ve todas las características de PicoPixel o lee la comparación detallada con otros editores LVGL.
Preguntas frecuentes
¿Necesito instalar algo para usar PicoPixel?
No. PicoPixel funciona completamente en tu navegador. Abre la URL del editor, inicia sesión y comienza a diseñar. No hay aplicación de escritorio, ni complemento, ni SDK que instalar.
¿Qué widgets LVGL puedo usar en el editor?
PicoPixel soporta el conjunto principal de widgets LVGL incluyendo botones, etiquetas, deslizadores, interruptores, desplegables, selectores de rueda, arcos, barras, gráficos, imágenes, casillas de verificación, áreas de texto, vistas de pestañas, contenedores y más. Estamos agregando continuamente soporte para widgets adicionales.
¿Qué tan preciso es el simulador en vivo?
El simulador ejecuta el motor de renderizado LVGL real compilado a WebAssembly — no es una maqueta ni una aproximación CSS. Lo que ves en la previsualización coincide con tu dispositivo píxel por píxel.
¿Qué formato usa el código exportado?
PicoPixel exporta un archivo zip que contiene código C de LVGL limpio y legible (archivos .c y .h). La salida incluye creación de widgets, estilos, diseño y configuración de manejadores de eventos — todo usando llamadas estándar a la API de LVGL sin dependencias propietarias.
¿Puedo usar el código exportado con ESP-IDF, Arduino o PlatformIO?
Sí. El código exportado usa llamadas estándar a la API de LVGL, por lo que funciona con cualquier sistema de compilación que soporte LVGL — incluyendo ESP-IDF, Arduino IDE y PlatformIO. Solo agrega los archivos a tu proyecto y llama a ui_init() después de configurar tu controlador de pantalla. Para detalles específicos de cada plataforma, consulta nuestra guía de ESP32.
¿PicoPixel es gratuito?
Sí. PicoPixel es gratuito para uso personal y de aficionados — sin tarjeta de crédito. El uso comercial empieza desde 17 $/mes (204 $/año). Siempre habrá un plan gratuito con amplias posibilidades.
Comienza a construir tu interfaz LVGL gratis
Diseña interfaces embebidas visualmente, previsualiza en un simulador LVGL en vivo y exporta código C listo para producción. Sin instalación. Sin tarjeta de crédito. Abre PicoPixel en tu navegador y empieza a diseñar.
¡Empieza ya. Es gratis!