ColsIDX Code Editor is a powerful online Integrated Development Environment (IDE) that supports JavaScript, JSX, and imports from npm, including popular libraries like React. Built with React, Redux, TypeScript, esbuild, and WebAssembly, this IDE provides a seamless coding experience with features like live preview and Markdown editing.

• iDX Code Editor/ IDE (colsidx)
  • Version: 1.1.21
  • NPM: @colsidx
  • Table of Contents
  • Features
  • Architecture
  • Getting Started
    • Installation
  • Usage
  • Project Structure
  • Technologies Used
  • License
  • Screenshots

• Language Support: JavaScript, JSX, Markdown.
• Import from npm: Easily import and use npm packages like React and more.
• Live Preview: See your changes in real-time with the live preview feature.
• Save and Share: Save your coding documents, making it easy to revisit and share your work.

The ColsIDX Code Editor is designed with a modular and extensible architecture. Here's an overview of the key components:

• Frontend: Built with React and Redux, the frontend handles the user interface and state management.
• Bundler: Utilizes esbuild and WebAssembly for efficient bundling of code, including support for fetching npm packages.
• Server: Manages backend operations such as saving and fetching coding documents.

For a detailed breakdown of the project structure and how these components interact, refer to the Project Structure section.

To execute ColsIDX Code Editor, use the following command:

1. Execute iDX:

$ npx colsidx serve <file-name>.js

iDX creates the file in the current working directory. The data then will keep persisting unless we stop the server!

Help command:

$ npx colsidx -h

Explore the power of iDX 🔥

$ npm i -g colsidx
$ colsidx serve idxstarter.js

Visit https://localhost:4004 in your browser to access the ColsIDX Code Editor.

More on commands: NPM colsidx

1. Open the code editor in your browser.
2. Start coding in JavaScript, JSX, or Markdown.
3. Utilize the live preview feature to see your changes instantly.
4. Save your coding documents for future reference or sharing.

The project is structured using Lerna for managing multiple packages. The key packages include:

• local-client: Frontend code built with React and Redux.
• bundler: Code bundling functionality using esbuild and WebAssembly.
• server: Backend server handling document storage and retrieval.

For a more in-depth understanding, refer to the Project Structure documentation.

• React
• Redux
• TypeScript
• esbuild
• WebAssembly
• Lerna

This project is licensed under the MIT License.