VvvebJs: A Drag-and-Drop Page Builder That Skips the Build Step

You've probably been there: you need a page builder for a project, but every option seems to drag in a framework, a bundler, and a week of configuration before you can even drag a button onto a canvas. What if you could just open an HTML file and start building? That's the pitch behind VvvebJs, a drag-and-drop page builder library that's built with vanilla JavaScript, has zero dependencies, and requires no build tools whatsoever.

It's a refreshingly direct approach to a common problem. The library is basically a self-contained editor that you can drop into a project or just run locally, and it comes with Bootstrap 5 components out of the box.

What It Does

VvvebJs is a JavaScript library that gives you a full drag-and-drop page builder interface. You get a visual editor where you can drag components, blocks, and snippets directly onto a page, rearrange them, and edit their properties without touching code.

The core architecture is deliberately simple: it's vanilla JS with no dependencies and no build step, styled with Bootstrap 5. That means you don't need Node, npm, or a transpiler to get it running. The README is clear that you can clone the repo and open editor.html directly, though you'll want a local web server (like Apache or XAMPP) for full functionality due to browser iframe security restrictions.

Beyond the basics, the feature list is surprisingly deep for something with no build pipeline. You get undo/redo, a one or two-panel interface, a file manager for component hierarchy, a live code editor with CodeMirror syntax highlighting, and a media gallery with integrated CC0 image search. There are resize handles for images, video, and iframes, a breadcrumb for selecting parent elements, Google Fonts integration, and widgets for YouTube, Google Maps, and Charts.js. You can even download the page as a zip with all its assets, or save it to a server using the included PHP or Node scripts.

Why It's Cool

The "no build tools" angle isn't just a gimmick—it genuinely changes how you can use this thing.

• It's instantly accessible. You clone the repo, spin up a simple web server, and you're editing pages. No npm install marathon, no webpack config, no waiting for a dev server to warm up. For a quick prototype or an internal tool, that's huge.

• It's extensible without being a monolith. The README notes that while it ships with Bootstrap 5 and widgets, you can extend it with any kind of components and inputs. That's a nice middle ground between a rigid, opinionated builder and a "bring your own everything" framework.

• It has real, practical features. This isn't a toy. The ability to save pages via PHP or Node, the zip download plugin, the media gallery with CC0 search, and the global typography and color palette editor are all features you'd expect from a commercial product. The fact that it's open source and dependency-free makes it a compelling option for embedding in your own admin panels or CMS.

• The demo template is a smart touch. Using a separate landing page template (also on GitHub) as the demo content shows how the builder works with real-world sections and blocks, not just abstract wireframes. It makes the "aha" moment happen faster.

How to Try It

Getting started is refreshingly straightforward. First, clone the repository with submodules:

# git 2.13+
git clone --recurse-submodules https://github.com/givanz/VvvebJs

# older git versions
git clone --recursive https://github.com/givanz/VvvebJs

Then, because of browser iframe security, you'll want to serve it through a web server. If you have PHP available (via XAMPP, Docker, or shared hosting), you can just open http://localhost/editor.html. If you really want to skip the server, you can launch Chrome with web security disabled:

chrome --disable-web-security --user-data-dir=/tmp/temporary_profile editor.html

There's also a Docker option if you prefer containerized workflows:

docker run -p 8080:80 vvveb/vvvebjs

Then open http://localhost:8080/editor.php or http://localhost:8080/editor.html.

For the save functionality, you'll need either PHP (which works out of the box with Docker or XAMPP via save.php) or Node. For Node, just run:

npm install express
node save.js

And you're up at http://localhost:8080/editor.html.

You can check out the live demo and the full documentation on the repository.

Final Thoughts

VvvebJs is best for developers who need a page builder embedded in their own application without wanting to inherit a heavy frontend stack. It's also great for quick internal tools or admin panels where you want to give non-technical users the ability to edit pages without building a custom editor from scratch. It won't replace a full CMS, but it doesn't try to—it's a library that does one thing well.

The lack of a build step means you'll need to be okay with a more traditional workflow, but that's also its superpower. It's a reminder that not every project needs to be a complex build pipeline. Sometimes, a well-crafted vanilla JS library that you can just open and use is exactly what the situation calls for.

Follow @githubprojects for more developer tools and open source projects.