Issue #1741Opened January 23, 2019by ateebahmed1 reactions

[QUESTION]: Can't render GrapesJS HTML/CSS when viewing page on frontend v0.14.50

Question

I have built a page and want to render it on frontend, the strategy I have implemented is to save my HTML and JSON style object and on frontend passing both of them. Then I initialize GrapesJS and set its style to the JSON I got from DB, then getting the CSS from that object.

when rendering editor

var editor = grapesjs.init({
// ... configurations
})
editor.setStyle(JSON.parse([json array from db]))
editor.setComponent([HTML text of page from db])

when rendering frontend

var editor = grapesjs.init({
// ... configurations
})
editor.setStyle(JSON.parse([json array from db]))
var styles = editor.getCss()
// create style element
// put styles in style.innerHTML
//append style to body or head

I did the same thing when using editor with CMS and it works great, but somehow I can't load the full CSS from JSON on frontend.

If I'm doing it wrong then please correct me.

Thanks

This is how it should look like and showing when using editor, It renders correct CSS on browser I have used editor on but results are different if I try to use incognito

screenshot 2019-01-23 at 5 48 35 am

This is what I'm getting screenshot 2019-01-23 at 5 53 00 am

This is my JSON being saved which I get by getStyle and use it with setStyle

[{
  "selectors": [],
  "selectorsAdd": "",
  "style": {},
  "mediaText": "",
  "state": "",
  "stylable": true,
  "atRuleType": "",
  "singleAtRule": 0,
  "important": 0
}, {
  "selectors": [],
  "selectorsAdd": "*",
  "style": {
    "box-sizing": "border-box"
  },
  "mediaText": "",
  "state": "",
  "stylable": true,
  "atRuleType": "",
  "singleAtRule": 0,
  "important": 0
}, {
  "selectors": [],
  "selectorsAdd": "body",
  "style": {
    "margin": "0"
  },
  "mediaText": "",
  "state": "",
  "stylable": true,
  "atRuleType": "",
  "singleAtRule": 0,
  "important": 0
}, {
  "selectors": [{
    "name": "row",
    "label": "row",
    "type": 1,
    "active": true,
    "private": 1,
    "protected": false
  }],
  "selectorsAdd": "",
  "style": {
    "display": "flex",
    "justify-content": "flex-start",
    "align-items": "stretch",
    "flex-wrap": "nowrap",
    "padding": "10px"
  },
  "mediaText": "",
  "state": "",
  "stylable": true,
  "atRuleType": "",
  "singleAtRule": 0,
  "important": 0
}, {
  "selectors": [{
    "name": "cell",
    "label": "cell",
    "type": 1,
    "active": true,
    "private": 1,
    "protected": false
  }],
  "selectorsAdd": "",
  "style": {
    "min-height": "75px",
    "flex-grow": "1",
    "flex-basis": "100%"
  },
  "mediaText": "",
  "state": "",
  "stylable": true,
  "atRuleType": "",
  "singleAtRule": 0,
  "important": 0
}, {
  "selectors": [{
    "name": "c2645",
    "label": "c2645",
    "type": 1,
    "active": true,
    "private": false,
    "protected": false
  }],
  "selectorsAdd": "",
  "style": {
    "padding": "10px",
    "font-size": "36px",
    "text-align": "center",
    "color": "#ffffff",
    "font-family": "Arial, Helvetica, sans-serif",
    "font-weight": "400"
  },
  "mediaText": "",
  "state": "",
  "stylable": true,
  "atRuleType": "",
  "singleAtRule": 0,
  "important": 0
}, {
  "selectors": [{
    "name": "i9gw",
    "label": "i9gw",
    "type": 2,
    "active": true,
    "private": false,
    "protected": false
  }],
  "selectorsAdd": "",
  "style": {
    "background-color": "rgba(247, 136, 47, 1)",
    "padding": "10px 35px 10px 35px"
  },
  "mediaText": "",
  "state": "",
  "stylable": true,
  "atRuleType": "",
  "singleAtRule": 0,
  "important": 0
}, {
  "selectors": [{
    "name": "is35k",
    "label": "is35k",
    "type": 2,
    "active": true,
    "private": false,
    "protected": false
  }],
  "selectorsAdd": "",
  "style": {
    "padding": "10px 10px 10px 10px",
    "color": "#ffffff",
    "font-family": "Arial, Helvetica, sans-serif",
    "font-size": "16px",
    "text-align": "justify"
  },
  "mediaText": "",
  "state": "",
  "stylable": true,
  "atRuleType": "",
  "singleAtRule": 0,
  "important": 0
}, {
  "selectors": [{
    "name": "ixx6b",
    "label": "ixx6b",
    "type": 2,
    "active": true,
    "private": false,
    "protected": false
  }],
  "selectorsAdd": "",
  "style": {
    "padding": "10px 35px 10px 35px",
    "background-color": "#FF9C43"
  },
  "mediaText": "",
  "state": "",
  "stylable": true,
  "atRuleType": "",
  "singleAtRule": 0,
  "important": 0
}, {
  "selectors": [{
    "name": "ieqt4",
    "label": "ieqt4",
    "type": 2,
    "active": true,
    "private": false,
    "protected": false
  }],
  "selectorsAdd": "",
  "style": {
    "padding": "10px",
    "font-size": "36px",
    "color": "#ffffff",
    "font-family": "Arial, Helvetica, sans-serif",
    "text-align": "center"
  },
  "mediaText": "",
  "state": "",
  "stylable": true,
  "atRuleType": "",
  "singleAtRule": 0,
  "important": 0
}, {
  "selectors": [{
    "name": "izj0n",
    "label": "izj0n",
    "type": 2,
    "active": true,
    "private": false,
    "protected": false
  }],
  "selectorsAdd": "",
  "style": {
    "padding": "10px",
    "font-family": "Arial, Helvetica, sans-serif",
    "font-size": "20px",
    "color": "#ffffff",
    "text-align": "center",
    "font-weight": "700"
  },
  "mediaText": "",
  "state": "",
  "stylable": true,
  "atRuleType": "",
  "singleAtRule": 0,
  "important": 0
}, {
  "selectors": [{
    "name": "ir9zk",
    "label": "ir9zk",
    "type": 2,
    "active": true,
    "private": false,
    "protected": false
  }],
  "selectorsAdd": "",
  "style": {
    "display": "inline-block",
    "padding": "5px",
    "min-height": "50px",
    "min-width": "50px",
    "text-decoration": "none"
  },
  "mediaText": "",
  "state": "",
  "stylable": true,
  "atRuleType": "",
  "singleAtRule": 0,
  "important": 0
}, {
  "selectors": [{
    "name": "iihgl",
    "label": "iihgl",
    "type": 2,
    "active": true,
    "private": false,
    "protected": false
  }],
  "selectorsAdd": "",
  "style": {
    "text-align": "center"
  },
  "mediaText": "",
  "state": "",
  "stylable": true,
  "atRuleType": "",
  "singleAtRule": 0,
  "important": 0
}, {
  "selectors": [{
    "name": "material-icons",
    "label": "material-icons",
    "type": 1,
    "active": true,
    "private": false,
    "protected": false
  }],
  "selectorsAdd": "",
  "style": {
    "font-size": "60px",
    "color": "#ffffff",
    "text-align": "center"
  },
  "mediaText": "",
  "state": "",
  "stylable": true,
  "atRuleType": "",
  "singleAtRule": 0,
  "important": 0
}, {
  "selectors": [{
    "name": "material-icons",
    "label": "material-icons",
    "type": 1,
    "active": true,
    "private": false,
    "protected": false
  }, {
    "name": "md-60",
    "label": "md-60",
    "type": 1,
    "active": true,
    "private": false,
    "protected": false
  }],
  "selectorsAdd": "",
  "style": {
    "color": "#ffffff",
    "text-align": "center"
  },
  "mediaText": "",
  "state": "",
  "stylable": true,
  "atRuleType": "",
  "singleAtRule": 0,
  "important": 0
}, {
  "selectors": [{
    "name": "isq9c",
    "label": "isq9c",
    "type": 2,
    "active": true,
    "private": false,
    "protected": false
  }],
  "selectorsAdd": "",
  "style": {
    "padding": "10px",
    "font-family": "Arial, Helvetica, sans-serif",
    "font-size": "24px",
    "color": "#ffffff",
    "text-align": "center"
  },
  "mediaText": "",
  "state": "",
  "stylable": true,
  "atRuleType": "",
  "singleAtRule": 0,
  "important": 0
}, {
  "selectors": [{
    "name": "iht1i",
    "label": "iht1i",
    "type": 2,
    "active": true,
    "private": false,
    "protected": false
  }],
  "selectorsAdd": "",
  "style": {
    "padding": "10px",
    "font-family": "Arial, Helvetica, sans-serif",
    "color": "#ffffff",
    "text-align": "justify"
  },
  "mediaText": "",
  "state": "",
  "stylable": true,
  "atRuleType": "",
  "singleAtRule": 0,
  "important": 0
}, {
  "selectors": [{
    "name": "iwpz2",
    "label": "iwpz2",
    "type": 2,
    "active": true,
    "private": false,
    "protected": false
  }],
  "selectorsAdd": "",
  "style": {
    "display": "inline-block",
    "padding": "5px",
    "min-height": "50px",
    "min-width": "50px",
    "color": "#ffffff",
    "text-decoration": "none"
  },
  "mediaText": "",
  "state": "",
  "stylable": true,
  "atRuleType": "",
  "singleAtRule": 0,
  "important": 0
}, {
  "selectors": [{
    "name": "iwas3",
    "label": "iwas3",
    "type": 2,
    "active": true,
    "private": false,
    "protected": false
  }],
  "selectorsAdd": "",
  "style": {
    "text-align": "center"
  },
  "mediaText": "",
  "state": "",
  "stylable": true,
  "atRuleType": "",
  "singleAtRule": 0,
  "important": 0
}, {
  "selectors": [{
    "name": "iy30b",
    "label": "iy30b",
    "type": 2,
    "active": true,
    "private": false,
    "protected": false
  }],
  "selectorsAdd": "",
  "style": {
    "color": "#ffffff",
    "text-align": "center",
    "text-decoration": "none",
    "font-size": "60px"
  },
  "mediaText": "",
  "state": "",
  "stylable": true,
  "atRuleType": "",
  "singleAtRule": 0,
  "important": 0
}, {
  "selectors": [{
    "name": "iyw2f",
    "label": "iyw2f",
    "type": 2,
    "active": true,
    "private": false,
    "protected": false
  }],
  "selectorsAdd": "",
  "style": {
    "padding": "10px",
    "font-size": "24px",
    "color": "#ffffff",
    "text-align": "center",
    "font-family": "Arial, Helvetica, sans-serif"
  },
  "mediaText": "",
  "state": "",
  "stylable": true,
  "atRuleType": "",
  "singleAtRule": 0,
  "important": 0
}, {
  "selectors": [{
    "name": "io9ql",
    "label": "io9ql",
    "type": 2,
    "active": true,
    "private": false,
    "protected": false
  }],
  "selectorsAdd": "",
  "style": {
    "padding": "10px",
    "font-family": "Arial, Helvetica, sans-serif",
    "color": "#ffffff",
    "text-align": "justify"
  },
  "mediaText": "",
  "state": "",
  "stylable": true,
  "atRuleType": "",
  "singleAtRule": 0,
  "important": 0
}, {
  "selectors": [{
    "name": "imheb",
    "label": "imheb",
    "type": 2,
    "active": true,
    "private": false,
    "protected": false
  }],
  "selectorsAdd": "",
  "style": {
    "display": "inline-block",
    "padding": "5px",
    "min-height": "50px",
    "min-width": "50px",
    "color": "#ffffff",
    "text-decoration": "none"
  },
  "mediaText": "",
  "state": "",
  "stylable": true,
  "atRuleType": "",
  "singleAtRule": 0,
  "important": 0
}, {
  "selectors": [{
    "name": "i0kz6",
    "label": "i0kz6",
    "type": 2,
    "active": true,
    "private": false,
    "protected": false
  }],
  "selectorsAdd": "",
  "style": {
    "text-align": "center"
  },
  "mediaText": "",
  "state": "",
  "stylable": true,
  "atRuleType": "",
  "singleAtRule": 0,
  "important": 0
}, {
  "selectors": [{
    "name": "ikwpc",
    "label": "ikwpc",
    "type": 2,
    "active": true,
    "private": false,
    "protected": false
  }],
  "selectorsAdd": "",
  "style": {
    "font-size": "60px",
    "color": "#ffffff",
    "text-align": "center"
  },
  "mediaText": "",
  "state": "",
  "stylable": true,
  "atRuleType": "",
  "singleAtRule": 0,
  "important": 0
}, {
  "selectors": [{
    "name": "i2673",
    "label": "i2673",
    "type": 2,
    "active": true,
    "private": false,
    "protected": false
  }],
  "selectorsAdd": "",
  "style": {
    "padding": "10px",
    "font-family": "Arial, Helvetica, sans-serif",
    "font-size": "24px",
    "color": "#ffffff",
    "text-align": "center"
  },
  "mediaText": "",
  "state": "",
  "stylable": true,
  "atRuleType": "",
  "singleAtRule": 0,
  "important": 0
}, {
  "selectors": [{
    "name": "igkln",
    "label": "igkln",
    "type": 2,
    "active": true,
    "private": false,
    "protected": false
  }],
  "selectorsAdd": "",
  "style": {
    "padding": "10px",
    "color": "#ffffff",
    "text-align": "justify",
    "font-family": "Arial, Helvetica, sans-serif"
  },
  "mediaText": "",
  "state": "",
  "stylable": true,
  "atRuleType": "",
  "singleAtRule": 0,
  "important": 0
}, {
  "selectors": [{
    "name": "iqpjf",
    "label": "iqpjf",
    "type": 2,
    "active": true,
    "private": false,
    "protected": false
  }],
  "selectorsAdd": "",
  "style": {
    "display": "inline-block",
    "padding": "5px",
    "min-height": "50px",
    "min-width": "50px",
    "color": "#ffffff",
    "text-decoration": "none"
  },
  "mediaText": "",
  "state": "",
  "stylable": true,
  "atRuleType": "",
  "singleAtRule": 0,
  "important": 0
}, {
  "selectors": [{
    "name": "iwhrv",
    "label": "iwhrv",
    "type": 2,
    "active": true,
    "private": false,
    "protected": false
  }],
  "selectorsAdd": "",
  "style": {
    "text-align": "center"
  },
  "mediaText": "",
  "state": "",
  "stylable": true,
  "atRuleType": "",
  "singleAtRule": 0,
  "important": 0
}, {
  "selectors": [{
    "name": "ifyid",
    "label": "ifyid",
    "type": 2,
    "active": true,
    "private": false,
    "protected": false
  }],
  "selectorsAdd": "",
  "style": {
    "padding": "10px",
    "color": "#ffffff",
    "font-family": "Arial, Helvetica, sans-serif",
    "font-size": "24px",
    "text-align": "center"
  },
  "mediaText": "",
  "state": "",
  "stylable": true,
  "atRuleType": "",
  "singleAtRule": 0,
  "important": 0
}, {
  "selectors": [{
    "name": "ip6eec",
    "label": "ip6eec",
    "type": 2,
    "active": true,
    "private": false,
    "protected": false
  }],
  "selectorsAdd": "",
  "style": {
    "padding": "10px",
    "color": "#ffffff",
    "text-align": "justify",
    "font-family": "Arial, Helvetica, sans-serif"
  },
  "mediaText": "",
  "state": "",
  "stylable": true,
  "atRuleType": "",
  "singleAtRule": 0,
  "important": 0
}, {
  "selectors": [{
    "name": "i0kw6f",
    "label": "i0kw6f",
    "type": 2,
    "active": true,
    "private": false,
    "protected": false
  }],
  "selectorsAdd": "",
  "style": {
    "padding": "10px 35px 10px 35px",
    "background-color": "#FFB158"
  },
  "mediaText": "",
  "state": "",
  "stylable": true,
  "atRuleType": "",
  "singleAtRule": 0,
  "important": 0
}, {
  "selectors": [{
    "name": "iuu2f3",
    "label": "iuu2f3",
    "type": 2,
    "active": true,
    "private": false,
    "protected": false
  }],
  "selectorsAdd": "",
  "style": {
    "color": "black",
    "border-radius": "50% 50% 50% 50%",
    "width": "100%"
  },
  "mediaText": "",
  "state": "",
  "stylable": true,
  "atRuleType": "",
  "singleAtRule": 0,
  "important": 0
}, {
  "selectors": [{
    "name": "i7thxq",
    "label": "i7thxq",
    "type": 2,
    "active": true,
    "private": false,
    "protected": false
  }],
  "selectorsAdd": "",
  "style": {
    "flex-basis": "33.33%",
    "display": "block"
  },
  "mediaText": "",
  "state": "",
  "stylable": true,
  "atRuleType": "",
  "singleAtRule": 0,
  "important": 0
}, {
  "selectors": [{
    "name": "ih7lnk",
    "label": "ih7lnk",
    "type": 2,
    "active": true,
    "private": false,
    "protected": false
  }],
  "selectorsAdd": "",
  "style": {
    "padding": "10px",
    "font-family": "Arial, Helvetica, sans-serif",
    "font-size": "24px",
    "color": "#ffffff"
  },
  "mediaText": "",
  "state": "",
  "stylable": true,
  "atRuleType": "",
  "singleAtRule": 0,
  "important": 0
}, {
  "selectors": [{
    "name": "ihwhwh",
    "label": "ihwhwh",
    "type": 2,
    "active": true,
    "private": false,
    "protected": false
  }],
  "selectorsAdd": "",
  "style": {
    "padding": "10px",
    "font-family": "Arial, Helvetica, sans-serif",
    "color": "#ffffff",
    "text-align": "justify"
  },
  "mediaText": "",
  "state": "",
  "stylable": true,
  "atRuleType": "",
  "singleAtRule": 0,
  "important": 0
}, {
  "selectors": [{
    "name": "irb7x9",
    "label": "irb7x9",
    "type": 2,
    "active": true,
    "private": false,
    "protected": false
  }],
  "selectorsAdd": "",
  "style": {
    "padding": "10px",
    "font-family": "Arial, Helvetica, sans-serif",
    "color": "#ffffff",
    "text-align": "justify"
  },
  "mediaText": "",
  "state": "",
  "stylable": true,
  "atRuleType": "",
  "singleAtRule": 0,
  "important": 0
}, {
  "selectors": [{
    "name": "iha9vx",
    "label": "iha9vx",
    "type": 2,
    "active": true,
    "private": false,
    "protected": false
  }],
  "selectorsAdd": "",
  "style": {
    "padding": "10px",
    "font-family": "Arial, Helvetica, sans-serif",
    "color": "#ffffff"
  },
  "mediaText": "",
  "state": "",
  "stylable": true,
  "atRuleType": "",
  "singleAtRule": 0,
  "important": 0
}, {
  "selectors": [{
    "name": "iio6xw",
    "label": "iio6xw",
    "type": 2,
    "active": true,
    "private": false,
    "protected": false
  }],
  "selectorsAdd": "",
  "style": {
    "padding": "10px",
    "color": "#fcfcfc",
    "text-align": "right",
    "font-family": "Arial, Helvetica, sans-serif"
  },
  "mediaText": "",
  "state": "",
  "stylable": true,
  "atRuleType": "",
  "singleAtRule": 0,
  "important": 0
}, {
  "selectors": [{
    "name": "row",
    "label": "row",
    "type": 1,
    "active": true,
    "private": 1,
    "protected": false
  }],
  "selectorsAdd": "",
  "style": {
    "flex-wrap": "wrap"
  },
  "mediaText": "(max-width: 768px)",
  "state": "",
  "stylable": true,
  "atRuleType": "media",
  "singleAtRule": 0,
  "important": 0
}]

