[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-10181":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":25,"hasPages":23,"topics":26,"createdAt":10,"pushedAt":10,"updatedAt":47,"readmeContent":48,"aiSummary":49,"trendingCount":16,"starSnapshotCount":16,"syncStatus":50,"lastSyncTime":51,"discoverSource":52},10181,"VvvebJs","givanz\u002FVvvebJs","givanz","Drag and drop page builder library written in vanilla javascript without dependencies or build tools.","https:\u002F\u002Fwww.vvveb.com\u002Fvvvebjs\u002Feditor.html",null,"JavaScript",8498,1818,231,259,0,1,8,30,5,74.78,"Apache License 2.0",false,"master",true,[27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46],"bootstrap","bootstrap5","builder","drag-and-drop","editor","free","javascript","low-code","no-code","nocode","nodejs","open-source","page-builder","scss","site-generator","ui","vanilla-javascript","website-builder","website-generation","wysiwyg","2026-06-12 04:00:49","# VvvebJs\n\n\u003Cp align=\"center\">\n  \u003Cimg src=\"https:\u002F\u002Fwww.vvveb.com\u002Fadmin\u002Fthemes\u002Fdefault\u002Fimg\u002Fbiglogo.png\" alt=\"Vvveb\">\n  \u003Cbr>\u003Cbr>\n  \u003Cstrong>Drag and drop page builder javascript library.\u003C\u002Fstrong>\n  \u003Cbr>\n  \u003Cspan>Built with Vanilla Js with no dependencies or build tools and Bootstrap 5\u003C\u002Fspan>\n\u003C\u002Fp>\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fwww.vvveb.com\">Website\u003C\u002Fa> |\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fgivanz\u002FVvvebJs\u002Fwiki\">Documentation\u003C\u002Fa> |\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fgivanz\u002FVvvebJs\u002Fdiscussions\">Forum\u003C\u002Fa> |\n  \u003Ca href=\"https:\u002F\u002Ftwitter.com\u002Fvvvebcms\">Twitter\u003C\u002Fa> \n\u003C\u002Fp>\n\n\n## [Live Demo](https:\u002F\u002Fwww.vvveb.com\u002Fvvvebjs\u002Feditor.html)\n\nFor a full featured Open Source CMS using VvvebJs page builder check [Vvveb CMS](https:\u002F\u002Fgithub.com\u002Fgivanz\u002FVvveb)\n\nUsing [Vvveb landing page template](https:\u002F\u002Fgithub.com\u002Fgivanz\u002Flanding) for demo page and Bootstrap 5 sections and blocks.\n\n\u003Cimg src=\"https:\u002F\u002Fwww.vvveb.com\u002Fimg\u002Fdark-theme.png\">\n\u003Cimg src=\"https:\u002F\u002Fwww.vvveb.com\u002Fimg\u002Flight-theme.png\">\n\n### Features\n\n* Components and blocks\u002Fsnippets drag and drop and in page insert.\n* Undo\u002FRedo operations.\n* One or two panels interface.\n* File manager and component hierarchy navigation.\n* Add new page modal with template and folder options.\n* Live code editor with codemirror plugin syntax highlighting.\n* Image upload with example php script included.\n* Page download or export html or save page on server with example php script included.\n* Components\u002FSections\u002FBlocks list search.\n* Bootstrap 5 components.\n* Media gallery with integrated CC0 image search and server upload support.\n* Image, video and iframe elements resize handles.\n* Elements breadcrumb for easier parent elements selection.\n* Full Google fonts list support for font selection.\n* Youtube, Google maps, Charts.js etc widgets.\n* Optional CKEditor plugin to replace builtin text editor.\n* Zip download plugin to download the page and all assets as zip file.\n* SVG Icon component bundled with hundreds of free icons.\n* Animate on scroll support for page elements.\n* Theme global typography and color pallette editor.\n\n\nBy default the editor comes with Bootstrap 5 and Widgets components and can be extended with any kind of components and inputs.\n\n## Install\n\n* Clone the repository \n```bash\n#git 2.13+ \ngit clone --recurse-submodules https:\u002F\u002Fgithub.com\u002Fgivanz\u002FVvvebJs\n\n# older git versions \ngit clone --recursive https:\u002F\u002Fgithub.com\u002Fgivanz\u002FVvvebJs\n```\n\n* Pull changes \n```bash\ngit pull --recurse-submodules\n```\n\n## Usage\n\nClone the repository or download a release then open `editor.html`\n\nBecause of browser iframe security you need to use a webserver such as apache\u002Fxampp and open `http:\u002F\u002Flocalhost\u002Feditor.html`\n\nTo disable browser security and open `editor.html` without installing a webserver run chrome with\n\n```bash\nchrome --disable-web-security --user-data-dir=\u002Ftmp\u002Ftemporary_profile editor.html\n```\n\nTo use the image upload or page save feature you need to have php installed.\n\n\n## Docker\n\n### Local development\n\nFrom VvvebJs folder run\n\n```bash\ndocker-compose up\n```\n\n### Image \n\nOr run image \n\n```bash\ndocker run -p 8080:80 vvveb\u002Fvvvebjs\n```\n\nOpen http:\u002F\u002Flocalhost:8080\u002Feditor.php or http:\u002F\u002Flocalhost:8080\u002Feditor.html\n\n## Save page\n\nSave page function needs either php or node\n\n### PHP\n\nIf you use docker, xampp or a shared hosting account php should work without any change.\n\nSaving is done using [save.php](save.php)\n\n### Node\n\nFor node go to VvvebJs folder and run\n\n```bash\nnpm install express\nnode save.js\n```\n\nOpen http:\u002F\u002Flocalhost:8080\u002Feditor.html\n\nSaving is done using [save.js](save.js)\n\n\n## [Landing template](https:\u002F\u002Fgithub.com\u002Fgivanz\u002Flanding)\n\nTo make changes to template files or sections run the following commands from `demo\u002Flanding` folder\n\n### Install gulp\n\n```bash\nnpm i\n```\n\n### Generate html files\n\nTemplate html partials are located in `demo\u002Flanding\u002Fsrc` folder.\n\n```bash\nnpm run gulp\n```\n\n### Watch for changes for development\n\n```bash\nnpm run gulp watch\n```\n\n### Generate sections list for page builder\n\nSections html files are located in `demo\u002Flanding\u002Fsrc\u002Fsections` folder grouped in folders with the section group name.\n\n```bash\nnpm run gulp sections\n```\n\n### Generate blocks list\n\nBlocks html files are located in `demo\u002Flanding\u002Fsrc\u002Fblocks` folder grouped in folders with the blocks group name.\n\n```bash\nnpm run gulp blocks\n```\n\n### Generate screenshots for sections\n\n```bash\nnpm run gulp screenshots\n```\n\n## Usage\n\n### Initialize example\n\n\n```js\n\u003C!-- bootstrap-->\n\u003Cscript src=\"js\u002Fpopper.min.js\">\u003C\u002Fscript>\n\u003Cscript src=\"js\u002Fbootstrap.min.js\">\u003C\u002Fscript>\n\n\u003C!-- builder code-->\n\u003Cscript src=\"libs\u002Fbuilder\u002Fbuilder.js\">\u003C\u002Fscript>\t\n\u003C!-- undo manager-->\n\u003Cscript src=\"libs\u002Fbuilder\u002Fundo.js\">\u003C\u002Fscript>\t\n\u003C!-- inputs-->\n\u003Cscript src=\"libs\u002Fbuilder\u002Finputs.js\">\u003C\u002Fscript>\t\n\u003C!-- components-->\n\u003Cscript src=\"libs\u002Fbuilder\u002Fcomponents-bootstrap5.js\">\u003C\u002Fscript>\t\n\u003Cscript src=\"libs\u002Fbuilder\u002Fcomponents-widgets.js\">\u003C\u002Fscript>\t\n\n\u003Cscript>\nlet pages = [\n {\n\tname:\"narrow-jumbotron\", \n\ttitle:\"Jumbotron\", \n\turl: \"demo\u002Fnarrow-jumbotron\u002Findex.html\", \n\tfile: \"demo\u002Fnarrow-jumbotron\u002Findex.html\"\n  },\n  {name:\"landing-page\", title:\"Landing page\", url: \"demo\u002Flanding\u002Findex.html\", file: \"demo\u002Flanding\u002Findex.html\"},\n];\n\t\n\nlet firstPage = Object.keys(pages)[0];\nVvveb.Builder.init(pages[firstPage][\"url\"], function() {\n\t\u002F\u002Fload code after page is loaded here\n});\n\nVvveb.Gui.init();\nVvveb.FileManager.init();\nVvveb.SectionList.init();\nVvveb.Breadcrumb.init();\n\nVvveb.FileManager.addPages(pages);\nVvveb.FileManager.loadPage(pages[firstPage][\"name\"]);\nVvveb.Gui.toggleRightColumn(false);\nVvveb.Breadcrumb.init();\n\n\u003Cscript>\n```\n\nFor editor html and components\u002Finput javascript templates edit [editor.html](editor.html)\n\nFor css changes edit [scss\u002Feditor.scss](scss\u002Feditor.scss) and [scss\u002F_builder.scss](scss\u002F_builder.scss)\n\n\n### Scss\n\nTo compile scss to css first install gulp \n\n```bash\nnpm i\n```\n\nThen you can run \n\n```bash\nnpm run gulp\n```\n\nor use watch to compile on file change.\n\n```bash\nnpm run gulp watch\n```\n\n\n## Documentation\n\nFor documentation check the [wiki](https:\u002F\u002Fgithub.com\u002Fgivanz\u002FVvvebJs\u002Fwiki)\n\n## Support\n\nIf you like the project you can support it with a [PayPal donation](https:\u002F\u002Fpaypal.me\u002Fzgivan) or become a backer\u002Fsponsor via [Open Collective](https:\u002F\u002Fopencollective.com\u002Fvvvebjs)\n\n\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Fvvvebjs\u002Fsponsors\u002F0\u002Fwebsite\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fvvvebjs\u002Fsponsors\u002F0\u002Favatar\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Fvvvebjs\u002Fbackers\u002F0\u002Fwebsite\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fvvvebjs\u002Fbackers\u002F0\u002Favatar\">\u003C\u002Fa>\n\n## License\n\nApache 2.0\n","VvvebJs 是一个基于纯 JavaScript 开发的拖拽式网页构建库，无需依赖任何外部库或构建工具。其核心功能包括组件和区块的拖放、撤销\u002F重做操作、文件管理和实时代码编辑等，支持 Bootstrap 5 组件及丰富的自定义选项如字体选择、颜色调色板编辑等。特别适用于需要快速搭建响应式网站且对技术栈有低依赖要求的场景，比如个人博客、小型企业官网或是教育演示项目。由于其轻量级特性与直观的操作界面，即使是没有深厚编程背景的用户也能轻松上手使用 VvvebJs 创建美观实用的网页。",2,"2026-06-11 03:27:03","top_topic"]