I want to make my own page builder

1. What is the right way to visualize my own page builder to the dashboard. Metabox or something else?

I would create one meta box and your entire page builder works from within it.

2. How can I make the default content editor collect data(shortcodes) from my editor as other page builders do.

Behind the scenes, as the user adds modules and configures them, you could be building shortcodes. If you hide the main content editor on a post, you would then save all the shortcodes in the editor, so that when a page was requested, WordPress would automatically call all of your shortcodes and replace it with the markup.

This is assuming you’re building a page builder that could work with any theme, right?

Hello Ryan, Thanks for your reply.

Yes. I’m going to build a page builder which works with any theme.

I would create one meta box and your entire page builder works from within it.

I thought that too. Just was confirming. Also searching on, if experts has any other way. But I think it’s good to go.

If you hide the main content editor on a post, you would then save all the shortcodes in the editor, so that when a page was requested, WordPress would automatically call all of your shortcodes and replace it with the markup

That’s ok. It’s the way to go I think. But if the author wants to come back to original text/visual editor in realtime, I think they won’t see what they did in my editor until they publish or update the post.

That’s why, I also need to know what is the way to sync data between my editor and the default editor in realtime. Any suggestion here?

Thanks!

Every time the user takes an action, I’d save the current configuration in the browser’s local or session storage, in addition to hidden input field, as a JSON object.

That way, if they lose Internet access or accidentally refresh the page, their most recent changes are not lost, because the browser has it. Once they save the page, you have all the values in the hidden input field(s).

If the user is satisfied with their changes, they will save the WordPress post, which you can use to trigger parsing the JSON into shortcodes or HTML.

The user would then be able to preview their changes (if post is saved as draft, for example), to see what it will look like on their site. You could also incorporate some kind of modal if you want them to preview certain sections on the edit page.

Thanks Ryan! That was so helpful. I get the idea to start with. ??