三十秒版本
Pixorla 是一个前端在线演练场：打开 pixorla.com/editor，左边写 HTML、CSS 和 JavaScript，右边立刻看到页面跑起来的样子。不用装环境，不用建工程，甚至不用注册——先写起来，想保存的时候再登录。
它适合想快速验证一个想法的前端工程师、跟着教程敲代码的学习者、需要给学生一个「点开就能改」的示例的老师，以及所有「我就想试试这段 CSS」的瞬间。
为什么做 Pixorla
想验证一个小想法——一个按钮的悬停效果、一段 canvas 动画——通常有两条路：本地起一个工程，或者用在线工具。
本地工程太重。为一个渐变按钮装依赖、配构建、开 dev server，等它跑起来的工夫，想法已经凉了一半。在线工具够轻，但常常在另外两个地方妥协：编辑器手感像增强版的文本框，补全和快捷键都谈不上；预览永远是固定宽度的桌面视口，页面在手机上长什么样，全靠脑补。
Pixorla 想把两头都占住：起步零配置，体验不缩水。
打开就能写：三个面板，即时预览
进入编辑器，默认就是一套最简单的空白模板。三个面板分别放 HTML、CSS、JavaScript，中间不需要任何胶水代码；改动之后预览几秒内自动刷新，也可以随时手动重跑。
比如这样一个小卡片：
<div class="card">
<h2>Hello, Pixorla</h2>
<p>你已经跑起了第一个页面。</p>
<button id="btn" type="button">点我</button>
</div>body {
font-family: system-ui, sans-serif;
}
.card {
max-width: 320px;
margin: 80px auto;
padding: 24px;
text-align: center;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
}
#btn {
border: 0;
border-radius: 999px;
padding: 10px 24px;
background: #4f46e5;
color: #fff;
cursor: pointer;
}// JS 面板：点一次，计一次数
let count = 0;
const btn = document.querySelector("#btn");
btn.addEventListener("click", () => {
count += 1;
btn.textContent = "点了 " + count + " 次";
});把这三段分别贴进三个面板，右边立刻是一个能点的卡片。整个过程中你没有见过 npm、webpack，或者任何一份配置文件。
[图：编辑器三个面板与右侧即时预览]
预览不糊弄：真机尺寸、外框与缩放
预览区内置了一百四十多档设备尺寸，从主流手机、平板到 MacBook 和 iMac 的桌面视口都有。选中手机尺寸时，预览会带上设备外框——挖孔、药丸、侧键这些细节都在。写移动端页面时，你看到的是接近真机的画面，而不是一个缩小的桌面窗口。
预览支持 25% 到 200% 的缩放，长页面和大画布都能看全；安全区域（刘海、手势条）也能按真机参数叠加显示，做适配时不必真机在手边。
从模板开始，不从空白开始
不想面对空文件的话，编辑器里带了 25 个官方模板：React、Vue、Preact、Tailwind CSS、Swiper、GSAP、Motion、three.js、p5.js、D3、Plotly、Lottie 等等，CDN 已经接好，选中就能在预览里跑起来。
学一个新库，最贵的往往不是库本身，而是把它跑起来的第一分钟。模板把这分钟省掉了。
[图：模板选择菜单]
编辑器的手感：补全、控制台和「问 AI」
三个面板用的都是 Monaco——VS Code 的编辑器内核，快捷键、多光标、命令面板都在。在此之上，我们补了一些 playground 通常不会给你的东西：
CSS 里写属性名和属性值都有补全，backdrop-filter 这类新属性也在；
HTML 里写 class 时，Font Awesome、Remix Icon 等图标库的类名能直接补全；
写 jQuery 时，API 的悬停文档和签名提示是中文的；
预览自带控制台，console.log 和报错都在页面里看，不用另开 DevTools。
控制台的报错旁边有一个「问 AI 诊断此错误」按钮。它调用的模型由你自己配置（自己的 API key，或本地 Ollama），凭据只存在你的浏览器里，Pixorla 服务端不经手。
保存与分享：短链、Fork 与 Explore
没登录也能写：内容会自动存成浏览器本地草稿，两小时内回来接着改。登录后（支持 GitHub 一键登录）保存到云端，得到一个 /f/ 开头的短链，发给别人就能打开。
每件作品可以选公开，或不列入列表（unlisted）。公开的作品任何人都能一键 Fork——在别人的结构上改着玩，是学前端最快的方式之一。也可以去 Explore 逛逛大家的公开作品，看到喜欢的直接 fork 下来拆解。
桌面端：Pixorla Browser
更喜欢原生应用手感的话，Pixorla 还有桌面端 Pixorla Browser，提供 macOS、Windows 和 Linux 安装包，入口在下载页。
免费与 Pro 的边界
写作、保存、分享、Fork、收藏，乃至接入自己的图床上传配图（Cloudinary / Chevereto，BYOK），都在免费版里。Pro 主要补隐私和整理：私有作品、私人笔记、合集整理、去广告。
换句话说：创作和分享的完整链路，不花钱。
介绍就到这里。下一步建议直接动手：打开编辑器，把上面那个小卡片贴进去，改一个颜色、换一句文案——五分钟后，你就会有自己的第一件 Pixorla 作品。遇到问题，可以去帮助中心查。
