El editor visual de arrastrar y soltar para LVGL.
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 UI embebida lista para producción en minutos — diseña visualmente, previsualiza con un simulador LVGL en vivo y exporta C code limpio. Sin instalación necesaria.
¡Comienza 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 estilízalos visualmente.
- • Botones, etiquetas, deslizadores, interruptores, arcos, gráficos, desplegables, ruedas, 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, relleno, 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 code. 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 código de callback requerido
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 UI en hardware
- • Prueba interacciones táctiles, desplazamiento y animaciones
- • Las capas de interacción muestran lo que se puede tocar y 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 tu proyecto como archivos fuente LVGL C limpios. La salida usa llamadas estándar a la API de LVGL sin dependencias propietarias — agrégalo a cualquier proyecto LVGL.
- • 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 UI 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 encabezado UI y llama a ui_init() después de configurar el controlador de pantalla
- • Sin cambios en el sistema de compilación necesarios para la mayoría de las configuraciones
- • O entrega el zip a un asistente de código AI 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 rastrear cambios y revertir cuando sea necesario.
- • Edición colaborativa en tiempo real — cursores en vivo, comentarios, anotaciones
- • Control de versiones integrado con historial granular de sesiones
- • Revierte a cualquier estado anterior y compara versiones
- • Comparte enlaces del simulador para revisiones de interesados
¿Por qué arrastrar y soltar para LVGL?
Construir interfaces embebidas con LVGL tradicionalmente significa escribir C code 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 el ciclo de retroalimentación es lento y el código es difícil de visualizar.
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 hardware objetivo. Cuando termines, exporta C code 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 de calidad de 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, ruedas, 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 hardware objetivo píxel por píxel.
¿Qué formato usa el código exportado?
PicoPixel exporta un archivo zip que contiene C code 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 — incluso para proyectos comerciales. No se requiere tarjeta de crédito. A medida que la plataforma crezca y más usuarios se unan, podrían introducirse planes de pago para cubrir costos de almacenamiento y servicio. Siempre habrá un nivel gratuito.
Diseña tu primera interfaz LVGL — gratis
Abre PicoPixel en tu navegador, arrastra y suelta widgets LVGL en el lienzo y exporta C code listo para producción en minutos. Sin instalación. Sin tarjeta de crédito.
¡Comienza gratis!Gratis — incluso para proyectos comerciales. Leer las preguntas frecuentes · Contáctanos