Full Size

Project types	webemail
Plan	Startup plan

Enable full-size device in the editor canvas, independent of your screen size. Perfect for designing large templates seamlessly.

Install the Studio SDK plugins package:

npm

npm i @grapesjs/studio-sdk-plugins

pnpm

pnpm add @grapesjs/studio-sdk-plugins

yarn

yarn add @grapesjs/studio-sdk-plugins

CDN

// It's recommended to replace the `latest` tag with the specific latest version to avoid any potential breaking changes.
// The loaded plugin is globally available via `globalThis.StudioSdkPlugins_canvasFullSize`.
"https://unpkg.com/@grapesjs/studio-sdk-plugins@latest/dist/canvasFullSize/index.umd.js"

Import and use the plugin in your project:

React

import StudioEditor from '@grapesjs/studio-sdk/react';
import '@grapesjs/studio-sdk/style';
import { canvasFullSize } from '@grapesjs/studio-sdk-plugins';
// ...
<StudioEditor
  options={{
      // ...
      plugins: [
        canvasFullSize
      ],
  }}
/>

JS

import createStudioEditor from '@grapesjs/studio-sdk';
import '@grapesjs/studio-sdk/style';
import { canvasFullSize } from '@grapesjs/studio-sdk-plugins';
// ...
createStudioEditor({
    // ...
    plugins: [
      canvasFullSize
    ],
})

🍇 Demo

Plugin options

Property	Type	Description
licenseKey	string	The license key for the plugin. This is optional, only required if the plugin is used outside of Studio SDK. Example "your-license-key"
deviceMaxWidth	number	Default max width for the devices. Default 1200
deviceMinHeigth	number	Default min height for the devices. Default 500
deviceFixedHeight	boolean	This option disables scrollable canvas area and keeps the iframe's height fixed. Default false
canvasOffsetY	number	Offset for the canvas on the Y axis (margin between the canvas and content frame). Default 30
canvasOffsetX	number	Offset for the canvas on the X axis (margin between the canvas and content frame). Default 50
canvasTransition	number	Transition time for the canvas when the screen size changes (in seconds). Default 0.3
frameBorderRadius	number	Border radius for the content frame (in px). Default 5
frameTransition	number	Transition time for the content frame when the device changes (in seconds). Default 0.3