Editor Overview
The Convertex editor is a split-pane IDE built for one purpose: turning your HTML and CSS into Webflow-native JSON as accurately as possible. Everything you need -- writing code, previewing the result, inspecting elements, and exporting -- lives in a single screen.
Interface Layout
The editor follows a classic IDE split-pane design. The left side is dedicated to code, and the right side shows a live preview of your markup.
The main areas are:
| Area | Location | Purpose |
|---|---|---|
| Toolbar | Top bar | Convert, copy JSON, switch projects, adjust breakpoints, access settings |
| Code Panel | Left pane | Write or paste HTML, CSS, and JavaScript across three tabs |
| Draggable Divider | Center | Drag to resize the split between code and preview |
| Live Preview | Right pane | Real-time iframe rendering of your code |
| Styles Panel | Right sidebar | Inspect parsed CSS styles (native vs. embedded) |
| History Panel | Right sidebar | Browse previous conversions with timestamps Starter |
| Scripts Panel | Right sidebar | Manage detected and manually added external scripts Starter |
Feature Summary
Code Editing
The code panel offers three tabs -- HTML, CSS, and JavaScript -- powered by CodeMirror 6. You get syntax highlighting, line numbers, bracket matching, auto-indentation, and in-editor search (Cmd+F / Ctrl+F). See Code Panel for details.
Live Preview
Your HTML and CSS render in real time inside a sandboxed iframe. Toggle between responsive breakpoints (Desktop, Tablet, Mobile Landscape, Mobile Portrait) to see how your layout behaves at each Webflow breakpoint. See Live Preview.
Element Inspector
Click any element in the preview to highlight the corresponding code in the editor -- and vice versa. This bi-directional linking makes debugging layout issues fast. See Element Inspector.
Responsive Breakpoints
Four breakpoints that mirror Webflow exactly: Desktop (default), Tablet (991 px), Mobile Landscape (767 px), and Mobile Portrait (478 px). See Responsive Breakpoints.
Toolbar & Keyboard Shortcuts
The toolbar gives you one-click access to conversion, JSON export, project switching, and more. Power users can rely on keyboard shortcuts like Cmd+Enter to convert and Cmd+K to copy JSON. See Toolbar & Actions.
Styles Panel
After a conversion, the Styles Panel categorizes every CSS declaration as either native (directly supported in Webflow) or embedded (wrapped in a ghost block for fallback). This gives you a clear picture of conversion fidelity.
History Panel Starter
Every conversion is saved with a timestamp. You can browse, compare, and restore previous outputs without losing work.
Scripts Panel Starter
Convertex auto-detects external scripts referenced in your code (CDN links, library imports). The Scripts Panel lets you review and manage them before exporting.
Quick Start
Paste your code
Open the HTML tab and paste your markup. Switch to the CSS tab to add styles. Optionally add JavaScript in the third tab.
Preview and adjust
The live preview updates automatically. Use the responsive toggles to verify your layout at each breakpoint.
Convert
Press the Convert button (or Cmd+Enter). Convertex parses your code and produces Webflow-compatible JSON.
Copy and import
Click Copy JSON (or Cmd+K) to copy the output to your clipboard. Paste it into Webflow's page or component import dialog.
Need help with a specific panel? Use the sidebar to jump to the detailed guide for each editor feature.