作者：馒头

链接：
https://segmentfault.com/a/1190000023354775

前言

前一段时间小编也发布一篇关于H5在线可视化编辑器是基于Vue版的《Vue + Koa从零打造一个H5页面可视化编辑器——Quark-h5 》，这次又来一个React版。废话不多说，进入正题。

H5DS (HTML5 Design software) 这是一款基于 WEB 的 HTML5 制作工具的内核。让不会写代码的人也能轻松快速上手编写HTML5页面。H5DS同时也是一款基于react+mobx的在线HTML制作工具，灵活的内核可快速改造成各种 可视化制作工具（基于该内核，可以做BI工具，建站工具，图形设计工具，在线PPT工具等一系列工具），H5DS提供了丰富的插件扩展接口，让插件可自由快速扩展和动态加载，同时也支持API接入

作为一名程序员，产品经理、设计师等身兼数职的我，推荐一款年度最佳的H5编辑器给大家，真心牛逼，业界良心，看的我热血沸腾，回家一脚踢飞正在熟睡的哈士奇！

官方网站：www.h5ds.com

github地址：https://github.com/h5ds/h5ds

H5DS编辑器，软件截图：

推荐理由1：时间轴

支持动画时间轴，调试动画和音频

给图层添加动画后可以通过时间轴设置动画，真的很直观和方便。效率提升N倍。其中紫色块表示进入动画，蓝色是离开动画，黄色块是强调动画，绿色块表示音频，另外时间轴开可以设置音乐播放的开始时间。

推荐理由2：批量操作

批量选中后，还可以一键布局，批量粘贴动画，批量设置动画间隔，真是强大的不要不要呀~

推荐理由3：黑暗模式

黑暗模式，传说中只有IOS才有的黑暗模式，居然在H5DS编辑器中也有，喜欢黑色的编辑器么？那就开启黑暗模式吧！

推荐理由4：下载代码

还可以把做好的作品下载代码到本地。一次只要10个积分，积分不够可以关注官方的公众号，直接赠送500个积分，每天签到可以赠送10个积分。真的很良心~ 积分用完还可以找作者要积分,基本上可以免费使用，之所以为什么不直接免费？因为是怕有人恶意下载导致服务器负载过高挂了大家都没得玩了。

推荐理由5：强大音频

语音合成，在线录音，上传音频，你需要的都有！

推荐理由6：浮动层

唯一一款支持多浮动层的编辑器，给浮动层添加元素后每个页面都会全部加上元素，这个操作比较骚，真的~

图解浮动层：

推荐理由7：吸附定位

吸附定位，这个概念真的比较新，通过名字可以了解到这个功能可以让元素吸附到窗口指定的位置，对这个研究了一下发现这个功能真的很酷，特别是解决各种机型兼容性的问题。

推荐理由8：自定义脚本

额，还可以自定义JS脚本，编辑器实现不了的功能，脚本帮你实现。老板：你TM管这玩意儿叫H5编辑器？？？？？可以写代码的编辑器我还是第一次见。

推荐理由9：插件可扩展

编辑器自带了很多插件，这款叫H5DS的编辑器更牛逼了，插件还可以自己开发，为了让插件开发者更爽，居然自己开发了一套UI库，哦，你没看错，真的是一套UI库。【h5ds-ui】

woc~ 能不能好好的做编辑器！不得不说真的奥利给呀~

推荐理由10：H5DS-JSSDK

额，居然自己开发了一套JSSDK，让React开发的H5DS在vue, angular中大放异彩。传说中的混合开发来了？？？？

推荐理由11：

推荐H5DS的理由很简单

开源github地址：
https://github.com/h5ds/h5ds

非要逼我跪下来求你才会给我点个赞吗？？？？？老子堂堂七尺男儿！

帅哥美女！赏个赞吧！

作者：馒头

链接：
https://segmentfault.com/a/1190000023354775