ConvertexCode: HTML/CSS/JS
The code panel is located on the left side of the editor. It contains 3 tabs for your HTML, CSS, and JavaScript code.
Writing Code Optimized for Conversion
To get the best possible result in Webflow, here are the best practices to follow when writing your HTML/CSS:
- One class per element. Webflow works with simple classes. Avoid nested selectors (
.parent .child) -- prefer a direct class on each element. Anything that cannot be translated into a simple class will be passed through as a ghost block (CSS embed). - Avoid IDs for styling. Use classes rather than
#idfor your styles. IDs are supported but classes are better handled by Webflow. - Name your classes clearly. Names like
hero-titleorsection-ctawill appear in Webflow's Style Manager. Generated names likesc-bdfBwQwill be hard to maintain. - Separate HTML and CSS. Even though Convertex handles inline styles and
<style>tags, the result is cleaner with CSS in the dedicated tab. - Use shorthands sparingly.
margin: 10px 20px 30px 40pxis automatically expanded, but writing individual properties reduces the risk of errors. - Prefer Flexbox over Grid for simple layouts. Flexbox is better supported natively by Webflow. Grid also works, but Flexbox often produces a more faithful result.
- No
!important. Webflow does not handle!important. Convertex ignores it during conversion.
Have existing code that is not optimized? Run it through Claude with the Convertex skill before converting. Ask it: "With Convertex, clean up this HTML/CSS for an optimal Webflow conversion." Claude will restructure the classes, simplify the selectors, and remove unnecessary code.
HTML Tab
This is where you paste your HTML code.
- No full page needed. Just paste the HTML fragment of your section. No need for
<html>,<head>, or<body>. - Syntax highlighting. Code is automatically color-coded for better readability.
- Line numbers. Each line is numbered for easy reference.
- Search. Use Cmd+F to search within the code.
If your CSS is in the same file as the HTML (between <style> tags), paste everything in the HTML tab. Convertex will automatically separate the HTML from the CSS.
Supported HTML Elements
Convertex recognizes and converts the following HTML elements to their Webflow equivalents:
| HTML | Webflow | Examples |
|---|---|---|
| Containers | Block | <div>, <section>, <header>, <footer>, <nav>, <main>, <article>, <aside> |
| Headings | Heading | <h1> to <h6> |
| Text | Paragraph / Span / Strong | <p>, <span>, <strong>, <em>, <small>, <mark>, <code> |
| Links | Link | <a> |
| Buttons | Button | <button> |
| Images | Image | <img> |
| Lists | List / ListItem | <ul>, <ol>, <li> |
| Forms | Form / TextInput / Textarea / Select | <form>, <input>, <textarea>, <select>, <label> |
| Media | IFrame / Audio | <iframe>, <audio> |
Accepted Structures
You can paste:
- An HTML fragment -- a simple
<section>or<div>with its content - Multiple sections -- paste an entire template, Convertex converts everything
- HTML with inline styles --
style="..."attributes are extracted and converted - HTML with
<style>tags -- embedded CSS is automatically separated
Recognized Webflow Classes
If your HTML uses native Webflow classes (w-*), Convertex recognizes them and creates the corresponding components:
w-nav, w-dropdown, w-slider, w-tabs, w-form, w-lightbox, w-video, w-background-video, w-container, w-layout-grid, w-embed
CSS Tab
Paste your CSS styles here. Convertex automatically handles:
- Media queries: mapped to Webflow's 4 breakpoints (Desktop, Tablet, Mobile Landscape, Mobile Portrait)
- Shorthands:
padding: 10px 20pxis automatically expanded into individual properties - CSS variables: resolved to concrete values
- Transitions: expanded into
transition-property,transition-duration,transition-timing-function
Native CSS Properties
These properties are converted directly into Webflow styles (editable in the Style Manager):
| Category | Properties |
|---|---|
| Layout | display, position, top/right/bottom/left, z-index, overflow, float |
| Box Model | width, height, min/max-width, min/max-height, margin, padding, box-sizing |
| Flexbox | flex-direction, flex-wrap, align-items, justify-content, align-self, flex-grow/shrink/basis, order, gap |
| Grid | grid-template-columns/rows, grid-column/row, grid-gap, align-content, justify-items |
| Typography | font-family/size/weight/style, line-height, letter-spacing, text-align/decoration/transform, color, text-shadow |
| Background | background-color, background-image, background-size/position/repeat, background-clip |
| Borders | border, border-radius, box-shadow, outline |
| Effects | opacity, filter, backdrop-filter, mix-blend-mode, transform, transform-origin, perspective |
| Transitions | transition-property/duration/timing-function/delay |
| Interactions | cursor, pointer-events |
| Pseudo-classes | :hover, :active, :focus, :visited, :focus-visible |
What Goes Into a CSS Embed
Properties or selectors that Webflow does not support natively are automatically included in a ghost block (CSS embed). This works perfectly -- the only difference is that they are not editable in the Style Manager.
Examples: complex selectors (.parent .child, +, ~), pseudo-elements (::before, ::after), @keyframes, :nth-child, ::placeholder.
JavaScript Tab
Optional. If your design requires JavaScript (animations, interactions), paste it here. The code will be included as an embed in the Webflow output.
For external libraries (GSAP, Swiper, etc.), use the External Scripts panel instead, which handles CDNs automatically.
Size Limits
| Type | Limit |
|---|---|
| HTML | 1 MB (1,000,000 characters) |
| CSS | 500 KB (500,000 characters) |
If your code exceeds these limits, split it into sections and convert section by section.
Keyboard Shortcuts
| Action | Mac | Windows |
|---|---|---|
| Search in code | Cmd+F | Ctrl+F |
| Undo | Cmd+Z | Ctrl+Z |
| Redo | Cmd+Shift+Z | Ctrl+Shift+Z |