diff --git a/docs/modules/Storage.md b/docs/modules/Storage.md
index 0e295a5d0..40652c8e2 100644
--- a/docs/modules/Storage.md
+++ b/docs/modules/Storage.md
@@ -313,6 +313,44 @@ Here you can find some of the plugins extending the Storage Manager
+## Common use cases
+
+### Init without first load
+
+In case you're using a `remote` storage, you might probably want to skip the initial remote call by loading the project instantly. In that case, you can specify the `projectData` on initialization.
+
+```js
+// Get the data before initializing the editor (eg. printed on server-side).
+const projectData = {...};
+// ...
+grapesjs.init({
+ // ...
+ // If projectData is not defined we might want to load some initial data for the project.
+ projectData: projectData || {
+ pages: [
+ {
+ component: `
+
Initial content
+
+ `
+ }
+ ]
+ },
+ storageManager: {
+ type: 'remote',
+ // ...
+ },
+})
+```
+In case `projectData` is defined, the initial storage load will be automatically skipped.
+
+
+### HTML code in project data
+
+### Inline data
+
+
+
## Events
diff --git a/src/editor/config/config.js b/src/editor/config/config.js
index 538b77bee..926df187c 100644
--- a/src/editor/config/config.js
+++ b/src/editor/config/config.js
@@ -2,15 +2,29 @@ export default {
// Style prefix
stylePrefix: 'gjs-',
- // HTML string or object of components
+ /**
+ * HTML string or object of components
+ * @deprecated Rely on `projectData` option
+ */
components: '',
- // CSS string or object of rules
+ /**
+ * CSS string or object of rules
+ * @deprecated Rely on `projectData` option
+ */
style: '',
- // If true, will fetch HTML and CSS from selected container
+ /**
+ * If true, will fetch HTML and CSS from selected container
+ * @deprecated
+ */
fromElement: 0,
+ /**
+ * Initial project data
+ */
+ projectData: null,
+
// Show an alert before unload the page with unsaved changes
noticeOnUnload: true,
diff --git a/src/editor/model/Editor.js b/src/editor/model/Editor.js
index 68bb376ce..35275aa18 100644
--- a/src/editor/model/Editor.js
+++ b/src/editor/model/Editor.js
@@ -155,7 +155,11 @@ export default class EditorModel extends Model {
// Defer for storage load events.
setTimeout(async () => {
- if (this.get('StorageManager').canAutoload()) {
+ const projectData = this.getConfig('projectData');
+
+ if (projectData) {
+ this.loadData(projectData);
+ } else if (this.get('StorageManager').canAutoload()) {
try {
await this.load();
} catch (error) {