How to publish GrapesJs layout on webpage

[codingmachine16]

Hi @artf

Our GrapesJs editor is running on
http://localhost:5500/editor

We want to publish it on front end on
http://localhost:5500/

But on front end , the panels are showing and edit mode is on. How to disable edit mode and hide panels

[artf]

The final page has nothing to do with the editor. For example, you store HTML/CSS somewhere in files/DB from /editor page, then in your / page you just need to get the final HTML/CSS from when you have stored them and print them as output, you don't need to include GrapesJS there...

[codingmachine16]

It is in this format

{"mycustom-html":"<header class="bg-dark"><div class="container-fluid">

<div class="row" id="iaul"><hr class="d-none"/>

","mycustom-components":"[{"tagName":"header","classes":["bg-dark"],"components":[{"classes":["container-fluid"],"components":[{},{"classes":[{"name":"row","private":1}],"attributes":{"id":"iaul"},"components":[{"tagName":"hr","void":true,"classes":["d-none"]}]}]},{}]}]","mycustom-assets":"[]","mycustom-css":"* { box-sizing: border-box; } body {margin: 0;}#iaul{min-height:75px;}","mycustom-styles":"[{"selectors":["#iaul"],"style":{"min-height":"75px"}}]"}

How can we get this and print? I am using Reactjs. We are stuck here though we have completed a website builder using grapesJs.

[artf]

Sorry mate, but I think questions like this you have to ask on sites like StackOverflow, this is strictly related to your app and has nothing to do with GrapesJS...

[codingmachine16]

@artf

I have found the solution. Thanks alot guidance.

[IreAy0]

how did you achieve this, please?

[codingmachine16]

@IreAy0

// got home page data from DB using node Js
getpage("home")
.then((data) => {
setTimeout(() => {
setPageContent(data); // stored data in React State
}, 500);
})
.catch((err) => console.log(err));
}

useEffect(() => {
getPage(); // getting data from DB
}, []);

// Now filled stored HTML from DB to webpage

document.getElementById("root").innerHTML = pageContent["mycustom-html"];