Creating and opening apps

The sidebar on the left-hand side of the WebIDE enables you to:

  • create a new app
  • open a packaged app
  • open a hosted app

Create a new app

Select "New App..." to create a new app. You'll see a dialog offering you a choice between three templates, "HelloWorld", "Privileged Empty App" and "Privileged App".

All three templates are from Mozilla's app template collection, and provide you with the basic structure you need to get started. The "Privileged App" shows how an app can use permissions to load cross-origin content.

Once you've selected a template you'll be asked to name the app and select a directory to store the files, and then the new app is opened in the project editor.

Open a packaged app

Select "Open Packaged App..." to open a packaged app. You'll be asked to select a directory containing the app's manifest, and the app will be opened in the project editor.

Open a hosted app

Select "Open Hosted App..." to open a hosted app. You'll be asked to enter a URL pointing to the app's manifest, and the app will be opened in the project editor.

Editing apps

The project editor provides an environment for editing apps. There's a tree view on the left of all the files in the app: you can add and delete files here using a context menu.

Just to the right of this tree view, there's an editor pane.

The app summary page

When you first open or create an app, the editor pane is occupied by the app summary page, which is as shown below:

You can always get back to the app summary page by clicking on the root of the tree on the left.

Manifest validation

WebIDE automatically checks the manifest for certain common problems. If it finds a problem it indicates that the app is invalid and describes the problem in the app's summary:

Of course, you can edit the manifest.webapp file right in the project editor as well.

The source editor

WebIDE uses the CodeMirror source editor.

Source editor shortcuts

This table lists the default shortcuts for the source editor.

In the Editor Preferences section of the developer tools settings, you can choose to use Vim, Emacs, or Sublime Text key bindings instead.

To select these, visit about:config, select the setting devtools.editor.keymap, and assign "vim" or "emacs", or "sublime" to that setting. If you do this, the selected bindings will be used for all the developer tools that use the source editor. You need to reopen the editor for the change to take effect.

From Firefox 33 onwards, the key binding preference is exposed in the Editor Preferences section of the developer tools settings, and you can set it there instead of about:config.

Command Windows macOS Linux
Go to line Ctrl + J Cmd + J Ctrl + J
Find in file Ctrl + F Cmd + F Ctrl + F
Find again Ctrl + G Cmd + G Ctrl + G
Select all Ctrl + A Cmd + A Ctrl + A
Cut Ctrl + X Cmd + X Ctrl + X
Copy Ctrl + C Cmd + C Ctrl + C
Paste Ctrl + V Cmd + V Ctrl + V
Undo Ctrl + Z Cmd + Z Ctrl + Z
Redo Ctrl + Shift + Z / Ctrl + Y Cmd + Shift + Z / Cmd + Y Ctrl + Shift + Z / Ctrl + Y
Indent Tab Tab Tab
Unindent Shift + Tab Shift + Tab Shift + Tab
Move line(s) up Alt + Up Alt + Up Alt + Up
Move line(s) down Alt + Down Alt + Down Alt + Down
Comment/uncomment line(s) Ctrl + / Cmd + / Ctrl + /

Code completion

When editing CSS and JavaScript, the editor provides autocomplete suggestions. CSS autocompletion is always enabled:

To display autocomplete suggestions in JavaScript press Control + Space:

Saving files

For changes to your files to take effect you need to save them. Files with unsaved changes get an asterisk next to their name in the tree view, and you can save files using the menu or Control+S (Command+S on Mac OS X).

Removing apps

To remove an app from WebIDE, go to the app summary page and click "Remove Project".

Document Tags and Contributors

Contributors to this page: wbamberg
Last updated by: wbamberg,