The two methods you need
GrapesJS exposes the current page as strings: editor.getHtml() for
markup and editor.getCss() for styles. Everything else — full
documents, downloads, ZIPs — builds on these two.
1. Read HTML and CSS
const html = editor.getHtml();
const css = editor.getCss();2. Assemble a full document
const doc = `<!doctype html>
<html>
<head><meta charset="utf-8"><style>${css}</style></head>
<body>${html}</body>
</html>`;
// Store `doc`, or render it server-side.3. Show an export modal
// Built-in: opens a modal with the current HTML/CSS for copy-paste.
editor.runCommand('export-template');4. Download a ZIP (index.html + style.css)
import grapesjs from 'grapesjs';
import exportPlugin from 'grapesjs-plugin-export';
const editor = grapesjs.init({
container: '#gjs',
plugins: [exportPlugin],
pluginsOpts: { 'grapesjs-plugin-export': {} },
});
// Trigger the ZIP download:
editor.runCommand('gjs-export-zip');Tip: control what CSS is included
// e.g. include rules even for components not currently on the canvas
const css = editor.getCss({ keepUnusedStyles: true });Tips
Match the export to the destination. For email, inline the CSS (via a tool like juice, or build with the MJML preset) because most clients ignore <style> blocks. For reusable templates, pass getCss({ keepUnusedStyles: true }) so rules for components not currently on the canvas survive. The ZIP export from grapesjs-plugin-export is great for hand-off, but for programmatic publishing read getHtml()/getCss() directly and store them. Whatever the target, sanitise the markup before publishing if the editor was open to untrusted users.
Prerequisites
You need a running GrapesJS editor. Everything below builds on two methods —
editor.getHtml() and editor.getCss() — which return strings
you can store, render, or package.
Control what CSS is included
getCss() accepts options. Keep rules for components not currently on the
canvas (useful for reusable templates), or pass specific component scope:
const css = editor.getCss({ keepUnusedStyles: true });Export for email (inline CSS)
Most email clients ignore <style> blocks, so inline the CSS before
sending — either build with the MJML preset, or run the exported HTML/CSS through an
inliner like juice:
import juice from 'juice';
const inlined = juice(`<style>${editor.getCss()}</style>${editor.getHtml()}`);Download a ZIP
import exportPlugin from 'grapesjs-plugin-export';
const editor = grapesjs.init({ container: '#gjs', plugins: [exportPlugin] });
editor.runCommand('gjs-export-zip'); // index.html + style.cssPersist the export programmatically
For publishing, read the strings directly and POST them to your backend rather than
relying on a download — store html, css, and the full
project so the page both renders fast and re-opens in the editor.
Best practices
Match the export to the destination: inline CSS for email, a full document for standalone pages, separate html/css columns for a CMS. Sanitise exported markup before publishing if the editor was open to untrusted users. Version your stored projects so you can roll back a bad edit.
Next steps
Persist the export to your server with the Storage Manager backend guide, or wrap export into a reusable custom plugin. Browse GrapesJS plugins on GJS.Market.
FAQ
How do I get the HTML and CSS out of GrapesJS?
editor.getHtml() and editor.getCss() return the markup
and styles as strings.
How do I let users download a ZIP?
Add grapesjs-plugin-export and run the
gjs-export-zip command to download an index.html plus style.css.
Does getCss include only used styles?
By default it returns the managed styles for the current page; pass options like
keepUnusedStyles to change that.