WebIDE Lands in Nightly

Editor’s note: if you want to help test it on a recent nightly you can toggle the devtools.webide.enabled preference in about:config. The WebIDE is available today under Tools>Web Developer>App Manager and will be renamed in tomorrow’s Nightly into WebIDE.

If you’ve been following our Developer Tools series on the Mozilla Hacks blog, you’ve seen the developer tools evolve from pure inspection to a debugging environment both for web sites and apps on desktop and mobile. Today we want to introduce you to the next step of evolution: adding in-browser editing features across devices.


Developers tell us that they are not sure how to start app development on the Web, with so many different tools and templates that they need to download from a variety of different sources. We’re solving that problem with WebIDE, built directly into Firefox. Instead of starting from zero we provide you with a functioning blueprint app with the click of a button. You then have all the tools you need to start creating your own app based on a solid foundation. WebIDE helps you create, edit, and test a new Web application right from your browser. It lets you install and test apps on Firefox OS devices and simulators and integrates the Firefox Developer Tools for seamless debugging and inspection across those devices. This is a first step towards debugging across various platforms and devices over WiFi using open remote debugging APIs.

Readability app open in WebIDE

Getting Started

After opening WebIDE you start creating your new application with a few clicks. You choose from a set of example starter templates – and we’re working with the community to build a wide variety of additional examples. You can help creating templates by visiting https://github.com/mozilla/mortar.


Once you’ve started your project, you can edit the source files in WebIDE. Its integrated editor – based on the open source CodeMirror editor with the tern.js code analysis framework – gives you a simple but powerful editor for HTML, JavaScript, and CSS files.

Editing in WebIDE

While working with your web application manifest, the application validator will help you find common problems before submitting to the marketplace.

While this is enough for your basic editing needs, you might want to use your own preferred editor instead. To do this you can use a simple API which allows external editors to access all the advanced functionality of the tool – its runtime management, pushing applications to different devices and connecting Firefox Developer Tools. You can turn off our internal editor and leave WebIDE with a simple, clean interface for managing runtimes and validating applications. We want to make it easy for users of any code editor to sling their code around to various devices.

Packaged App Demo in WebIDE

Runtimes and Testing

When you’re ready to test your application, choose a runtime – we’ll install Firefox OS simulators for you or help you connect to your Firefox OS device. Once connected to a runtime, you can use the tools that you’re used to in desktop Firefox to try your application. You have the same sort of rapid iteration that makes developing for the desktop web simple – just hit Ctrl/Command+R to reload the application on your device or simulator. You can get information about the device and runtime and take screenshots.

Take a Look

You can see the WebIDE in action in this screencast

While we put on some finishing touches, WebIDE is checked into Firefox Nightly but is hiding behind a pref – if you want to help test it on a recent nightly you can toggle the devtools.webide.enabled preference in about:config:

Enabling WebIDE in Firefox Nightly

The Future: Developing for the Whole Web

At the heart of the WebIDE is the Firefox Remote Debugging Protocol. The Firefox Developer Tools team has put a lot of work into making sure all of our tools work on remote devices running over USB, but that’s really only the beginning. With WebIDE managing these connections we can use the Firefox Developer Tools – and any other tools that want to use our protocol – anywhere.

Right now this protocol is useful for Firefox Desktop, Firefox Android, and Firefox OS. But we aren’t stopping there. We’re working on a protocol adapter that will allow clients using the Firefox Remote Debugging Protocol – including the Developer Tools and WebIDE – talk to all mobile browsers, regardless of rendering engine or runtime. Our first targets are Chrome for Android and Safari on iOS.

This web-everywhere project isn’t yet ready for testing, but if you’re excited to get involved or see how it is being implemented, it currently lives at https://github.com/campd/fxdt-adapters.

If you’re building a tool and want to start playing with the protocol you can start now, developing against Firefox Desktop, Firefox Android, and Firefox OS. For information about the Remote Debugging Protocol, take a look at the documentation.

