GrapesJS stays the source of truth
Breakpoints are real GrapesJS devices. Uninstall the plugin and you keep plain
@media blocks — there is nothing to migrate off.
Commercial plugin · GrapesJS 0.19 – 0.23 · Studio ready
Stop guessing which breakpoint you styled.
GrapesJS ships three fixed devices you cannot rename, reorder or add to — and no indication of where a style actually came from. This replaces that with a real breakpoint manager, and lights a dot on every breakpoint that overrides the element you have selected.
base — no media query
What the stock device manager doesn't do
Everything below is a real limitation of the built-in picker, not a strawman.
- No CRUD Three devices, hard-coded. No add, no rename, no delete, no reorder — and no UI to reach them.
- Blind styling Nothing tells you an element was already restyled at another width, so you find out by resizing.
- Width is the query Canvas width and media-query width are welded together, so you cannot preview at 390px while the query stays at 430px.
- One width at a time Checking a change across breakpoints means clicking through them and remembering what you saw.
How it works
It is a layer over editor.Devices, not a replacement for it. Nothing
proprietary reaches your CSS.
Canvas width ≠ media width
width drives the canvas, widthMedia drives the query. Preview
at 375px while the breakpoint stays at 480px.
The dots read your real CSS
Override detection walks the rule graph and resolves each rule's device, so it works
with min-width and max-width alike.
It mounts itself, wherever it lands
In classic GrapesJS the toolbar docks into the device panel, exactly where the stock
picker was. In Studio — which has no such panel — it becomes a floating bar over the
canvas. Same plugin, no configuration. Set mount: 'none' and drive the
ten registered commands from your own chrome instead.
Verified, not asserted
The compatibility page boots GrapesJS 0.19, 0.21 and 0.23 in your browser and runs the plugin against each one.
What you get
Breakpoint manager
Add, rename, duplicate, delete and drag-reorder. Width, height and media width are all editable per breakpoint.
15 device presets
Apple, Android and generic sizes, grouped in the picker. Extend or replace the list entirely.
Override indicators
An amber dot on every breakpoint that restyles the current selection. The feature the stock picker is missing most.
Side-by-side preview
Every breakpoint rendered at once from the same export, with synchronised scrolling and live updates.
Device bezel & rotate
A CSS bezel around the canvas, clipped to the viewport, and one click to swap portrait for landscape.
Free-width drag
Drag the canvas edge to any width without creating a breakpoint or a stray media query.
Fully translatable
Every string is an i18n key — no English is baked into the UI.
Keyboard & screen readers
Roving tabindex, arrow-key navigation, aria-pressed state and labelled icon buttons throughout.
Options
Every option has a working default; pass only what you want to change.
| Option | Type | Default | What it does |
|---|---|---|---|
breakpoints | Breakpoint[] | 3 defaults | The breakpoint set seeded into editor.Devices. |
presets | DevicePreset[] | 15 devices | Presets offered in the manager's picker. |
mount | 'auto' | 'panel' | 'floating' | 'none' | selector | 'auto' | Where the toolbar goes. 'auto' docks in classic, floats in Studio. |
mediaCondition | 'max-width' | 'min-width' | 'max-width' | Matches your GrapesJS setting; affects how queries are read. |
frames | boolean | true | Draw the device bezel around the canvas. |
sideBySide | boolean | true | Multi-width preview button. |
overrideIndicator | boolean | true | The amber override dots. |
rotate | boolean | true | Portrait/landscape swap button. |
freeResize | boolean | true | Draggable canvas edge. |
hideDefaultDeviceSelector | boolean | true | Hide the stock picker. Scoped to your editor only. |
showLabels | boolean | 'auto' | 'auto' | Text labels beside icons; 'auto' shows them only when docked. |
zIndex | number | 60 | Stacking order for the toolbar and canvas overlays. |
prefix | string | 'gjs-bp-' | Namespace for CSS classes, command ids and events. |
i18n | object | English | Every user-facing string. |
See it running
All three are live, with no backend behind them.
Ready to ship responsive faster?
Full source and a production build, a commercial licence for client work, and updates for the life of the product.