htmlcsswysiwygrubyminelive-preview

Live preview / WYSIWYG support or plugin for Rubymine?

I'm using Rubymine 5.4 for Windows and it's overall amazing, and 95% as good as Visual Studio as an HTML / CSS Editor with a few exceptions... the main one being a lack of a live preview /WYSIWYG ability, i.e. as I type I can see the resulting preview live (in addition to VS, DreamWeaver also has this feature). I can't seem to find anything like it in the IDE, help, or any Google/Stack searches.

To be clear, what I am looking for is a way to have a split screen view in RubyMine where I can be editing my HTML / CSS in one pane/tab and be seeing the Live Preview of what it would look like in a browser in another tab/pane.

Ideally, this would be:

  1. in RubyMine itself (using native panes/tabs as described above)
  2. the user could configure whatever browser rendering engine (Chrome, FF, IE, etc...) they wanted to view the preview in...

...however, I could live with any variation of the two above, e.g. simply integrated with RubyMine using external windows/browsers, or maybe, the preview only available with limited rendering engines (only Chrome let's say).

Solution

  • Thanks to @CrazyCoder & @LazyOne for the pointers...

    After a bit more research, I've confirmed and gotten more detail:

    The solution is to use the Official Jetbrains (maker of RubyMine) LiveEdit plugin which you can find here: http://plugins.jetbrains.com/plugin/?id=7007

    Detailed Instructions

    1. Download the JetBrains LiveEdit plugin from here: http://plugins.jetbrains.com/plugin/?id=7007
    2. Run Rubymine > Settings > Plugins (type "plugins" in the search box in settings)
    3. Click the Install Plugin from disk button at the bottom of the list
    4. Navigate to where you downloaded the plugin and select/open it
    5. Activate by checking it on the plugin list
    6. (You will likely have to) restart RubyMine
    7. Once restarted, go to the menubar > View > LiveEdit (which will then be checked)
    8. Download the JetBrains IDE browser Extension for Chrome here: https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji?utm_source=chrome-ntp-icon
      • The Chrome extension supports both WYSIWYG/real-time "LiveEdit" outside the IDE, in an external Chrome window and JavaScript debugging inside the actual RubyMine IDE
      • I believe there is also an extension for FireFox, which I believe ALSO DOES support Javascript debugging through the IDE. BUt, I'm not sure if it supports LiveEdit like the Chrome extension
    9. (Launch) Debug your project
    10. Edit as you normally would

    Observations/Opinions

    The plugin pretty much works seamlessly. I've found it cuts development time significantly by not having to constantly MANUALLY reload the page, i.e. use your mouse or keyboard to bring focus to the browser window and hit refresh... this time adds up especially if you are doing a lot of HTML/CSS and want to check your changes often.

    However, I'd suggest turning it off if you're going to do any major back-end/Rails or Javascript as the reload might be slightly longer due to code interpretation/processing and you hit errors as you are mid-statement and the LiveEdit decides to refresh while variables aren't defined or have improper values. In this case, the time you save by not having to manually refresh, may be lost (more than 1x fold) b/c of how often and how long it takes for content to be created/rendered on the server-side or in JS on the client.