Web前端在线编写代码IDE

1、codesandbox.io（国外）

网址：https://codesandbox.io/

        CodeSandbox 专注于构建完整的 Web 应用程序，支持多种流行的前端框架和库，例如 React、Vue 和 Angular。它提供了一系列增强的功能，包括自动保存、版本控制和调试工具，这些功能旨在提高开发的便利性和效率。尽管其社区功能相对较小，CodeSandbox 仍非常适合于分享和协作完整的项目和应用程序，尤其是在需要展示全面项目结构和功能时。

2、CodePen （国外）

网址：https://codepen.io/ CodePen

        专注于创建和共享前端代码片段、原型设计和小型项目。它的界面简洁直观，便于快速编写 HTML、CSS 和 JavaScript 代码，并提供实时预览功能。CodePen 集成了编辑器和预览窗口，使得前端代码的编写和展示变得更加轻松。此外，它还支持诸如创建收藏夹、团队项目以及添加笔记等高级功能。CodePen 拥有一个活跃的用户社区，这使得用户可以轻松分享自己的作品，发现他人的代码创意，并通过评论和点赞等方式与其他用户进行互动。

3、Stackblitz （国外）

网址：https://stackblitz.com/

        是一个在线的开发环境，主要用于前端和全栈 Web 应用的开发。它提供了一个快速、实时的编程体验，允许开发者直接在浏览器中编写代码、预览应用，并与他人共享他们的项目。StackBlitz 支持多种流行的 Web 技术和框架，如 React、Angular、Vue.js 以及 Node.js，并集成了现代的开发工具。它的界面类似于 Visual Studio Code，为用户提供了一个熟悉且功能丰富的编码环境。由于其便捷性和易用性，StackBlitz 在 Web 开发者中非常受欢迎，特别是对于快速原型开发和教学目的。

4、playcode（国外）

网址：https://playcode.io/

只是一个简单的工具，用于快速构建原型和查看编码结果。该工具具有典型的三窗口布局: 代码编辑器、控制台和结果视图。该产品有一个基本的文件结构，但没有版本控制和其他 IDE 特性。 它只支持 Javascript，HTML 和 CSS。还有一个选项可以选择编辑器样式、字体大小和其他文本编辑功能。

5、Codeanywhere （国外）

网址：https://codeanywhere.com/

        "Codeanywhere" 是一个基于云的开发环境，提供了一种方便、可访问的方式来编写、运行和协作开发代码。它支持多种编程语言和框架，并允许用户通过浏览器或移动设备访问其开发环境。主要特点包括：

        跨平台访问：由于是基于云的，用户可以在任何设备上通过网络浏览器访问他们的开发环境。

多语言支持：支持多种编程语言，包括JavaScript、Python、PHP等

6、JSFiddle （国外）

网址：https://jsfiddle.net/

        JSFiddle 是一个流行的在线代码编辑器，主要用于前端开发，尤其是在HTML、CSS和JavaScript方面。它允许开发者在一个简洁的界面中编写和测试代码，并实时查看结果。下面是一些关于JSFiddle的主要特点： 实时预览：编写代码时，可以实时查看HTML、CSS和JavaScript的变化效果。 多种语言支持：除了基础的HTML、CSS和JavaScript之外，JSFiddle还支持各种JavaScript库和CSS预处理器，如Vue、jQuery、React、SCSS等。

7、Replit(国外)

网址：https://replit.com/

        "Repl.it"（现在称为 "Replit"）是一个强大的在线编程环境，支持多种编程语言和工具。它为编程教育、协作编码以及快速原型开发提供了便利的平台。以下是Replit的一些关键特点： 多语言支持：Replit支持多种编程语言，包括Python、JavaScript、Ruby、C++等，适用于各种编程任务。

8、Codeply

网址：https://www.codeply.com/

"Codeply" 是一个面向前端开发的在线编辑器和界面设计工具。它特别适用于响应式网页设计和前端框架的交互式开发。Codeply提供了一些独特的功能，使其在前端开发者中受到欢迎： 多框架支持：Codeply支持多种前端框架和库，如Bootstrap、Foundation、Materialize、Semantic UI等，这使得它成为跨框架开发的理想工具

9、Gitpod (国外)

网址：https://www.gitpod.io/

10、Plnkr (国外)

网址：https://plnkr.co/

"Plnkr"（通常读作"Plunker"）是一个在线代码编辑器，专门用于前端开发。它提供了一个简单易用的平台，允许开发者快速创建、编辑、保存和分享HTML、CSS和JavaScript代码。以下是Plnkr的一些主要特点：

11、inscode（国内）

网址：https://inscode.youkuaiyun.com/

"InsCode" 是一个在线编程、协作和分享社区，为编码爱好者提供了一个多功能且用户友好的平台。InsCode的主要特点包括： 无需安装：作为一个基于网页的平台，用户无需安装任何软件，使编程更加方便。 在线代码编辑器：提供支持多种编程语言的简单直观的代码编辑器，包括C、C++、Java、Python、JavaScript等。编辑器还支持多文件项目和标准文件操作。

11、Cloud Studio （国内）

网址：https://ide.cloud.tencent.com/

Cloud Studio 是基于浏览器的集成式开发环境（IDE），为开发者提供了一个永不间断的云端工作站。用户在使用 Cloud Studio 时无需安装，随时随地打开浏览器就能使用。