Answers (3)

ateebahmed• February 26, 20201 reactions

@CaseJnr nope

ateebahmed• January 23, 20190 reactions

Read here about storing templates in DB: https://grapesjs.com/docs/modules/Storage.html#setup-remote-storage

On the front-end, you don't need the editor, just print the HTML and CSS stored in your DB

Actually I can't store CSS along with HTML and Styles as I am using a CMS table fields and only using its API to save the body content, can't create any additional fields in table, also I save styles as I don't want to lose responsiveness of site.

If I save final CSS in DB instead of Styles, and then restore them in editor via setStyle, will I lose anything?

Related Questions and Answers

Continue research with similar issue discussions.

Issue #1740

[Question]: CSS properties set on id elements not saved v0.14.50

When I try to put background color on a 1 column row element, it is inlined in the editor and not bind with id, it has unique id, and when...

2 answersUpdated January 24, 2020

Issue #2742

[QUESTION] How to prevent unique ids generation?

Hi! Thanks for your work @artf. This is a simplified code of how I use grapesjs, I want to save the styles and then want to apply them agai...

3 answersUpdated October 16, 2024

Issue #2378

[QUESTION] Modifying global CSS in style manager

We want to achieve the following:Mark our block HTML elements with some classes like:Add some styles that define CSS classes like:Using Gra...

3 answersUpdated April 21, 2021

Issue #3249

QUESTION regarding JSON stored by the StorageManager

Hey, @artf. I want to access the json that is generated when a template is stored without actually storing the template. The json object ca...

3 answersUpdated February 11, 2021

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.

PresetsPluginsComponentsBlocksAssetsCommandsI18nLayersStylesStoragesRTENewslettersWeb pagesSite builders