Responsive Pack — Gestor avanzado de dispositivos y puntos de interrupción para GrapesJS

El switch de dispositivos GrapesJS por defecto te indica qué ancho estás editando. No te dice qué se está rompiendo en ese punto de ruptura.

Configura un tamaño de fuente en el móvil. Añade un margen en la tablet. Dos horas después, vuelves al escritorio preguntándote por qué el cabeceo parece incorrecto — sin una forma sencilla de ver qué sobreescritura responsiva lo causó.

Responsive Pack sustituye al gestor de dispositivos GrapesJS de serie por un flujo de trabajo totalmente responsivo diseñado para edición real.

Lo que obtienes

🔴 Indicadores de Anulación Responsiva

Observa exactamente dónde el componente seleccionado tiene estilos específicos de punto de interrupción.

Pequeños indicadores junto a cada dispositivo muestran cuándo un componente tiene sobreescrituras responsivas — para que puedas detectar inmediatamente cambios específicos para móviles, tabletas o escritorios sin tener que rebuscar en CSS.

📱 Vista previa responsiva lado a lado

Previsualiza varios dispositivos simultáneamente.

Compara móvil, tablet y escritorio lado a lado con desplazamiento sincronizado. Rápido:

• Disposiciones rotas

• Espaciamiento inesperado

• Cambios en la tipografía

• Problemas de desbordamiento

• Elementos que aparecen o desaparecen en el punto de interrupción incorrecto

No más cambiar de dispositivo uno a uno.

⚙️ Editor completo de puntos de interrupción

Toma el control total de tus dispositivos responsivos.

Añadir, renombrar, reordenar o eliminar dispositivos y configurar:

• Anchura

• Altura

• min-width

• max-width

• ID de dispositivo

• Nombre del dispositivo

Los cambios se escriben directamente en editor.Devices, manteniendo el plugin completamente integrado con el sistema de dispositivos GrapesJS.

📐 Preajustes de dispositivos

Empieza con tamaños de pantalla reales populares.

Incluye preajustes para:

• iPhone

• iPad

• MacBook

• Dispositivos Android comunes

• Tamaños personalizados de dispositivos

Amplía la lista de predefinidos con tus propios dispositivos siempre que tu proyecto lo requiera.

🖥️ Tramas y orientación de dispositivos

Haz que la vista previa responsiva se sienta como probar un dispositivo real.

Previsualiza páginas dentro de los marcos del dispositivo, alterna entre vertical y paisaje, y redimensiona libremente el lienzo con controles de arrastre.

Construido para proyectos reales de GrapesJS

Responsive Pack es especialmente útil para equipos que construyen editores basados en GrapesJS para usuarios no técnicos.

Porque los usuarios inevitablemente:

Cambia un estilo en móvil y olvídalo.

En lugar de obligarles a entender las consultas multimedia y la herencia CSS, Responsive Pack hace que el estilo responsivo sea visible, comprensible y fácil de depurar.

También es para desarrolladores que han pasado una tarde buscando entre CSS generados solo para descubrir que una sola anulación de punto de ruptura era responsable de todo el problema.

¿Por qué Responsive Pack?

Grapes stock JS:
Elige un dispositivo → edita → cambia de dispositivo → adivina qué ha cambiado.

Paquete Responsivo:
Consulta los puntos de interrupción → identificar anulaciones → comparar dispositivos → solucionar el problema.

El diseño responsivo no debería requerir rebuscar en CSS.

Compatibilidad

• GrapesJS: 0,19 – 0,23

• Funciona con el gestor de dispositivos nativo GrapesJS

• Los estilos responsivos siguen siendo los estilos estándar de GrapesJS

• No hay sistema propietario de puntos de interrupción

Compra una vez. Sigue actualizando.

Una compra incluye todas las actualizaciones futuras.

Creado para desarrolladores y equipos que envían editores GrapesJS responsivos de calidad producción.