How can I render the page in React.js after it has been edited using the GrapesJS builder?

[ShohanMir]

After editing the page using grapes builder, how can show the page or view it on react js components or page? I can't find any doc about it. Please help.

Suppose this is a page data I'm getting from the loadContent endpoint. Now how can I get the HTML and CSS files from it?

{
    "assets": [],
    "styles": [],
    "pages": [
        {
            "frames": [
                {
                    "component": {
                        "type": "wrapper",
                        "stylable": [
                            "background",
                            "background-color",
                            "background-image",
                            "background-repeat",
                            "background-attachment",
                            "background-position",
                            "background-size"
                        ],
                        "components": [
                            {
                                "tagName": "blockquote",
                                "type": "text",
                                "classes": [
                                    "quote"
                                ],
                                "components": [
                                    {
                                        "type": "textnode",
                                        "content": "\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore ipsum dolor sit\n      "
                                    }
                                ]
                            },
                            {
                                "tagName": "section",
                                "classes": [
                                    "bdg-sect"
                                ],
                                "components": [
                                    {
                                        "tagName": "h1",
                                        "type": "text",
                                        "classes": [
                                            "heading"
                                        ],
                                        "components": [
                                            {
                                                "type": "textnode",
                                                "content": "Insert title here"
                                            }
                                        ]
                                    },
                                    {
                                        "tagName": "p",
                                        "type": "text",
                                        "classes": [
                                            "paragraph"
                                        ],
                                        "components": [
                                            {
                                                "type": "textnode",
                                                "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua"
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    }
                }
            ],
            "type": "main",
            "id": "GjirKRbWfuDK7eIH"
        }
    ]
}

Somehow I created a way to dynamically load the data from the server and show it on the react js frontend. But the problem is, the page is loading without the css. I tried a lot but I can't fix that. Here is my code to load the page:

import React, { useEffect, useState } from 'react';
import services from '../../services/pageBulder.service';
import useContext from '../../context/StateProvider';
import { useParams } from 'react-router-dom';

function RenderPersonalPage() {
  const { pageId } = useParams();
  const [{ user }] = useContext();
  const [viewData, setViewData] = useState({});

  const fetchPageData = async () => {
    try {
      const response = await services.loadContent(user._id, pageId);
      setViewData(response);
    } catch (error) {
      console.log(error);
    }
  };

  useEffect(() => {
    fetchPageData();
  }, [pageId]);

  useEffect(() => {
    if (viewData.styles && viewData.styles.length > 0) {
      const styleElement = document.createElement('style');
      styleElement.innerHTML = viewData.styles
        .map((style) => {
          const { selectors, style: styleObj } = style;
          const rules = Object.entries(styleObj).map(
            ([prop, value]) => `${prop}:${value}`
          );
          return `${selectors.join(', ')} { ${rules.join(';')} }`;
        })
        .join('\n');
      document.head.appendChild(styleElement);
    }
  }, [viewData.styles]);

  const renderComponent = (component) => {
    if (!component) return null;

    const { type, tagName, classes, components, attributes } = component;

    if (type === 'textnode') {
      return component.content;
    }

    if (type === 'image') {
      const { src, alt, width, height } = attributes;
      return <img src={src} alt={alt} width={width} height={height} />;
    }

    const ComponentTag = tagName || 'div';

    const componentClasses = classes ? classes.join(' ') : '';

    return (
      <ComponentTag className={componentClasses}>
        {components && components.map((comp) => renderComponent(comp))}
      </ComponentTag>
    );
  };

  const renderPage = () => {
    const { pages } = viewData;
    if (!pages || pages.length === 0) return null;

    const mainPage = pages[0];
    const { frames } = mainPage;
    if (!frames || frames.length === 0) return null;

    const mainFrame = frames[0];
    const { component } = mainFrame;

    return <div className="rendered-page">{renderComponent(component)}</div>;
  };

  return <div className="rendered-page">{renderPage()}</div>;
}

export default RenderPersonalPage;

[ShohanMir]

@artf any suggestion, please?

[artf]

Check this section, you can enrich your project JSON with HTML/CSS directly from the editor.

In regards to this problem...

Somehow I created a way to dynamically load the data from the server and show it on the react js frontend. But the problem is, the page is loading without the css.

...your project data doesn't have any style data "styles": [],

[abhishekbhutra]

what if we do not want to save html CSS on the server but just the JSON and it should render at run time? Is there a way to render using grapejs lib without showing builder