Welcome to the world of Molecule, a lightweight Web IDE UI framework built with React.js and inspired by Visual Studio Code (VSCode). This guide will walk you through the steps to get started with Molecule, as well as offer troubleshooting tips along the way. So let’s dive in!

What is Molecule?

Molecule is an innovative framework designed for developing web-based integrated development environments (IDEs). It allows developers to enhance their applications efficiently, leveraging the features and aesthetics of VSCode.

Features of Molecule

• Built-in Visual Studio Code Workbench UI
• Compatible with Visual Studio Code Color Theme
• Easy customization via React Components
• Integrated Monaco-Editor Command Palette and Keybinding features
• Internationalization (i18n) support, including Simplified Chinese, Korean, and English
• Built-in Settings for easy editing and extensions
• Basic Explorer and Search components included
• Typescript Ready

Installation

To install the Molecule framework, you need to choose between npm or Yarn as your package manager. Here’s how:

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

Basic Usage

Let’s get started with the basic usage of Molecule. Below, you will find a sample code snippet demonstrating how to set up a basic Molecule application:

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

const moInstance = create({ extensions: [] });

const App = () => moInstance.render(Workbench);

ReactDOM.render(, document.getElementById('root'));

Think of the code above as setting the stage for a play. It’s about creating your props (React components) and the backdrop (the Workbench UI) before the performance starts (rendering on the webpage). The `moInstance` acts like a stage manager that sets up everything needed for the show (your application) to run smoothly!

Documentation

For a deeper dive into the functionalities of Molecule, you can refer to the following documentation:

• Introduction
• Quick Start
• API
• Extend Workbench
• Examples

Development Mode

If you want to contribute to the Molecule project or develop your applications further, you can set up a development environment by following these steps:

git clone git@github.com:DTStack/molecule.git
yarn # Install dependencies
yarn dev # Start dev mode

By employing Storybook for managing and developing React components, you can preview your development at localhost:6006.

Testing and Building

To ensure that everything works as intended, run:

yarn test -u

To compile the application, use:

yarn build # Compile to ES6

And to preview it on the web, simply execute:

yarn web # Web Preview Mode

Troubleshooting Tips

Encounter any hurdles while using Molecule? Here are some common troubleshooting tips:

• Missing Dependencies: Ensure all required packages are installed. Running `yarn` or `npm install` again can help resolve missing issues.
• Rendering Issues: Double-check your setup code for typos, especially when calling `ReactDOM.render`.
• Extension Errors: Verify that your extensions are compatible with the current version of Molecule.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Conclusion

With Molecule, you hold the power to create a modern web IDE tailored to your requirements. Embrace the vast possibilities it provides and contribute to its thriving community.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.