Resizing

Resizing changes the size of the open page, for example from a square Instagram post to a tall Instagram story. The user picks a ready-made size or types a size in pixels, and chooses what happens to the elements on the page.

SetupCopy Anchor Link

Resizing works with no setup. Select nothing on the page, and press Resize canvas in the toolbar above the page. In the compact layout, the tool is Resize in the dock.

import { ImageEditor } from '@layermetry/media-editor/react';

export default function App() {
  return (
    <div style={{ position: 'fixed', inset: 0 }}>
      <ImageEditor
        licenseKey="YOUR_LICENSE_KEY"
        onExport={(file) => console.log(`Exported ${file.name}`)}
        onClose={() => console.log('The editor was closed')}
      />
    </div>
  );
}

View full size

The panel shows the current size and shape of the page, for example "1080 x 1080 px" and "1:1 (Square)". Press Apply Resize to change the page.

Size presetsCopy Anchor Link

Under Predefined Sizes (Optional), a click selects a size. A second click on the same size clears the choice.

View full size

Custom sizesCopy Anchor Link

Under Custom Size, type a width and a height in pixels. The editor rounds a number with decimals up to the next whole pixel.

Apply Resize works when both values are above zero and differ from the current size.

The largest file that PNG and JPEG export can create is 6000 × 4000 pixels. See Export.

Resize modesCopy Anchor Link

Outside portions are excluded from the export. Select an item to edit its dimmed outside portion, or use edge markers and Move into canvas to recover an item completely outside. See Canvas editing.

Resize Mode decides what happens to the elements on the page:

With Scale, the Fitting Mode decides how pictures fill the new page:

What's the difference? next to Fitting Mode explains the modes with pictures. Stretch shows a warning, because it distorts pictures.

The background always fills the new page. Each page has its own size, so resizing changes the open page only.

ConfigurationCopy Anchor Link

Resizing has no props. To offer other sizes, users type them under Custom Size.

EventsCopy Anchor Link

Resizing has no events. The new size reaches you in the exported file: its width and height in pixels. See Export.

TroubleshootingCopy Anchor Link

Additional resourcesCopy Anchor Link