XWebIDE Application

Last modified by Admin on 2022/02/28 00:21

cogAn IDE which allows user to create projects in XWiki.
Developed by

Yann Flory

Active Installs17
5 Votes
LicenseGNU Lesser General Public License 2.1

Installable with the Extension Manager


The XWebIDE is a tool which can be used to develop new applications in XWiki or to edit existing pages in the wiki.

Project creation

To use it, go to the page "WebIDE.WebHome" (you can use the XWebIDE icon in the application bar if you have it) and click on Add a project.
Firstly, you have to choose a name for the project, and a "code" space where the technical pages will be stored :


Then, you can Create an empty project directly or, if you want to add existing spaces or pages in your project, click on Add files to the project. Here you can add entire spaces which will be considered as folders in the project. Every page of the selected spaces will be part of the project:


Finally, you can also add additional pages if you don't want their entire space to be in the project:


Once you have clicked on Create the project, you will be redirected to the master page of your project. That page contains the hierarchy of your project with all files in it.

Logical and physical views

The hierarchy can be displayed in two different ways :

  • The physical view where the content is displayed like in XWiki : you can find the list of spaces and pages in your project, with the wiki, object and class editors
  • The logical view where the content is displayed depending oin the type of page : Classes, Content pages, JavaScript, CSS, etc...


From the hierarchy, you can :

  • Physical view
    • Add folders or existing pages in your project ("Add new...")
    • Create new pages ("+" in the menu)
    • Remove a folder or a single page from your project ("X" in the menu) : the content won't be deleted from the wiki
    • Rename a page in your project (pencil in the menu)
  • Logical view
    • Add folders or existing pages in your project ("+" in the menu)
    • Create new pages : Content pages (a classic page where you can write anything) or Item pages (if you have a class with a sheet in your project, an Item page is a page with an object from that class)
    • Create new classes
    • Add sheet/JS/CSS to a page
    • Add global JS/CSS : a JS or CSS object with "wiki" scope stored in the "JS" or "CSS" page in the code space
    • Add a macro : a page stored in the code space containing a macro object and parameters
    • Add a translation : a document in the code space where you can add different languages and write translation keys



The main part of your browser is filled with the editor (wiki, object or JS/CSS code).
At the top, you can find the tab bar. You can open as many tabs as you want and save them all at once. If a tab has unsaved content, a star will appear in the top-left corner.
The right side of the editor contained "Advanced" fields for the page or the object.
At the bottom, you can find the various actions alreayd existing in XWiki (Save & continue, Save & view, etc...). You can also remove completely a page from XWiki (Wiki/Object editor) or remove an object from a page (JS/CSS editors).

Some other features of the WebIDE:

  • Check for unsaved content when the page is closed (intentionnaly or not)
  • Memorize your opened tabs when you leave the WebIDE
  • Auto-completion and Syntax Highlighting applications can be installed
  • Export the whole project in a .xar file


  • Search
    • Ctrl + F : Search (first result)
      • Ctrl + G or F3 : Find next result
      • Ctrl + Shift + G : Find previous result
    • Alt + F : Persistent search (the search box stays opened after first result)
      • Enter : Find next result (persistent search)
    • Tab : 2-spaces indentation
    • Shift + Tab : Automatic indentation
  • From XWiki
    • W : Open the WebIDE with the current page. If the page is in a project, the project will be opened, else the page will be in an empty "default" project.
  • From the editor
    • Save & View : Alt + S
    • Save & Continue : Alt + Shift + S
    • Discard & View : Alt + C
    • View in a new tab : Alt + Shift +C Your browser may prevent the WebIDE from opening a new tab with the shortcut. To use it, you have to allow the site to open pop-up in your browser.
    • F5 : reload the page and stay in the same tab

Prerequisites & Installation Instructions

We recommend using the Extension Manager to install this extension (Make sure that the text "Installable with the Extension Manager" is displayed at the top right location on this page to know if this extension can be installed with the Extension Manager). Note that installing Extensions when being offline is currently not supported and you'd need to use some complex manual method.

You can also use the following manual method, which is useful if this extension cannot be installed with the Extension Manager or if you're using an old version of XWiki that doesn't have the Extension Manager:

  1. Log in the wiki with a user having Administration rights
  2. Go to the Administration page and select the Import category
  3. Follow the on-screen instructions to upload the downloaded XAR
  4. Click on the uploaded XAR and follow the instructions
  5. You'll also need to install all dependent Extensions that are not already installed in your wiki

Release Notes





Dependencies for this extension (org.xwiki.contrib:application-webide-ui 1.9):

Get Connected