web-maker

chinchangMIT活跃维护

一款离线可用的极速前端代码编辑器，支持 HTML/CSS/JS 实时预览，可作为 Chrome 扩展或网页应用运行，方便快速搭建和调试前端原型。

A blazing fast & offline frontend code editor

v7.0.0发布于 2026-03-26 18:50 UTC2,707star327fork同步于 2026-11-10 11:43 UTC

前端代码编辑器离线编辑实时预览代码沙箱 Chrome扩展

对比 GitHub 官网 chrome-extension chrome-tabs code-editor offline playground

怎么上手

由 README 提炼，执行前请确认

原文

打开 https://webmaker.app/create/ 直接使用；或从 Chrome 网上应用店安装 Web Maker 扩展

硬件要求按 README 说明

README 未说明硬件要求；作为浏览器端工具，可直接在 Chrome 中打开网页版或安装 Chrome 扩展使用

下载：源码 zip·GitHub Releases（安装包）本站不镜像安装包

项目说明

由 README 自动翻译提炼

没人工点评？写下你的经验

完全跑在本地的离线前端代码实验场，比 CodePen 更快，断网也能用

一款离线可用的极速前端代码编辑器，支持 HTML/CSS/JS 实时预览，可作为 Chrome 扩展或网页应用运行，方便快速搭建和调试前端原型。

核心能力

支持 Pug、Markdown、SCSS、LESS、Stylus、TypeScript、CoffeeScript 等预处理器
完全离线运行，所有代码在本地系统执行
内置 Console 与代码自动补全
支持多人协作模式与本地/云端资源托管
可导入导出全部作品，并另存为 HTML 文件

容易踩的坑

部分功能（如新标签页打开、预览截图）仅在 Chrome 扩展版中提供；网页版与扩展版功能不完全一致；离线使用需先通过网页或扩展加载应用

内容由模型根据 README 生成，可能不完整或不准确，以官方文档为准。看原文 README

最近发版

5 个版本v7.0.0

全部 release

v7.0.0v7.0.0 - Bloomy Bee最新正式版2026-03-26 · 2026-03-26 18:50 UTC
7.0.0
- Local Assets: Add images, scripts, and other files from your machine and use them in your creations — available to all users, no PRO required
- Babel Updated: ES6 (Babel) mode now uses Babel 7 with modern JavaScript support
Older versions (4.0.0+)
- Tabbed Layout: New layout option where the 3 code panes show as tabs instead of side-by-side
- Keyboard Shortcuts: Ctrl/Cmd + Alt/Opt + 1/2/3 to switch focus between HTML, CSS, JS panes; Ctrl/Cmd + Alt/Opt + 0 to focus the preview
- New Languages: Chinese, French, German, and Dutch language support
- Minimize Panes: Code panes now have a minimize button
- Collections: Organize saved creations into named collections — filter, rename, and delete collections
- Collab Mode (PRO): Real-time collaboration on creations with shareable session links
- Light Theme: Whole app interface switches to light theme when selected
- Editor Theme Preview: Preview editor themes when changing from Settings
- Feedback Board: Submit suggestions and upvote what you like
- Assets Inlining in "Save as HTML": Option to inline all external assets (images, audio, video) into the HTML file for offline sharing
- Extension MV3 Migration: Chrome extension migrated to Manifest V3 — JavaScript is working again in the extension
- Kaboom Game Engine: Kaboom.js available in quick-add library list with a new quick-start template
- PRO Plan: Monthly/annual subscription and lifetime pricing
- Share Creations: Make creations public to share with the world (1 free, unlimited with PRO)
- Asset Hosting (PRO): Upload and host images, CSS, and JS files inside Web Maker
- Unlimited Files Mode (PRO): Create unlimited creations in Files mode
- Fork button available in the header
- Web app moved to webmaker.app/create
- Console open state preserved across refreshes
- Localization: Hindi and Spanish language support added
- Tailwind CSS added to popular libraries list
- Override settings via query parameters (autoPreview, isMonacoEditorOn)
v4.0.0Quad Quacks2019-03-19 · 2019-03-19 17:54 UTC
查看更新说明
This release is called "Quad Quacks, because it's 4.0 people! This major version brings a lot of awesome features, improvements and bug fixes with it.

