# Overview Monaca Cloud IDE is a browser-based development environment. Right on your web browser, all your Cordova development can be done without any setup. On this page, we will describe the Graphic User Interface (GUI) of the Monaca Cloud IDE. ## Menu bar ![](https://3091308003-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWe1U2tFctp8FkP9W8%2F-MffnwNZqJ1xJWqjQmNy%2F-MffoV52v2mQvmLDroq3%2Fimage.png?alt=media\&token=d5574dc1-159a-4dd1-bfa0-ff635fed8f88) The main menu bar contains the following submenus: | Menu Item | Description | | ----------- | ----------------------------------------------------------------------------------------------------------------- | | `File` | Shows the [File](#file) sumbmenu. | | `Edit` | Shows the [Edit](#edit) submenu. | | `View` | Shows the [View](#view) submenu. | | `Run` | Shows the [Run](#run) submenu. | | `Build` | Shows the [Build](#build) submenu. | | `Project` | Shows the [Project](#project) submenu. | | `Configure` | Shows the [Configure](#configure) submenu. | | `Backend` | Opens the [Monaca Backend](https://en.docs.monaca.io/products_guide/monaca_ide/broken-reference) in a new window. | | `Help` | Shows how to find help during the development. | ### File | Menu Item | Description | | --------- | ---------------------------------------- | | New File | Creates a new file. | | Save | Saves the currently open file. | | Save All | Saves all the currently open files. | | Upload | Uploads the files in the current folder. | ### Edit | Menu Item | Description | | ---------------- | --------------------------------------------------- | | Undo | Undoes the latest action. | | Redo | Redoes the previous action. | | Search | Searches for a string in the currently open file. | | Replace | Replaces a found string in the currently open file. | | Search All Files | Searches through all the project files. | | Comment | Comments out/in the current line. | ### View | Menu Item | Description | | ------------ | --------------------------------------------------- | | Debugger Tab | Shows/Hides the debugger tab | | Reset Layout | Resets the IDE's layout to the default arrangement. | ### Run | Menu Item | Description | | --------------------- | -------------------------------------------- | | Show Preview Tab | Opens the previewer. | | Run on Device | Runs the project on the Monaca Debugger. | | Setup Monaca Debugger | Installs the Monaca Debugger on your device. | ### Build | Menu Item | Description | | --------------------- | ---------------------------------------------------------------- | | Build App for Android | Builds the app for an Android device. | | Build App for iOS | Builds the app for an iOS device. | | Build App for Windows | Builds the app for a Windows device. | | Build History | Shows the build history of the current project. | | CI History | Shows the continuous integration history of the current project. | ### Project | Menu Item | Description | | ------------------- | --------------------------------------------------------------------------- | | Commit | Commits the local changes. | | Show Commit History | Shows the commits history from Monaca Cloud IDE. | | Pull | Pulls the remote changes. | | Push | Pushes the local changes to the remote server. | | Show Remote History | Shows the commits history in the remote server. | | VSC Configure | Configures the remote repository. | | [Share](#share) | Invites other Monaca users to join the project. | | Export | Exports the project. | | Publish | Makes the current project public (see [Publish Project](#publish-project)). | For more information to enable vision control on your project, please refer to [Version Control](https://en.docs.monaca.io/products_guide/monaca_ide/version_control). ### Configure | Menu Item | Description | | ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | App Settings for Android | Configures Android app’s information (see [Configure Android App](https://en.docs.monaca.io/products_guide/build/build_android#step-1-configure-an-android-app)). | | App Settings for iOS | Configures iOS App’s information (see [Configure iOS App Settings](https://en.docs.monaca.io/products_guide/build/ios/build_ios#configure-ios-app-settings)). | | App Settings for Windows | Configures necessary information to build a Windows app (see [Configure Windows App Settings](https://en.docs.monaca.io/products_guide/build/electron/build_electron_windows#step-1-configure-the-app)). | | Cordova Plugin Settings | Enables/Disables Cordova plugins in the current project (see [Cordova Plugins](https://en.docs.monaca.io/products_guide/monaca_ide/dependencies/cordova_plugin)). | | JS/CSS Component Settings | Adds/removes JavaScript and CSS libraries to/from the current project (see [JS/CSS Components](https://en.docs.monaca.io/products_guide/monaca_ide/dependencies/components)). | | Service Integration Settings | Integrates services to Monaca projects in the form of plugins (see [Service Integration](https://en.docs.monaca.io/reference/service_integration)). | | Continuous Integration | Automates building and deployment cycles (see [Monaca CI](https://en.docs.monaca.io/products_guide/monaca_ide/monaca_ci)). | | Deploy Service | Adds/Removes deployment services for Monaca CI (see [Deployment Services](https://en.docs.monaca.io/products_guide/monaca_ide/monaca_ci/supported_services)). | | Workspace Configuration | Configures the appearance of the code editor. | ## Publish a project This feature allows you to make your project available to other users by sharing the link generated after publishing your project. By accessing the generated link, users can get a copy of their own on their account. All changes made in the copies are not transferred to the original, so there will be no fear of someone messing up the original. Publishing your project is really easy and done by following these steps: 1. From the Monaca Cloud IDE menu, go to **Project → Publish**. 2. Click **Publish**. ![](https://3091308003-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWe1U2tFctp8FkP9W8%2F-MffsMhfea1DapyOqo8k%2F-MffsYyQekBA4ADhnbFC%2Fimage.png?alt=media\&token=b61760ce-6944-4b85-b7ef-c27091e482d8) 3\. Use the generated link to share your project. ![](https://docs.monaca.io/images/monaca_ide/manual/overview/15.png) {% hint style="info" %} If you no longer wish for your project to be available, you can make it private again by clicking the **Make Private** button that appears after publishing your project. {% endhint %} ## Direct import With this feature, we allow Monaca users to directly import published Monaca projects or projects from a given URL directly by just accessing a link. Upon accessing the link, the users will be forwarded to the following screen (if signed in), whereby just clicking the import button the project will be imported onto their account. ![](https://3091308003-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWe1U2tFctp8FkP9W8%2F-MffsMhfea1DapyOqo8k%2F-MfftAlV3z-E2mL6PZOm%2Fimage.png?alt=media\&token=33f64841-70fa-4df9-8f4b-8992f70af607) ## Debugger tab Once Monaca Debugger is connected with Monaca Cloud IDE, you can do console debugging as well DOM inspection in this panel. For more information, please refer to [Monaca Debugger with Monaca Cloud IDE](https://en.docs.monaca.io/products_guide/debugger/debug). ![](https://3091308003-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWe1U2tFctp8FkP9W8%2F-MffsMhfea1DapyOqo8k%2F-MfftPtiQ_jzT6tSlkSN%2Fimage.png?alt=media\&token=5b241261-ef7a-4e57-8e55-1175672b29c1) ## Preview log tab `Preview Log` tab is a terminal window for running a HTTP service to provide content in the previewer. ![](https://3091308003-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWe1U2tFctp8FkP9W8%2F-MfftbwP9bL6qBpo3sn6%2F-MfftjwKmHv5rA_G_ETE%2Fimage.png?alt=media\&token=54bc3bb6-5da3-48a2-a316-b289159a1bff) ## Previewer The previewer provides an overview of your app in real-time. You can also interact with the previewer as if it is running on an actual device with the limitation of executing the specific device’s functionality (such as camera, contact and so on) and cross-origin network AJAX request. Along with the Monaca Debugger, you will have effective and efficient experiences during the app development. In this tab, you can: * Refresh the previewer. * Change the display of the device's screen in that tab. You will see a drop-down list of different devices such as iPad, iPhone, and Pixel. You can change the orientation of the screen as well. * Detach/attach the previewer. ![](https://3091308003-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWe1U2tFctp8FkP9W8%2F-MfftbwP9bL6qBpo3sn6%2F-Mffu13TO8RuG8UdTJWC%2Fimage.png?alt=media\&token=833b32c8-24c0-4307-947d-d517cf11ff82) ### Previewer limitations When using the previewer, you should be aware of the following limitations: * Cordova plugin APIs are not available. * Ajax requests will fail because of the Cross-origin restriction. However, it can be done if server-side scripts return `Access-Control-Allow-Origin` header (i.e., Cross-Origin Ajax Request is permitted). * Viewport appearance may differ from real devices. ## Share {% hint style="info" %} The usability of this function depends on your Monaca subscription plan. For more information, please refer to [Monaca Subscription Plans ](https://monaca.mobi/en/pricing). {% endhint %} The *Share* function allows you to: * **Manage the team:** add/remove members to the shared project. * **Share the source code with multiple people** (members are assigned as developers). There are 3 ways to do it: 1. The easiest way is to use Monaca Cloud's Team Management function. Then, two or more people can open the same project in different Monaca Cloud IDEs. However, if there is any conflict while updating the project, the previous version of the project will be overwritten. 2. Another way is to set up a version control system and do the local development using [Monaca Localkit](https://en.docs.monaca.io/products_guide/monaca_localkit) or [Monaca CLI](https://en.docs.monaca.io/products_guide/monaca_cli). This requires a higher skillset, but it is more collaborative. * **Let multiple people to test the project** (members are assigned as testers). {% hint style="info" %} If you want to join a team and edit the project files, you need to subscribe to a valid plan. Otherwise, you can only join as a tester. Please refer to [Monaca Subscription Plans](https://monaca.mobi/en/pricing). {% endhint %} ### Sharing a project In order to share and manage the members of your project, please do as follows: 1. From the Monaca Cloud IDE, go to **Project → Share** . 2. The Share Project dialog will appear. To add a member, input the emails of your team members. Please enter one email address per line. You can also assign the role of each member as a developer or a tester by choosing from the drop-down menu. Then, click the **Add User** button to send the invitation to them. ![](https://3091308003-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWe1U2tFctp8FkP9W8%2F-Mffvh2dIkDpesubVbX1%2F-Mffw_c7D7F_afbhHKwn%2Fimage.png?alt=media\&token=596a6d5b-2b28-443a-9b53-3a67cee84ece) 3\. To remove a member from the project, just click the :heavy\_multiplication\_x: icon at the end of the row and then click **OK**. ![](https://docs.monaca.io/images/monaca_ide/manual/overview/remove_user.png) ## Code editor Monaca uses the [Monaco editor](https://microsoft.github.io/monaco-editor/) because of various reasons such as: * a robust auto-completion system that can be expanded with the use of a language server that provides support for TypeScript, HTML, JavaScript and [Onsen UI](https://onsen.io/). And more to come such as React and Vue. * basic syntax colorization * rich intelliSense & validation {% hint style="info" %} Please refer to [Editor Shortcuts ](https://en.docs.monaca.io/products_guide/monaca_ide/editor)for the list of all the shortcuts available in the Monaca code editor. {% endhint %} ![](https://3091308003-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWe1U2tFctp8FkP9W8%2F-MffxasSZDMMZwAvxCjZ%2F-Mffxhlh_4JZJsQE0v8V%2Fimage.png?alt=media\&token=1f85b7eb-445d-4a01-a6ff-ef16bebe5cf8) If you want to search within the current editor, press `Cmd+F` or `Ctrl+F`. The following dialog will appear: ![](https://3091308003-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWe1U2tFctp8FkP9W8%2F-MffxasSZDMMZwAvxCjZ%2F-MffxkhhvNKWKZp-xdWL%2Fimage.png?alt=media\&token=8848b14b-9839-4d5f-8647-70b3a54f60ec)