Molecule

Molecule 是一个轻量级的 Web IDE UI 框架,基于 React.js 构建,受 VSCode 启发,提供类似 VSCode 的扩展机制和 UI 自定义能力。

Check out Molecule on CurateClick

• Copy the embed code to showcase this product on your website

• Share on X to spread the word about this amazing tool

<div align="center"> <img src="https://user-images.githubusercontent.com/2766811/146497934-b619b3a0-dec9-44ef-805b-f69883107caf.png" width="20%" height="20%" alt="watchman-logo" /> <h1>Molecule</h1> <h3>A lightweight Web IDE UI Framework</h3>[![CI][ci-image]][ci-url] [![Codecov][codecov-image]][codecov-url] [![NPM downloads][download-img]][download-url] [![NPM version][npm-version]][npm-version-url]</div>[ci-image]: https://github.com/DTStack/molecule/actions/workflows/main.yml/badge.svg[ci-url]: https://github.com/DTStack/molecule/actions/workflows/main.yml[codecov-image]: https://codecov.io/gh/DTStack/molecule/branch/main/graph/badge.svg?token=PDjbCBo6qz[codecov-url]: https://codecov.io/gh/DTStack/molecule[download-img]: https://img.shields.io/npm/dm/@dtinsight/molecule.svg?style=flat[download-url]: https://www.npmjs.com/package/@dtinsight/molecule[npm-version]: https://img.shields.io/npm/v/@dtinsight/molecule.svg?style=flat-square[npm-version-url]: https://www.npmjs.com/package/@dtinsight/molecule[Molecule](https://dtstack.github.io/molecule/) 是一款受 **VSCode** 启发,使用 **React.js** 构建的 **Web IDE UI** 框架。我们设计了类似 VSCode 的**扩展**(Extension)机制,可以帮助我们使用 React 组件快速完成对 Workbench 的自定义。Molecule 与 **React** 项目集成非常方便,我们已经在 [DTStack](https://www.dtstack.com/) 多个产品、项目中使用。## 核心功能- 内置 React 版本的 Visual Studio Code Workbench UI- 基本兼容 Visual Studio Code 的 ColorTheme- 支持使用 React 组件自定义 Workbench UI 样式- 内置 Monaco Editor Command Palette、Keybinding等模块,并支持扩展- 支持 i18n,内置简体中文、English 2 种语言- 内置一个简单的 Settings 模块,支持在线编辑修改以及扩展- 内置默认的 Explorer, Search 等组件,并支持扩展- Typescript 支持## 与其他开源的 Web IDE 的区别?- Molecule 只是一个**单纯的 Web IDE UI 交互**框架,不涉及例如文件系统、版本管理、 LSP、DAP、Terminal 等更复杂的 IDE 功能,需要开发者自己手动实现- 基于 **React.js** 的组件库,更好的 UI 自定义能力, **React.js 应用**无缝接入- 基本兼容了 VS Code 上千种 **ColorTheme** 扩展## 场景- Web IDE 场景- 企业级的 React 客户端管理类应用- 类桌面端交互的 Web 应用- 编辑器,日志等应用- Electron 跨端应用等## 截图![image](https://user-images.githubusercontent.com/2766811/147039477-0e9bd5d9-5a87-4aa0-a9ff-764f863cb885.png)![image](https://user-images.githubusercontent.com/2766811/147039487-4ee23a4f-c3fa-42e6-a362-93e6219dc48a.png)

Latest Weekly Picks

make.ink favicon
Weekly Pick

Your AI tattoo generator for pro-grade concepts

Leo Wade
sellfy.com favicon
Weekly Pick

A code-free online store builder to turn views into revenue. Sell digital products, subscriptions, and merch, without fees or hassle.

Maris
www.videotoblog.ai favicon
Weekly Pick

Convert videos into awesome blog posts.

Video To Blog
www.sellerpic.ai favicon
Weekly Pick

SellerPic is the all-in-one AI design platform for e-commerce

SellerPic
fastimage.ai favicon
Weekly Pick

Fast Image AI instantly transforms your photos into stunning styles like Ghibli, Sketch, and Pixar. Effortlessly control image elements and create amazing effects with just one click.

Fast AI Team
linkedinpro.daisy.so favicon
Weekly Pick

AI-powered tool that transforms casual photos into professional LinkedIn headshots instantly. No photographer needed—just upload and download.

Gabriel
crevas.ai favicon
Weekly Pick

Crevas unifies Veo 3, Sora 2, Nano Banana and more into one intuitive canvas — so filmmakers can script, prompt, and generate cinematic stories without switching tools or losing consistency.

Spark Alpha
fotominiatur.com favicon
Weekly Pick

AI Foto Edit - Text to Image & Image Edit

foto miniatur