VvvebJs

KO | EN

gitlite — search

#javascript #python #hacktoberfest #ai #typescript #llm #go #rust #vue #pytorch #security #ios #mcp #open-source

(★ 8,595)

Drag and drop page builder library written in vanilla javascript without dependencies or build tools.

VvvebJs Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# VvvebJs

<p align="center">
  <img src="https://www.vvveb.com/admin/themes/default/img/biglogo.png" alt="Vvveb">
  <br><br>
  <strong>Drag and drop page builder javascript library.</strong>
  <br>
  <span>Built with Vanilla Js with no dependencies or build tools and Bootstrap 5</span>
</p>
<p align="center">
  <a href="https://www.vvveb.com">Website</a> |
  <a href="https://github.com/givanz/VvvebJs/wiki">Documentation</a> |
  <a href="https://github.com/givanz/VvvebJs/discussions">Forum</a> |
  <a href="https://twitter.com/vvvebcms">Twitter</a> 
</p>

## [Live Demo](https://www.vvveb.com/vvvebjs/editor.html)

For a full featured Open Source CMS using VvvebJs page builder check [Vvveb CMS](https://github.com/givanz/Vvveb)

Using [Vvveb landing page template](https://github.com/givanz/landing) for demo page and Bootstrap 5 sections and blocks.

### Features

* Components and blocks/snippets drag and drop and in page insert.
* Undo/Redo operations.
* One or two panels interface.
* File manager and component hierarchy navigation.
* Add new page modal with template and folder options.
* Live code editor with codemirror plugin syntax highlighting.
* Image upload with example php script included.
* Page download or export html or save page on server with example php script included.
* Components/Sections/Blocks list search.
* Bootstrap 5 components.
* Media gallery with integrated CC0 image search and server upload support.
* Image, video and iframe elements resize handles.
* Elements breadcrumb for easier parent elements selection.
* Full Google fonts list support for font selection.
* Youtube, Google maps, Charts.js etc widgets.
* Optional CKEditor plugin to replace builtin text editor.
* Zip download plugin to download the page and all assets as zip file.
* SVG Icon component bundled with hundreds of free icons.
* Animate on scroll support for page elements.
* Theme global typography and color pallette editor.

By default the editor comes with Bootstrap 5 and Widgets components and can be extended with any kind of components and inputs.

## Install

* Clone the repository 
```bash
#git 2.13+ 
git clone --recurse-submodules https://github.com/givanz/VvvebJs

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

* Pull changes 
```bash
git pull --recurse-submodules
```

## Usage

Clone the repository or download a release then open `editor.html`

Because of browser iframe security you need to use a webserver such as apache/xampp and open `http://localhost/editor.html`

To disable browser security and open `editor.html` without installing a webserver run chrome with

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

To use the image upload or page save feature you need to have php installed.

## Docker

### Local development

From VvvebJs folder run

```bash
docker-compose up
```

### Image

Or run image

```bash
docker run -p 8080:80 vvveb/vvvebjs
```

Open http://localhost:8080/editor.php or http://localhost:8080/editor.html

## Save page

Save page function needs either php or node

### PHP

If you use docker, xampp or a shared hosting account php should work without any change.

Saving is done using [save.php](save.php)

### Node

For node go to VvvebJs folder and run

```bash
npm install express
node save.js
```

Open http://localhost:8080/editor.html

Saving is done using [save.js](save.js)

## [Landing template](https://github.com/givanz/landing)

To make changes to template files or sections run the following commands from `demo/landing` folder

### Install gulp

```bash
npm i
```

### Generate html files

Template html partials are located in `demo/landing/src` folder.

```bash
npm run gulp
```

### Watch for changes for development

```bash
npm run gulp watch
```

### Generate sections list for page builder

Sections html files are located in `demo/landing/src/sections` folder grouped in folders with the section group name.

```bash
npm run gulp sections
```

### Generate blocks list

Blocks html files are located in `demo/landing/src/blocks` folder grouped in folders with the blocks group name.

```bash
npm run gulp blocks
```

### Generate screenshots for sections

```bash
npm run gulp screenshots
```

## Usage

### Initialize example

```js

<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>

<script src="libs/builder/builder.js"></script>	

<script src="libs/builder/undo.js"></script>	

<script src="libs/builder/inputs.js"></script>	

<script src="libs/builder/components-bootstrap5.js"></script>	
<script src="libs/builder/components-widgets.js"></script>

let firstPage = Object.keys(pages)[0];
Vvveb.Builder.init(pages[firstPage]["url"], function() {
	//load code after page is loaded here
});

Vvveb.Gui.init();
Vvveb.FileManager.init();
Vvveb.SectionList.init();
Vvveb.Breadcrumb.init();

Vvveb.FileManager.addPages(pages);
Vvveb.FileManager.loadPage(pages[firstPage]["name"]);
Vvveb.Gui.toggleRightColumn(false);
Vvveb.Breadcrumb.init();

<script>
```

For editor html and components/input javascript templates edit [editor.html](editor.html)

For css changes edit [scss/editor.scss](scss/editor.scss) and [scss/_builder.scss](scss/_builder.scss)

### Scss

To compile scss to css first install gulp

```bash
npm i
```

Then you can run

```bash
npm run gulp
```

or use watch to compile on file change.

```bash
npm run gulp watch
```

## Wrappers

* [React](https://github.com/VvvebJs/react) VvvebJs React wrapper

## Documentation

For documentation check the [wiki](https://github.com/givanz/VvvebJs/wiki)

## Support

If you like the project you can support it with a [PayPal donation](https://paypal.me/zgivan) or become a backer/sponsor via [Open Collective](https://opencollective.com/vvvebjs)

## License

Apache 2.0

VvvebJs

VvvebJs Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

VvvebJs

VvvebJs Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README