5

Basically, we are using a headless CMS to edit content on Website A. We are building our own CMS UI based on the headless CMS API (call this Website CMS).

Now, we have this page in Website CMS wherein you can edit the content on the left panel and get a preview of Website A on the right panel (mobile view).

I haven’t done anything like this before and I am wondering what’s the best way to accomplish this and if there any libraries that help with this functionality.

Some ideas:

  1. Embed Website A within Website CMS and any changes done on the left panel basically just refreshes Website A (which is just embedded into the page).
  2. Recreate Website A as a page in Website CMS and call the same APIs so that the changes both happen on Website CMS’s Website A and the actual Website A. (Although I don’t see how this would be more beneficial and will create 2 separate codebases for the exact same page).
  3. Others???

Main framework we are using is ReactJs for this CMS UI.

catandmouse
  • 11,309
  • 23
  • 92
  • 150

2 Answers2

0

Option 2 is what I would do and wouldn’t necessarily be duplicative.

You would want users to be able to preview changes without publishing them. So porting the real website wouldn’t be compatible with that goal.

Code duplication would probably be minimal. It would share most of the same code and it would also propagate much faster.

Symphony0084
  • 1,257
  • 16
  • 33
0

you can establish a communication link between CMS and website A to exchange data.

Options

  1. you can embed website A inside Website CMS using an iframe and then you can use postMessage to exchange data between CMS and Website A.
  2. Or else you can use WebSockets where website A will listen for the changes done at the left panel of the CMS.
Abhishek
  • 1,302
  • 10
  • 18