Webpage Preset

grapesjs-preset-webpage is the official starting configuration behind the GrapesJS demo page. It wires up the pieces a general-purpose site builder needs — code import, device switching and a canvas reset — so you do not have to assemble them yourself.

Commands

• gjs-open-import-webpage — opens a modal where a user can paste HTML and CSS to load into the canvas.
• set-device-desktop, set-device-tablet and set-device-mobile — switch the canvas between the three responsive breakpoints.
• canvas-clear — remove every component and style from the canvas, behind a confirmation prompt.

Blocks

Three starter blocks are added: link-block, quote and text-basic. Use the blocks option to register a subset, or block to extend any of them by id.

Configuration

The import modal is customisable through modalImportTitle, modalImportButton, modalImportLabel and modalImportContent — the last of which accepts a function, so you can pre-fill the modal with the current page markup. importViewerOptions passes options to the code viewer, showStylesOnChange opens the Style Manager whenever the selection changes, and useCustomTheme toggles the preset's own theme.

Good to know

From v1 the preset no longer bundles other plugins — add block, form or export plugins to your project separately. BSD-3-Clause.