Skip to content
EditorStackPlayground

GrapesJS guides

Practical GrapesJS tutorials: React, Next.js and Vue integration, saving projects to a database, custom blocks, Tailwind, S3 uploads, HTML export, email and AI generation. Every code sample on these pages is bundled and run in a headless browser in CI.

  • Generate GrapesJS sections with an LLM, safely

    A server route that asks Claude for an HTML section and an editor button that inserts the result as undoable GrapesJS components. Covers what GrapesJS's parser strips from untrusted model output by default, refusals and truncation. The SDK request path is tested; the model's output quality is not.

    Updated 2026-09-17

  • Upload GrapesJS assets straight to S3 with presigned URLs

    Replace the Asset Manager's default multipart upload with a custom uploadFile that asks your server for a presigned S3 PUT URL and sends the file directly to the bucket. Tested with AWS SDK v3 presigning, a cross-origin CORS preflight and GrapesJS 0.23.5.

    Updated 2026-09-17

  • Custom blocks and component types in GrapesJS, packaged as a plugin

    Build a call-to-action component type with traits, recognition of existing markup and scoped CSS, then expose it as blocks, all inside a typed GrapesJS plugin. Includes the parser detail that breaks the documented isParsedNode example in the default browser parser.

    Updated 2026-09-17

  • Build an email template editor with GrapesJS and MJML

    Set up grapesjs-mjml 1.0.8 on GrapesJS 0.23.5: MJML blocks in the editor, MJML source for storage, compiled table-based HTML for sending, and validation errors you can show. Tested in Chromium, including merge tags and invalid MJML.

    Updated 2026-09-17

  • Export HTML and CSS from GrapesJS: one standalone file per page

    Turn a multi-page GrapesJS project into standalone HTML documents: page-scoped getHtml and getCss, what the output actually contains, how unused CSS is dropped, and a dependency-free download. Tested against GrapesJS 0.23.5 by comparing computed styles inside and outside the editor.

    Updated 2026-09-17

  • GrapesJS in Next.js App Router: load projects on the server, edit on the client

    A Next.js 15 App Router setup for GrapesJS: a server component reads the project, a client component mounts the editor, next/dynamic keeps the editor out of the server HTML. Built with next build and loaded in Chromium, including a control case that changes the usual advice.

    Updated 2026-09-17

  • GrapesJS in React: an editor component that survives StrictMode

    A 45-line React component that mounts GrapesJS once, tears it down cleanly, reports changes to React state and passes React 19 StrictMode's double mount. Tested with GrapesJS 0.23.5 in headless Chromium.

    Updated 2026-09-17

  • Save and load GrapesJS projects in a database with remote storage

    Wire GrapesJS's built-in remote storage to a small HTTP API and a Postgres table: autosave, reload, HTML and CSS stored for the public page, and the 0.23.5 quirk that turns every failed request into a TypeError. Tested against Postgres via PGlite.

    Updated 2026-09-17

  • GrapesJS with Tailwind CSS v4: utilities in the canvas, compiled CSS on export

    Run Tailwind's in-browser compiler inside the GrapesJS canvas so utility classes render while editing, then compile only the CSS a published page uses on the server. Tested with Tailwind 4.1.14 and GrapesJS 0.23.5, including class names with colons and slashes.

    Updated 2026-09-17

  • GrapesJS in Vue 3: a script setup component with clean teardown

    A Vue 3.5 single-file component that mounts GrapesJS, emits ready and change events, keeps the editor out of Vue's deep reactivity and cleans up on unmount. Compiled with Vue's own SFC compiler and tested in Chromium against GrapesJS 0.23.5.

    Updated 2026-09-17