ConvertexThe Preview
The preview panel, located on the right side of the editor, displays a real-time preview of your HTML, CSS, and JavaScript code. It lets you see exactly what your code produces before launching the conversion.
Real-Time Preview
The preview updates automatically with every change to the code in the HTML, CSS, or JavaScript tabs. No need to click a "Refresh" button: every character typed or pasted updates the preview instantly.
The preview uses an isolated iframe. Your code runs in a separate environment, exactly like in a browser.
Responsive Breakpoints
Three breakpoint buttons are available at the top of the preview to test how your design displays at different screen sizes:
| Breakpoint | Width | Corresponds to |
|---|---|---|
| Desktop | Default | Computer screen |
| Tablet | 768 px | Tablet |
| Mobile | 480 px | Phone |
Click each breakpoint to verify that your design adapts correctly. This is particularly useful for checking the rendering of your media queries before conversion.
Custom Width Adjustment
In addition to the preset breakpoints, you can manually adjust the preview width by dragging the separator between the code panel and the preview panel. This lets you test your design at any intermediate width.
Fullscreen Mode
To see your rendering full-size, use the fullscreen mode. The preview then takes up the entire window, which is ideal for:
- Checking the overall rendering of a full page
- Testing JavaScript interactions in real conditions
- Presenting the result to a client or colleague
Click the button again to return to the normal view.
Built-In Console
The preview includes a built-in console that displays JavaScript logs in real time. Three types of messages are captured:
| Type | Description |
|---|---|
| log | Standard messages via console.log() |
| warn | Warnings via console.warn() |
| error | Errors via console.error() |
The console is a debugging tool. If your JavaScript is not working as expected, check the console to spot errors before converting.
Typical Workflow with the Preview
Paste Your Code
Paste your HTML and CSS into the corresponding tabs.
Check the Preview
The rendering appears automatically on the right. Make corrections if needed.
Test the Breakpoints
Click Desktop, Tablet, and Mobile to check the responsive behavior.
Launch the Conversion
Once you are satisfied with the preview, click Convert or use Cmd+Enter.