Sit tight, because this is going to be some amazing set on updates for you! Read blog post about Web Maker 4.0 -> https://medium.com/web-maker/web-maker-4-0-e8e442b5a2db
- 🏠 New Home: First of all, Web Maker has a new home - https://webmaker.app 😀 The old website will continue to run for a month or so, but will eventually start redirecting to the new website. If you have an online account in Web Maker, you need not worry. But if you have some locally saved creations, you should export them and import here.
- 📁 Files Mode: Hear this - you can now work with files just like you do in your local environment! No more working in just 3 panes. Try creating a new creation. "Files Mode" is in beta and you can currently only save 2 creations in this mode.
- 🎨 Command Palette: We all love this, don't we? Taking frequent actions is now much quicker with the all new Command Palette. Hit Ctrl/Command+Shift+P, and give it a spin.
- 🔥 Improved Console: Console inspection becomes more powerful. You can view nested objects, arrays and even DOM Elements!
- ✏️ Monaco Editor: You can choose to use Monaco instead of CodeMirror editor from the settings. Though this is still an experimental feature and might contain bugs.
- 💄 Prettier: Format your code with everybody's favourite Prettier.
- 🖥 Preview dimensions: You can see the preview frame dimensions when resizing.
- 🖥 Settings: Settings screen got a complete makeover and now it's much easier to find what you are looking for. ♿️ Accessibility: The app is now more accessible than ever. There are significant improvements mainly in the area of keyboard navigation.
v3.6.0Tapir Tajon2018-11-16 · 2018-11-16 19:08 UTC
查看更新说明
- New Setting: Configure if you want to auto-close the tags in HTML. (#347)
- Prettier: Prettier now works on HTML also! Also the keyboard shortcut has been changed to Ctrl + Shift + F.
- No more anonying alert on opening Web Maker in multiple tabs. Thanks team Firebase :) (#340)
- 🔥 Web Maker 4.0 is coming! Follow Web Maker on Twitter to keep up with all the exciting updates.
v3.4.2Alligator Almond2018-09-29 · 2018-09-29 15:12 UTC
查看更新说明
- 🚀 RxJS added to popular libraries list. Thanks @jpsc
- 🔧 Bugfix: Not able to select libraries twice with mouse click in Add Library modal.
- 🔧 Bugfix: Console going outside the viewport on huge logs.
- 🔧 Bugfix: Console dissapearing in detached mode on changing layouts.
- [Dev]: Improve contribution guide and add issue template on Github.
v3.4.0Jungle Jellyfish2018-07-31 · 2018-07-31 20:27 UTC
查看更新说明
- 🎉 Js13kGames Mode: For all you Js13kGames compo participants out there. Turn it on from Settings. Read more about it -> https://medium.com/web-maker/js13kgames-jam-with-web-maker-a3389cf2cbb
- 🎉 Templates: Presenting, templates for major libraries and frameworks. Hit the "New" button to explore.
- ♿️ Accessibility: Add missing focus rings around focusable element.
- 🖥 Interface: Migrate remaining interface elements to dark theme. Now complete app is in dark theme.
- 🔧 Bugfix: Fix "Save as HTML" and "Take Screenshot" features in Chrome extension.

用户点评

登录用户的真实使用记录，可按版本和硬件筛选

共 0 条

还没有人点评。第一个说出真实体验的人最有价值。

README 原文

未翻译

在 GitHub 打开

Web-Maker 🕸🛠

Web-Maker is an offline playground for your web experiments. Something like CodePen or JSFiddle, but much more faster and works offline because it runs completely on your system.

Open Web App (Recommended: More features. More fun!)

Install Chrome extension

Screenshot

Features

Supports Preprocessors: HTML (Pug & Markdown), CSS (SCSS, LESS & Stylus, Atomic CSS) & JavaScript (ES6, TypeScript & CoffeeScript)
Works offline
Quick creation (3-panemode) & good-old Files mode
Inbuilt Console
Multi-player collab mode
Asset hosting (Local and Cloud storage)
Save and load your creations
Auto-save feature
Code auto-completion
Easy addition of popular JS & CSS libraries
Import & Export all creations anytime, anywhere
Multiple editor themes & other configurable settings
Font options + use any system font!
Very easily accessible. Simply open a new tab in Chrome! (in chrome extension only)
Multiple layouts to choose from
Capture preview screenshot (in Chrome extension only)
Save as HTML file
Edit in CodePen

Follow @webmakerApp for updates or tweet out feature requests and suggestions.

Support Web Maker

Hi! I am Kushagra Gour. Web Maker is a free and open-source project. To keep myself motivated for working on such open-source and free side projects, I have launched a Patreon campaign. Your pledge, no matter how small, will act as an appreciation towards my work and keep me going forward making Web Maker more awesome🔥.

Support with $ETH - 0x39989c0E53cfdcF6792e09d7573c65E911e774bA

If not that, you can support by simply sharing about how much you love 💖 @webmakerapp.

License

MIT Licensed