CodeLive Connects the Browser to the IDE for Fast Web Development

Quickly Jump to Source

CodeLive makes it simple to see what files or Angular components are being loaded on a web page and quickly jump from the page to the source.

Live Preview Changes

For Java EE websites, instantly view changes to your HTML, CSS and JSP within your normal workflow—even test multiple browsers at once!

Try it Now!

It’s free to try in Webclipse, MyEclipse and Angular IDE.

Ready for more efficient web development?

Jump to Source Code from the Browser

Use the CodeLive Dashboard to quickly jump from a web page to its source.

  • For Angular applications, the dashboard lists the active Angular components. Select the file to open: TypeScript tsfileicon, HTML template htmlfileicon or CSS cssfileicon.
  • For Java EE websites, the dashboard lists the corresponding JSP, HTML and CSS files open in the browser. Click magnify to open the source file.

Inspect the Source Code for an Element

Another useful way to view your source code is to use the Inspector inspectoricon to navigate to a particular line in the source code.

  • For Angular applications, hover over a component on the page to view the component name. Click the component to view the dashboard list filtered for the selected component, and then easily jump to the corresponding TypeScript tsfileicon, HTML htmlfileicon or CSS cssfileicon file.
  • For Java EE websites, hover over an element to see the path to the source file. Click on the element to jump directly to the corresponding line of source code.

Instantly View Changes

For Java EE web developers, think of the time you’ll save when you immediately see changes to your HTML and CSS files. Modify list items, change the structure of your page or update Div styling—you won’t have to waste time deploying before you know if you are happy with the changes. Edit your CSS to experiment with broad changes to your web page such as new colors, fonts and margins.

Live Highlighting

Live Highlighting lets you quickly see which areas on a Java EE web page are affected by a change.  When your cursor is placed in an HTML file, the corresponding elements are highlighted in the browser.  When your cursor is on a rule in a CSS file, all affected elements are highlighted in the browser.

Support for JSP

Maybe you use JSP to create dynamic web content on your Java EE website. With Live Preview you can view changes to static blocks allowing you to rapidly develop advanced web pages in a snap! With the first release of Live Preview, JSP support is included as an experimental preview feature. Further enhancements will be included in future CI releases.

View Multiple Browsers and Devices

Have you ever created a beautiful website in Java EE, only to discover it’s not so beautiful in a particular browser or mobile device? Live Preview lets you simultaneously test your web page on multiple browsers and simulated mobile devices so you can make sure your page always behaves properly, regardless of browser or device.  

More on Viewing Web Pages