Browse by category
GrapesJS Storages
GrapesJS storage plugins connect your editor's save and load system to external backends. Instead of relying only on local storage, these plugins let you persist designs to REST APIs, WebSockets, databases, or cloud services. Browse free and premium GrapesJS storage integrations — each listing includes API documentation and compatibility notes for different GrapesJS versions.
About GrapesJS Storages
GrapesJS has a built-in storage system that automatically saves and loads editor content, but by default it only writes to the browser's local storage — meaning designs are tied to a single device and browser session. GrapesJS storage plugins on GJS.Market replace or extend this with backend-connected persistence layers. REST API storage plugins are the most common: they implement the GrapesJS StorageManager interface to POST editor content as JSON to your server endpoint on save and GET the stored JSON on load. More advanced plugins add conflict resolution for multi-user editing, versioning with a history sidebar, and draft and publish workflows. Cloud-native storage plugins connect directly to Firebase Firestore, Supabase, or PocketBase without requiring a custom API layer — you provide your credentials and the plugin handles all read and write operations. All storage plugins on GJS.Market document their required server response format and include example backend implementations in Node.js, PHP, and Python.
GrapesJS Storages — FAQ
- How does GrapesJS save editor content?
- The StorageManager serialises the project — components, styles, pages and assets — into a single JSON object and hands it to the active storage. By default that storage is the browser's localStorage, so the work never leaves the device. Autosave is on by default and fires after a set number of changes, controlled by stepsBeforeSave.
- How do I save GrapesJS content to my own API?
- Set storageManager.type to remote and configure the load and store endpoints. GrapesJS then POSTs the project JSON on save and GETs it on load; headers and credentials go in the same options block. For anything beyond plain REST, register a custom storage with Storage.add and implement load and store yourself.
- What is the difference between the project JSON and the exported HTML?
- The project JSON is the editable source: it carries the component model, so reloading it restores a fully editable page. getHtml and getCss produce the published output, which cannot be turned back into components reliably. Store both — the JSON for editing, the HTML/CSS for serving — and never treat the export as your source of truth.
- Can I disable autosave in GrapesJS?
- Yes. Set storageManager.autosave to false and trigger saving yourself with editor.store(), typically from a Save button or a publish command. This is the right setup when saves are expensive or need validation first. You can also raise stepsBeforeSave to keep autosave but make it less chatty.
- Does GrapesJS support versioning or multi-user editing?
- Not in the core — it stores one current state per project and the last write wins. Plugins in this category add version history with a restore sidebar, draft and publish workflows, and conflict resolution for concurrent editors. If several people will edit the same page, pick a plugin that states its conflict strategy rather than relying on plain remote storage.
Browse by tag