facebook

Live Preview & CodeLive for Fast Web Development

Live Preview Changes

Live Preview lets you see a preview of your modern web or Java EE application right next to the code editor. See changes in real time, as you type, and if your project configuration allows it, without even needing to save the file.

Quickly Jump to Source

CodeLive for Angular lets you see the files or components that are loaded on the page, and then quickly jump from the page to the source. Use Live Preview and CodeLive together and take your web development to the next level!

Try it Now!

Next generation Live Preview is available in CodeMix and Angular IDE. CodeMix is included with your MyEclipse license.

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.

More on Live Preview

Live Preview HTML
Live Highlight CSS

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.

See JavaScript in Action

Maybe you’ve added some cool JavaScript to your page and you want to see it come alive. No problem! With Live Preview, you can easily tweak your JavaScript and immediately see the results right next to your code. 

Live Preview HTML
Live Highlight CSS

URL Mapping Keeps You in Control

Our Live Preview is very intelligent, usually showing you just what you want to see. When it can’t figure it out or if you want to see something else, you can decide which URL to preview—pass parameters in to preview the page in the desired state.

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.

View Source Code
View Source Code

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.