search

givanz / VvvebJs

Drag and drop page builder library written in vanilla javascript without dependencies or build tools.
https://www.vvveb.com/vvvebjs/editor.html
Apache License 2.0
7.31k stars 1.66k forks source link

VvebJS Use Case Audit #335

Open kaimou1357 opened 9 months ago

kaimou1357 commented 9 months ago

My current use case here is that I'd actually like to use VvebJs to act as an editable HTML canvas.

For example - I have a generated JSX component with HTML code. I'd basically like VvebJs to provide a Javascript Canvas where the user can select something, make edits, or comment on it. Would VvebJS be able to provide the entire markdown + the selected component? If so - would you be able to direct me to the feature set/APIS needed?

I actually do NOT need the other features like the sidebar etc. I just want to edit pure JSX code.

givanz commented 9 months ago

I have a generated JSX component with HTML code

VvvebJs does not use React and JSX it can only work with plain html.

kaimou1357 commented 9 months ago

Got it. If we render the plain HTML from the components themselves, how can we load it into VVEBJS to act as a drag and drop editor?

givanz commented 9 months ago

You can load html code with setHtml

Vvveb.Builder.setHtml("<h1>Hello world!</h1>");

To start with a blank page and set the html at startup

Vvveb.Builder.init("about:blank", function() {
        //load code after page is loaded here
        Vvveb.Builder.setHtml("<h1>Hello world!</h1>");
});

You can replace "about:blank" with a custom empty html file something like "blank.html" to add proper <head><body> tags.

The easiest way is to load the html page directly

Vvveb.Builder.init("my-page.html", function() {
        //run code after page is loaded here
});