Thanks for reading. We look forward to hearing your feedback in the comments, on our UserVoice feedback channel and on Twitter @firefoxdevtools.

About Robert Nyman [Editor emeritus]

Technical Evangelist & Editor of Mozilla Hacks. Gives talks & blogs about HTML5, JavaScript & the Open Web. Robert is a strong believer in HTML5 and the Open Web and has been working since 1999 with Front End development for the web - in Sweden and in New York City. He regularly also blogs at http://robertnyman.com and loves to travel and meet people.

More articles by Robert Nyman [Editor emeritus]…


  1. Gregor

    Hey there, seems that the YouTube video is private?

    June 23rd, 2014 at 08:23
    1. Chris Heilmann

      My bad, fixed now.

      June 23rd, 2014 at 09:06
  2. Ian Bicking

    Reading the Remote Debugging Protocol, I feel like I’m missing whatever I need to know to actually establish a connection. How do I actually get access to this protocol?

    June 23rd, 2014 at 08:57
    1. Victor Porof

      Take a look at this https://github.com/harthur/firefox-client for an example use of the remote debugging API.

      June 23rd, 2014 at 10:25
  3. Unr

    But, does it vim?

    June 23rd, 2014 at 09:02
    1. rich

      Since they’re using Code Mirror, I would assume it could be implemented.

      June 23rd, 2014 at 09:42
      1. Guestinator 2000

        THat looks awesome!!!!!

        June 23rd, 2014 at 15:56
    2. Mihai

      Yes it does!

      Go to about:config, and change devtools.editor.keymap to vim.

      I think it also supports emacs and sublime.

      June 24th, 2014 at 04:58
    3. Tin Aung Lin

      You can use vim keymap in both WebIED and DevTools by modifying this flag in about:config

      flag: :devtools.editor.keymap
      default: “vim”

      Have fun.

      June 25th, 2014 at 22:39
  4. Rich

    Is this installed within the mac nightly? Its not showing in my developer menu.

    June 23rd, 2014 at 09:02
    1. Chris Heilmann

      It is – as explained in the post, it is behind a flag and you need to enable it: toggle the devtools.webide.enabled preference in about:config.

      June 23rd, 2014 at 09:06
      1. Fabio Venni

        Doesn’t show up for me either after having enabled the flag :(

        June 23rd, 2014 at 09:10
      2. Rich

        Hmm. Seems like it doesn’t show in the menu as “WebIDE” per the video, but maybe “App Manager”?

        June 23rd, 2014 at 09:12
        1. Chris Heilmann

          yes, that’s it.

          June 23rd, 2014 at 09:24
        2. Paul Rouget

          Today (monday) it appears as “App Manager”. It’s been rename to “WebIDE”, but will only appear tomorrow.

          June 23rd, 2014 at 09:26
          1. Rich

            Thanks! Sorry for the confusion.

            June 23rd, 2014 at 09:31
          2. Fabio Venni

            Thanks! all sorted

            June 23rd, 2014 at 09:38
  5. Mike

    I enabled webide in the about:config but it doesn’t show up in the Developer menu as WebIDE as it does in the video. Using nightly 33.0a1 (2014-06-23) on a Mac.

    June 23rd, 2014 at 09:14
    1. Caspy7

      Per the conversation above it is called “App Manager” but in tomorrow’s nightly will start showing up as “WebIDE”

      June 23rd, 2014 at 09:46
  6. Jitendra Vyas

    Is it like a Text Editor in Browser to replace Sublime Text, Vim etc? or it’s only to make App for firefox.

    I’m already working on a app which is based on ruby on rails. Can I use Web IDE for that instead Sublime Text?

    June 23rd, 2014 at 09:51
    1. Jeff Griffiths

      WebIDE does not support languages like ruby at this time – currently we only provide syntax highlighting for HTML, JS and CSS. If you currently use SublimeText or vim and you find ourself using WebIDE, you can enable experimental keymaps for those editors by opening about:config and set ‘devtools.editor.keymap’ to either ‘sublime’ or ‘vim’.

      June 23rd, 2014 at 18:11
  7. Commenter

    Just wondering, is there any technical reason why you’re using CodeMirror instead of Ace?

    June 23rd, 2014 at 10:43
    1. Jeff Griffiths

      We chose codemirror because we felt that the features, performance and extensibility compare to others such as ace were the best choice for us. Other popular tools such as chrome devtools and Brackets use codemirror, I assume for similar reasons.

      June 23rd, 2014 at 18:02
      1. Commenter

        Fair enough – I was just wondering, as Mozilla still has a hand in Ace (having been based off Bespin/Skywriter). But “best tool for the job” is definitely a good reason to use CodeMirror over Ace.

        Thanks for responding!

        June 24th, 2014 at 00:32
    2. Rob Campbell


      June 24th, 2014 at 11:03
  8. anonymous

    So, how long till we get mail client there? :}

    June 23rd, 2014 at 11:40
  9. Irtaza Ahmed Qureshi

    An excellent thing. Just used for testing. Really very impressing. (Y) Keep It Up MDN (Y)

    June 23rd, 2014 at 11:52
  10. fvsch

    Two questions:

    1. Provided a user makes use of the built-in editor, is there a point in having the devtools Style Editor at all?

    2. Are changes to CSS values made in the Inspector saved in the original stylesheets? That would allow for a workflow such as:
    a) Write some basic styles for part of a web app, a module, or an element.
    b) Test in a runtime or refresh the selected runtime.
    c) Inspect the result and tweak CSS properties and values from there.
    d) Save CSS changes from the Inspector, *on demand*.

    I understand that #2 is a technical challenge and it’s unlikely WebIDE has it. I’m mostly wondering if it’s under consideration. I know it’s been a far-fetched, often requested feature for the Firefox devtools (and the Chrome ones, and Firebug…) for ages, and one roadblock was that browsers couldn’t access the actual CSS files in most cases. Here, WebIDE does have access to the CSS files. One roadblock removed, only 2 or 3 left? ^^

    June 23rd, 2014 at 12:29
    1. Brian Grinstead

      1. For now, the Style Editor will give live updating while you type whereas the editor within the WebIDE will not. See this bug for information about enabling the live updating in WebIDE: https://bugzilla.mozilla.org/show_bug.cgi?id=1026674

      2. Not yet, but as you say this is something that’s very often requested and it would lead to a very nice workflow. We still have a couple of roadblocks in place. The first being syncing between style editor and inspector: https://bugzilla.mozilla.org/show_bug.cgi?id=984880.

      June 23rd, 2014 at 15:20
  11. Jhony

    Is this app only, or can we develop websites on it too?

    June 23rd, 2014 at 13:01
  12. Frustrated

    WHY? This solves nothing and only adds issues. Yes it’s cool. But what happened to the firefox’s original goal?? Which was to be a fast and functional browser?? All these recent changes are making things worse.

    Please give me a browser. I have tools for everything else. I just want firefox like it was. There will be no good browsers if FF keeps going the path it is.

    June 23rd, 2014 at 13:27
    1. Luke

      You’re assuming this will be part of the base Firefox install, not an addon or installation option.

      June 23rd, 2014 at 22:27
      1. Yelan

        Considering Firefox has been adding other web developer tools to the base install without an option, we can only assume this won’t be any different – and will bloat the browser more with stuff hardly anyone needs.

        June 28th, 2014 at 04:50
  13. Harry Moreno

    see now here’s a problem. Why isn’t there any narration in the screencast. You missed a perfect opportunity to make a much more engaging announcement if you had simply narrated the screencast once you guys were happy with the video. Small things like this make a difference when developers decide what tools to use. Google certainly does a better job of marketing their products.

    June 23rd, 2014 at 13:34
  14. Robert

    What happened to light fast browser? This could be a plugin. I guess we have come full circle.

    June 23rd, 2014 at 13:40
    1. Jeff Griffiths

      Firefox’s developer tools have almost no impact on browser performance unless they are open. The additional impact is mainly around download size which is relatively small.

      June 23rd, 2014 at 15:24
      1. Leo

        You’ have made a symbolic mockery of Firefox by including a feature that looks like a rollback to the Mozilla web suite. This looks like a cool IDE, but by bundling it you have opened up Firefox to poignant criticism about a loss of focus.

        It would be interesting to see another fork of in the spirit of Phoenix that strips out all this extra stuff and just includes the bare Firefox browser, with none of the extension baggage, developer tools or web IDE, none of the social API features and other things I don’t think people want.

        June 23rd, 2014 at 21:51
  15. Benjamin Atkin

    Please quit trying to make Firefox OS happen. It’s not going to happen. Firefox for the desktop shouldn’t have anything to do with Firefox OS.

    June 23rd, 2014 at 15:50
    1. g.g

      Uh, but Firefox OS has already happened. :-) (In fact, so did Chrome OS on the desktop…)

      June 24th, 2014 at 10:03
  16. Argh!

    At this point I’m fairly sure the FF developers are just doing whatever the heck they want. No one is listening to the users. They all went to school and learned to have a roadmap. And by god they’ll follow the map even though nobody wants to go wherever the hell they’re going.

    Stop with these needless additions and changes. Virtually no one wants them and even less need them. PLEASE! Just fix known issues that are neglected for eons! PLEASE! You’re all ruining the one browser a LOT of us can actually use. And trust me, that number is FAR bigger than the people who will use these additional “features” you’re adding in there.

    This firefox os thing is going to be the end of it all. Please! Consider stopping and improving and building what FF was meant to be. If you have to plow on, pull the browser out for those who want just the browser.

    Or better, have someone work on the user interface. After the last disastrous UI update, someone asked me where the print button had gone to. Seriously. NOONE should have trouble finding out where to print in a browser! WHAT ARE YOU GUYS DOING?? Stop it! This is me begging!

    June 23rd, 2014 at 19:58
    1. viperafk

      “Or better, have someone work on the user interface. After the last disastrous UI update, someone asked me where the print button had gone to. Seriously. NOONE should have trouble finding out where to print in a browser! WHAT ARE YOU GUYS DOING?? Stop it! This is me begging!”

      The print button is extremely obvious in the new UI: http://i.imgur.com/QwAwG0i.png

      Unless you seriously think the huge button, with the printer icon, that says “print”, is hard to find?

      June 24th, 2014 at 16:12
      1. Oğuz Çelikdemir

        Is this so hard to click from hamburger menu?

        If you are a serious frontend developer, you will understand us. We need a real browser IDE to be able to see what we are doing. As you might know, modern IDE’s, like Dreamweaver, has wysiwyg feature but it’s not working well. Thanks Firefox team for such a great tool. I am sure several IDE’s will implement Firefox WebIDE in their tool, like PhpStorm or WebStorm ( right know, they are using Chrome ).

        June 24th, 2014 at 22:35
  17. Andrew Eisenberg

    Looks great! And looking forward to trying this out.

    How closely tied is this to Firefox OS? How will this help me create traditional web-apps? Also, do I need to install firefox nightly to try this out?

    June 23rd, 2014 at 20:02
  18. Adam

    Great tool! However, Google is developing something similar – Chrome Dev Editor as a Google Chrome app – tr.im/5mpdl

    June 23rd, 2014 at 20:57
  19. Ido

    So, is Firefox slowly going the old Mozilla-Suite way? I’m not saying WebIDE doesn’t seem cool, but why add bloat? Is the common Firefox user going to need this?

    June 24th, 2014 at 00:30
  20. really?

    While your browser is slowly and certainly dying you keep adding unnecessary features while reinventing the ui/ux and locking it down. Great plan.

    Firefox was the way to go back in the days? What happened?

    All these people who spend their time developing all kinds of features and trying to reinvent the wheel, thinking they’re innovating somehow, if at least half of them could get together one day and fix the damn memory leaks that doomed FF?

    Please, fix FF first, give us back the browser we used to love, I know you’re all smart, please use your time wisely.

    June 24th, 2014 at 02:55
  21. tux.

    When I started using Firefox, I loved how everything was an ENTIRELY OPTIONAL add-on.

    I wonder what went wrong.

    June 24th, 2014 at 02:57
  22. elav

    It would be really interesting that this IDE evolve and become an independent tool. I think Firefox is loading many extras and the Inspector tool Responsive Design, and App Manager is sufficient. In fact, if I add autocomplete for HTML, JS and JSON, could launch WebIDE as a HTML Editor or IDE apart.

    June 24th, 2014 at 03:50
  23. Felix E. Klee

    “you can start now, developing against Firefox Desktop” That sounds promising. I already develop for Firefox OS, which works nicely with the simulators and with my Keon. However, pushing packaged apps to Android / Fennec is somewhat cumbersome:


    For Firefox Desktop I don’t even know how to do it. It’s an open question:


    June 24th, 2014 at 05:12
  24. Stephen Price

    Guys, this is really neat stuff, and I’m not trying to be a downer here, but as a dev that uses the Aurora dev tools everyday for work, there is a LOT more basic stability work that needs to be done to the debugger, web inspector, and css rules editor. You keep dropping all this futuristic stuff, and I like the vision, but at the same time, I can’t help think, why couldn’t you have put some of that effort into reaching feature and stability parity with Internet Explorer? There are still DOM bugs that have been open for a decade, for that matter. I, myself filed a bug about some of the debugger problems that made it into the Release channel. Yes, they’ve been fixed in Aurora, but that still has months to cycle to Release and Beta. Instead, we have a WebGL shader debugger and a WebAudio tool. Fantastic for like ~5% of devs that can get client sign off on that. The rest of us would settle for tables looking right. C’mon folks, there needs to be a serious push to got your house in order before adding three new wings. I’m saying this ‘cuz I care.

    June 24th, 2014 at 08:39
  25. Jeffrey

    Any plans for C/C++ Emscripten integration?

    That’s one thing Emscripten is missing is a good IDE officially designed for it. Like Android Studio but for Asm.js.

    June 24th, 2014 at 08:43
  26. Christian

    Can I use it on Windows?

    June 24th, 2014 at 08:50
    1. Fred


      June 24th, 2014 at 16:40
  27. Ido

    This is really starting to feel like the old Mozilla Suite. How long before Mozilla start a new, fast and lightweight browser project without all the bloat. Maybe call it Mozilla Turbodog.

    June 24th, 2014 at 08:55
  28. João

    Why do people still develop in macs? Really? You guys should use open source software, like bsd or linux.

    June 24th, 2014 at 09:40
  29. Charles N Wyble

    This is really quite cool! Ignore the various haters here. They have no idea how powerful this tool is and the ease of use it brings to the table for web developers.

    June 24th, 2014 at 10:00
    1. Stephen Price

      Not saying it isn’t cool, but there’s a lot more basic things that are ridiculously overdue for fixing. The DevTools team keeps putting out one “space-age wonder-widget” after another when the JS debugger still chokes on the regular after having been around for years now. It’s bad when *IE* has better tools than you do.

      Glad to see an FNF type here though :D

      June 24th, 2014 at 15:03
  30. Viswaprasath KS


    Any plans for integrating Mozilla Appmaker(https://apps.webmaker.org/en-US/designer) so it will be very easy for us to do drag and drop instead of typing and it will be awesome.

    I would like to contribute if such opportunities are there.

    Thank you.

    June 24th, 2014 at 10:21
  31. Axel

    I really think Mozilla is doing a fantastic job moving the web forward – Firefox OS, this IDE which might change the way we develop for the web completely, and so on.

    On the other hand … I also feel that the browser could use some love, too. It feels really sluggish compared to Chrome sometimes, I haven’t read an update on multiple threads for several months now, plugins still need to “do the windows thing” (restart) on installation, and that’s all anything but recent.

    Keep the first, share some love to good old Firefox _browsing_ development, and you’re the perfect company ;) . (Or organization, or movement, or whatever Mozilla actually is)

    June 24th, 2014 at 12:21
    1. bob

      They are working on user interface responsiveness. OMTC (off the main thread compositing) is already enabled in the OSX version, and coming soon in the windows version. the e10s (multi-process project) has been made a high priority, but will take a while since it requires massive changes to firefox under the hood. The new cache2 backend should be coming in the near-ish future as well, which will reduce UI hangs caused by the cache.

      Other things that are being worked on that will help UI responsiveness: async css animations, async html5 video, async plugin initialization, async scrolling/panning etc…

      Some of it is far off and requires a lot of changes, but they are definitely being worked on.

      June 24th, 2014 at 16:05
      1. Axel

        cool! Well, being an OS X user on the beta channel, I don’t really feel OMTC (never heard of this, actually) ;) .

        Out of curiosity: Where do you get this info? I follow the blog and most (I think) relevant news sites, and I that went completely by me. Internal knowledge or missing sources on my part?

        June 24th, 2014 at 23:06
        1. Tim

          You can get dev news here : http://twitter.com/FirefoxNightly

          June 25th, 2014 at 02:29
  32. Niklas

    This is a fantastic addition for beginners. I remember reading tutorials and all trying to recommend different tools for the job but this has all a user needs to start developing for the web (+ mobile). Just consider how much easier this will make it for schools! I also like that you are putting so much love in the Cordova support and making it easier to build and debug.

    June 25th, 2014 at 04:38
  33. iskael

    WOW … it’s fantastic! >_<

    June 25th, 2014 at 04:38
  34. Carfield Yim

    I am using nightly but I am not sure how to download it, is it an addon?

    June 26th, 2014 at 00:48
    1. zalun

      Simply update the nightly (it should download itself) and restart it

      June 26th, 2014 at 15:30
  35. JuanMa Ruiz

    Hi! Sorry in nightly I can’t find dev tools.website and app manager I can’t create a project like the video.

    June 27th, 2014 at 00:14
  36. Altfred Kayser

    My themes are now updated to fully support the WebIDE: LittleFox, MicroFox, Nautipolis, Walnut and Walnut2.

    June 28th, 2014 at 03:39
  37. Yelan

    I’m sorry if I misunderstand, but, is Firefox now going to become a developer IDE instead of a browser? How about you split off developer tools in a separate program and let the browser be the browser? I doubt more than 1% of your users will ever need this WebIDE.

    June 28th, 2014 at 04:38
  38. shirokoff

    Really like the way you are putting FFOS development process.

    PS: Any news about ZTE Open 1.3 update?

    June 30th, 2014 at 00:34
  39. Edwin Yip | Dev of LIVEditor

    I might not have been developing LIVEditor (http://liveditor.com) if this came out earlier… What I wanted is a decent code editor with real-time html and css preview…

    July 11th, 2014 at 12:24
  40. Maxime Wack

    I think a lot of people here miss the point. Yes FF is a browser, yes at the moment less that 1% of users use the dev tools, yes iOS and Android are already dominating the market…
    Yet fighting google or apple head to head is not the goal (they’d lose), and they don’t want to change your web developers habits (they know you know the tools).
    FFOS is made to lower the entry level for smartphones, especially in developing countries.
    In the same spirit WebIDE is made to lower the entry level for webdeveloping : no sdk downloading and learning required, no cumbersome configuration or compiling or signing, no new language to learn, etc.

    Have FF installed ? Buy a cheap FFOS device, plug it in, and there you’re ready to go !
    It’s not here to address the one percent, it’s here to make this one percent ten or twenty. It is a great vision, thank you Mozilla for making it happen !

    July 18th, 2014 at 09:28

Comments are closed for this article.