免费代码网站（下一代开源免费无需编码的Web）

介绍GrapesJS是一个免费的开源Web Builder框架，它可以帮助你更快、更轻松地构建HTML模板，以便在网站、时事通讯或移动应用程序中交付。主要是，grapejs被设计用来在CMS中加速动态模板的创建！Githubhttps://github.com/artf/grapesjs概念为了更好地理解grapejs的概念，请查看下面的图片一般来说，任何“模板系统”，你会发现在各种应用程序，如CMS，是由结构（HTML）、样式（CSS）和变量组成的，然后在服务器端用其他模板和内容替换，并在客户端呈现。特性一般情况下都会为了能够实现基本无编码，有几个是无法省略的，分别是控件、样式管理、布局管理、代码预览、资产文件管理（如图片），grapejs都已经全部囊括进来了：开发<link rel="stylesheet" href="path/to/grapes.min.css">
<script src="path/to/grapes.min.js"></script>

<div id="gjs"></div>

<script type="text/javascript">
var editor = grapesjs.init({
container : '#gjs',
components: '<div class="txt-red">Hello world!</div>',
style: '.txt-red{color: red}',
});
</script>或者这样<div id="gjs">
<div class="txt-red">Hello world!</div>
<style>.txt-red{color: red}</style>
</div>

<script type="text/javascript">
var editor = grapesjs.init({
container : '#gjs',
fromElement: true,
});
</script>直接看Demo，简单来说它就是一个网页设计器，demo已经很完整的展现了它：类似产品在很久之前，咱们的文章中介绍过一个VvvebJs也是一个类似的产品，https://github.com/givanz/VvvebJs同GrapesJS一样在Demo上都实现了很好的功能，并且已经加上了导出和下载功能，小伙伴们直接可以在Demo上尝试了总结笔者在很多地方都看到有无代码开发的需求，目前已经有很多这种做的很不错的产品模块，像这样开源免费的产品属实让人称赞，不管是VvvebJs还是GrapesJS都是属于开源中的精品，必须得感谢开发者无私的奉献！