写 HTML、CSS、JavaScript 的时候，经常需要边写边看效果。本地要装编辑器、搭环境，改一下还得手动刷新浏览器，挺麻烦。这个小工具就是一个网页版的编辑器加预览器——左边敲代码，右边马上显示运行结果，改一个字右边就跟着变，特别适合随手试东西、调样式、验证想法。
主要功能
左右分栏，实时预览
左边是代码编辑区，右边是预览区。在左边输入 HTML、CSS、JS，右边会自动运行并显示效果。输入是实时的，不用点按钮，稍微停一下（大约 0.2 秒）就自动刷新，不会每敲一个字都重跑。
代码编辑体验
编辑区做得像正经编辑器：
语法高亮：HTML 标签、属性、文字各有各的颜色，深色背景，看着舒服
行号：左边一列显示行号，方便定位
滚动同步：代码长了，行号和高亮跟着一起滚动，不会错位
行数统计：右上角显示总共有多少行
脚本自动隔离
你的 JavaScript 代码会被自动包进一个隔离环境里运行，定义的变量不会污染全局，也不会跟页面其他地方冲突。这样你随便定义变量名都不用担心。
模板转义
顶部的设置里可以填左右定界符，默认是 {{ 和 }}。填了之后，代码里像 {{ username }} 这样的内容会被自动转义，预览时原样显示，方便测试模板语法。
错误提示
如果代码跑出错了，预览区会把错误信息传出来，右下角弹出提示，告诉你哪一行出了什么问题，方便排查。
载入文件
点"载入文件"按钮，可以选一个本地的 .html、.htm 或 .txt 文件，内容会读进编辑器。改完了想保存，点"下载代码"就能存成 index.html。
格式化
代码写乱了、缩进不齐，点"格式化"，工具会按层级重新缩进，每个标签各占一行，读起来清楚多了。
字符反转义
如果代码里的 HTML 实体被转义了（比如 < 变成 <），点"字符反转义"能把它们还原回正常字符，方便处理粘贴来的内容。
载入示例
点"载入示例"，会填一段示范代码进去，里面演示了作用域隔离和模板转义的用法，一看就明白这工具怎么使。
清空
点"清空"把编辑器内容清掉，重新开始。
适合谁用
学 HTML、CSS、JavaScript 的人，边写边看效果，学起来快；做前端开发的人，想快速试一段代码、验证一个效果，不用开本地工程；写邮件模板、页面片段的人，能立即看到渲染结果；给别人演示代码效果的人，打开就能用，不用装东西。
用起来什么感觉
界面很直观：上面一排按钮管各种操作，下面左边代码、右边预览。编辑器是深色的，预览是白的，对比清楚。手机上左边右边会变成上下排列，上下各占一半。预览区是隔离的沙箱，代码里的脚本能跑，但不会影响外面的页面，安全。按钮大、字清楚，手机电脑都能用。不需要安装，打开网页就能使，用完关掉就行。