Molecule

A lightweight Web IDE UI Framework

The Molecule is a lightweight Web IDE UI framework which is built with React.js and inspired by the VSCode. We have designed the Extension APIs similar to the VSCode, to help developers extend the Workbench in an easier way. It's convenient to integrate the Molecule with React.js applications. It has been applied to many products in DTStack

Online Preview

Features

Built-in the VSCode Workbench UI
Compatible with the VSCode ColorTheme
Customize the Workbench via React Component easily
Built-in Monaco-Editor Command Palette, Keybinding features
Support the i18n, built-in zhCN, and English
Built-in Settings, support to edit and extend via the Extension
Built-in basic Explorer, Search components, and support extending via the Extension
Typescript Ready

Installation

npm install @dtinsight/molecule
# Or
yarn add @dtinsight/molecule

Basic Usage

import React from 'react';
import ReactDOM from 'react-dom';
import { MoleculeProvider, Workbench } from '@dtinsight/molecule';
import '@dtinsight/molecule/esm/style/mo.css';

const App = () => (
    <MoleculeProvider extensions={[]}>
        <Workbench />
    </MoleculeProvider>
);

ReactDOM.render(<App />, document.getElementById('root'));

The extension is the Extension applications entry, more details about Extension, please read the Quick Start.

Document

Development

git clone git@github.com:DTStack/molecule.git

Clone the source code into your local

Development Mode

yarn # Install dependencies

yarn dev # Start dev mode

The Molecule using the Storybook to manage and develop the React components, the default visiting address is http://localhost:6006/.

Build & Preview

yarn build # Compile to ESM
yarn web # Web Preview Mode

We compile the source code into the ES6 modules and output to the esm folder. Besides the Storybook development mode, there also builtin a Web Preview mode using the ESM modules.

Contributing

Refer to the CONTRIBUTING.

License

Licensed under the MIT license.

kelh93/molecule