I run devpack, a site of free browser tools, and a lot of them are for Webflow. Webflow’s Designer is great when everything starts inside Webflow. It gets awkward when it doesn’t: an icon from Figma, a section someone wrote in plain HTML and CSS, a block of code ChatGPT gave you.

You copy it, click into the Designer, press Ctrl+V, and nothing happens. The Designer only pastes its own elements.

The usual workaround is a Code Embed. Paste the SVG or HTML into an Embed element and it shows up on the page. But an Embed is a black box. You can’t select the path inside it, you can’t give it a class, and the styles don’t show up in the Style panel. With twenty icons, you have twenty little boxes of code to keep in sync.

So I built two tools, SVG to Webflow and HTML & CSS to Webflow, and then a browser extension that does the same thing right inside the Designer when you paste. This is how they work.

What Webflow puts on the clipboard

The first step was to find out what Webflow pastes. When you copy an element in the Designer, it doesn’t put HTML on the clipboard. It puts JSON there, under the application/json type (and the same text as text/plain). You can see it by pasting into any text editor.

Trimmed down, a copied div with a class looks like this:

{
  "type": "@webflow/XscpData",
  "payload": {
    "nodes": [
      { "_id": "4f1c…", "type": "Block", "tag": "div",
        "classes": ["9a2e…"], "children": [], "data": { … } }
    ],
    "styles": [
      { "_id": "9a2e…", "type": "class", "name": "card", "comb": "",
        "styleLess": "padding: 24px; border-radius: 12px;",
        "variants": { "small": { "styleLess": "padding: 16px;" } },
        "children": [] }
    ],
    "assets": [], "ix1": [], "ix2": { … }
  },
  "meta": { … }
}

A few things stood out:

• Elements are a flat list of nodes. Each one has an id, and parents list their children by id. Text is its own node too, with text: true.
• Classes live in a separate styles list, and the CSS is a plain string called styleLess.
• Breakpoints and states are variants, keyed by names like medium, small, tiny and main_hover. If I could build this JSON myself and put it on the clipboard, the Designer would paste it like anything you copied in Webflow.

Putting JSON on the clipboard from a web page

This sounded like the easy part. It wasn’t.

The modern Clipboard API, navigator.clipboard.write(), only lets a page write a short list of types: plain text, HTML and PNG images. Chrome also allows custom types, but only with a "web " prefix, and Webflow doesn’t read those. There’s no way to write a plain application/json entry with it.

The old way still works, though. If you handle the copy event yourself, you can set any type you like on the event’s clipboardData. Then you trigger a copy from a button click:

function copyAs(map) {
  let ok = false;
  const onCopy = e => {
    for (const [type, value] of Object.entries(map)) e.clipboardData.setData(type, value);
    e.preventDefault();
    ok = true;
  };
  document.addEventListener('copy', onCopy);
  try { document.execCommand('copy'); }
  finally { document.removeEventListener('copy', onCopy); }
  return ok;
}
 
copyAs({ 'application/json': json, 'text/plain': json });

execCommand is deprecated, but every browser still supports it for this, and for now it’s the only way to do it.

Turning an SVG into elements

Webflow has a Custom Element: an element where you choose the tag yourself. That’s what makes SVG possible. An <svg> becomes a Custom Element with the tag svg, every <path> becomes a Custom Element with the tag path, and all the attributes (viewBox, d, fill…) go into the element’s attribute list. In the Navigator you get an svg element with its paths inside, and you can select and style each one.

Before converting, the SVG needs cleaning. What you copy out of Figma or an icon site carries a lot of extras:

• Editor attributes like data-name, sodipodi:*, inkscape:* and figma:*, plus comments, <metadata> and <title>. They go.
• Anything that can run code: <script>, <foreignObject>, on* attributes and javascript: links. They go too.
• xlink:href. This one took me a while. The Designer recreates the elements without the xlink namespace, so a <use xlink:href="#icon"> silently shows nothing. Rewriting it as a plain href fixes it. There are two options I added because I kept wanting them myself. currentColor replaces every fill and stroke color with currentColor, so the icon follows the text color you set in Webflow. And a class name and size option puts the width and height on a Webflow class instead of the SVG, so all your icons share one class you can change in one place.

The format isn’t documented, and it changes

None of this JSON is documented, and Webflow can change the exact shape of a Custom Element whenever it likes. A converter that hard-codes it breaks quietly one day.

So the tools can learn it. If you copy any Custom Element in the Designer and paste it into the tool (or, with the extension, paste it back into the Designer), it reads the element and uses it as a template. The tricky part is finding where the attributes live, because that key could move. I search for it instead of hard-coding it: the first array whose items all look like { name, value }.

function findAttrPath(obj, path = []) {
  for (const [k, v] of Object.entries(obj)) {
    if (Array.isArray(v) && v.length && v.every(x => x && 'name' in x && 'value' in x)) return [...path, k];
    if (v && typeof v === 'object' && !Array.isArray(v)) {
      const found = findAttrPath(v, [...path, k]);
      if (found) return found;
    }
  }
  return null;
}

Every new element is a copy of that template with a fresh id, its own tag and its own attributes. If Webflow changes the format, one copy and paste updates it.

HTML and CSS: classes, breakpoints and hover states

SVG was the warm-up. HTML with CSS is where it gets interesting, because the goal isn’t just elements. It’s elements with real Webflow classes, so you can keep editing them in the Style panel.

The elements part is a walk over the parsed HTML. In “native” mode, tags map to Webflow’s own elements: div, section, header and the other layout tags become Div Blocks that keep their tag, h1–h6 become Headings, p a Paragraph, a a Link, img an Image, and lists become List and List Item. Anything else, including inline SVG, becomes a Custom Element with its exact tag. There’s also a “custom” mode that keeps every tag exactly as written.

The CSS is the hard part, because Webflow and CSS think about styles differently:

• CSS is a cascade of rules. Webflow has one style per class. A class can be set by several rules in your CSS, and the order and specificity decide which values win.
• Your media queries can be anything. Webflow has fixed breakpoints, and they’re desktop-first. The base style is desktop, and each smaller breakpoint (991px, 767px and 479px wide) only stores what changes.
• Combo classes. .button.is-secondary in CSS is a combo class in Webflow, which is a separate style that belongs to its parent class. So instead of translating rules one by one, I work out what each class actually looks like at each breakpoint. For every class, I pick one test width per breakpoint (1200, 900, 600 and 400 pixels), collect all the rules that apply at that width, sort them by specificity and order, and get the final values. That gives me the full desktop style. For each smaller breakpoint, I store only the values that differ from the one above it:

const BANDS = [{ key: 'main', w: 1200 }, { key: 'medium', w: 900 },
               { key: 'small', w: 600 }, { key: 'tiny', w: 400 }];
 
const effs = BANDS.map(b => effectiveStyle(cls, b.w));   // final values at each width
const variants = {};
BANDS.forEach((b, i) => {
  if (!i) return;
  const changed = diff(effs[i], effs[i - 1]);              // only what changes
  if (Object.keys(changed).length) variants[b.key] = { styleLess: toLess(changed) };
});

This handles max-width and min-width queries, rems and ems, and queries written in any order, because I never try to map a query to a breakpoint directly. I just test each width. :hover, :focus and :active work the same way and become Webflow states like main_hover. Shorthands get expanded too, since Webflow stores longhands: padding: 8px 16px becomes four separate values. var(--…) values are resolved from :root.

Some CSS just can’t become a Webflow class: element selectors like h1 { … }, descendant selectors, @keyframes and media queries for screens wider than Webflow’s base breakpoint. I don’t want to throw that away silently, so it goes into a Code Embed called “Custom CSS” that’s pasted along with the elements. The tool also shows a report: how many elements, classes and combo classes it created, and a warning for every rule it couldn’t map, every image with a relative URL (Webflow needs absolute ones) and an Embed that’s over Webflow’s 50,000-character limit.

The extension: catching the paste

The web tools have one annoying step: you paste into the tool, click Copy, switch tabs, then paste into Webflow. I wanted Ctrl+V in the Designer to just work. That needs a browser extension, because only an extension can run code on the Designer’s page.

The extension’s content script listens for paste in the capture phase, before the Designer sees it, and decides what’s on the clipboard:

• Only an SVG? Convert it to elements.
• Text that looks like HTML code? Convert it with the CSS from its <style> tags.
• Rich HTML from a web page, like part of an article? Convert it to clean Headings, Paragraphs, Lists, Links and Images, without the page’s classes and styles.
• Anything else is left alone: real Webflow data, plain text, pastes into text fields and code editors, and rich copies from VS Code or GitHub, which are code, not content. Then it stops the original paste and fires a new one, carrying the converted JSON:

window.addEventListener('paste', e => {
  if (!e.isTrusted) return;            // our own paste passes straight through
  const what = classify(e.clipboardData);
  if (!what) return;
  e.preventDefault();
  e.stopImmediatePropagation();
 
  const json = convert(what);
  const data = new DataTransfer();
  data.setData('application/json', json);
  data.setData('text/plain', json);
  e.target.dispatchEvent(new ClipboardEvent('paste', { clipboardData: data, bubbles: true, cancelable: true }));
}, true);

The isTrusted check matters. The event I dispatch is untrusted, so the listener ignores it and doesn’t loop forever, and the Designer handles it like a normal paste.

Firefox needed a different route. There, a page can’t read the data of a paste event that an extension created, so the hand-off arrives empty. In Firefox the extension puts the converted JSON on the real clipboard instead, using the same copy-event trick as the website, and shows a message: press Ctrl+V again. The first paste converts, the second one pastes.

It also keeps a small component library. When you copy elements in the Designer, it offers to save them, and Alt+Shift+L opens your saved components in any project. I won’t go into that here, it’s a post of its own.

The extension asks for one permission, storage, for your settings and library. It only runs on Webflow Designer pages and devpack.app, and it makes no network requests. Everything is converted on your machine.

One more catch: two browsers

Custom clipboard types don’t travel between browsers. If you copy in Chrome and Webflow is open in Firefox, or the other way around, the JSON arrives as plain text and the Designer ignores it.

For that I made a small page, the Webflow Clipboard Bridge. Open it in the browser where Webflow is, paste there, and it copies the data again in that browser’s own format.

What doesn’t work (yet)

• Element selectors, descendant selectors and animations end up in the Custom CSS embed, not in Webflow classes. Inline style attributes are dropped with a warning, so move them into a class first.
• Images need to be uploaded to Webflow afterwards. The converter keeps absolute image URLs and warns about relative ones.
• Webflow can change its clipboard format. The template learning covers Custom Elements, but a big change would still need an update from me.

If you’re building something similar

• Look at the clipboard first. Paste what an app copies into a text editor. Many apps use plain JSON you can generate yourself.
• To write a custom type from a page, handle the copy event. navigator.clipboard.write() won’t do it.
• Don’t translate CSS rule by rule. Work out the final values at each breakpoint and store only the differences.
• Don’t hard-code an undocumented format. Learn it from a real sample, and search for the parts you need.
• In an extension, re-dispatch the paste and check isTrusted. And test Firefox early, because it handles synthetic clipboard events differently. The tools are free: SVG to Webflow and HTML & CSS to Webflow. The extension is free too, for Chrome, Edge and other Chromium browsers and for Firefox. If you have an SVG or a bit of HTML that doesn’t convert well, I’d like to see it.

Originally published on the devpack blog.

I run devpack, a site with 500+ free tools that work in the browser. One of them is an image to text tool. It uses Tesseract.js, which is the Tesseract OCR engine compiled to WebAssembly, so the image never leaves your device. I liked that a lot, and for screenshots and scanned pages it worked really well. Most of my tests came back at 94 to 96% confidence.

Then I tried it the way people actually use their phones. I took a photo of a kids’ sunscreen bottle. Blue plastic, white letters, a big yellow sun with “SPF 50” in it. This is what came back:

| FA Be NO
k Jody ; "
| Diana
i Collection
Kid i
“protect & care
v4 oR. a
7 SPF
...
EB ewraone

A few real words in there, buried in junk. A second photo, a baby cologne bottle, was worse. It came back as seven short lines. One of them was just an ampersand, and another was “& TED”.

It turned out there wasn’t one problem. There were four, and they stacked on top of each other.

Problem 1: the engine was reading the photo sideways

This one took me longer to see than I’d like to admit, because on my screen the photo looked perfectly fine.

Phone cameras often don’t rotate the actual pixels when you hold the phone upright. They save the image the way the sensor sees it and add a small piece of metadata, the EXIF orientation tag, that says “turn this 90° when you show it”. Your gallery app obeys the tag. Browsers obey it too when they display an <img>. But I was handing the raw File straight to Tesseract, and Tesseract just reads the pixels.

So the engine was trying to read text that was lying on its side. No wonder it found “ING” and an ampersand.

The fix is small. Decode the file with createImageBitmap and ask for the orientation to be applied, then draw it on a canvas and use that canvas for everything afterwards:

async function uprightCanvas(file) {
  const bmp = await createImageBitmap(file, { imageOrientation: 'from-image' });
  const c = document.createElement('canvas');
  c.width = bmp.width;
  c.height = bmp.height;
  c.getContext('2d').drawImage(bmp, 0, 0);
  bmp.close();
  return c;
}

I also use this same canvas for the preview thumbnail now. Before, the tool showed you nothing at all, so you couldn’t even tell what it was looking at. Now you see exactly what the OCR sees, and if it’s wrong there’s a rotate button.

One more case: some photos really are sideways, with no tag at all. Screenshots of a rotated photo, or images that went through an app that stripped the metadata. For those, if the first read comes back with low confidence, the tool reads a small copy (about 1000 px) at 0°, 90°, 180° and 270°, scores each one, and turns the image if one direction is clearly better. The build of Tesseract.js I use only has the LSTM engine, so its own orientation detection isn’t available. Four quick passes on a small copy did the job instead.

Problem 2: white text on a colored background

With the rotation fixed, the cologne bottle got better, but the sunscreen was still rough. Look at the label again. Most of the important words, like “UVA / UVB PROTECTION” and “NET WT 200 ml”, are white or light blue on dark blue.

Tesseract is trained mostly on dark text on light paper. It handles some inverted text, but on a photo with mixed colors, reflections and a curved surface, it mostly gives up.

So I make two extra copies of the image. The first one is plain grayscale with a contrast stretch: I build a histogram, throw away the darkest and brightest 1% of pixels, and spread the rest over the full 0 to 255 range. The second copy is the same thing, inverted. White-on-blue becomes black-on-white.

The code is not fancy:

// a: ImageData pixels, already grayscale; lo/hi: the 1% and 99% points
for (let i = 0; i < a.length; i += 4) {
  let g = (a[i] - lo) * 255 / (hi - lo);
  g = Math.max(0, Math.min(255, g));
  if (invert) g = 255 - g;
  a[i] = a[i + 1] = a[i + 2] = g;
}

I also switch Tesseract to page segmentation mode 11 (“sparse text”) for these passes. The default mode 3 expects a page with paragraphs and columns. A product label is more like a handful of words scattered around a picture, and mode 11 is built for exactly that.

Problem 3: no single pass gets everything

This was the part I didn’t expect. I assumed one of the variants would just win. It doesn’t work like that.

On the sunscreen bottle, the normal pass found “Diana” and “Collection”. The inverted pass found “UVA UVB PROTECTION” and “NET WT 200 ml”. The original color image, read as a document, was the only one that caught “Water Resistant” on one of my test runs. Every pass also added its own garbage: “Ag”, “as”, “©DDL”, “CJC)”. That’s the sun and the cartoon kid getting read as letters.

So instead of picking one result, I merge them word by word. Tesseract gives you every word with a bounding box and a confidence score, which makes this possible:

1. Collect the words from all passes.
2. Throw out the obvious junk. Words of three or more characters need at least 60% confidence. One and two character fragments need 88%, because that’s where most of the noise lives. Anything with stray symbols like © or an unmatched bracket goes too.
3. If two passes read the same word in the same spot, give it a confidence boost. Two readings agreeing is a much better signal than one reading being sure of itself. This is what saved “Slumber” on the cologne bottle, which came in at 79% in one pass and 54% in another.
4. Where boxes overlap, keep the better word. At first I picked the most confident one, and the result was “Pea” instead of “Peaceful”, because the short fragment happened to score higher. Now the score favors whole words a bit: confidence times the square root of the length.
5. Rebuild the lines by grouping words whose vertical centers are close, then sort each line left to right.

Small print got its own fix: on images that aren’t already large, I run the grayscale and inverted passes again on a copy scaled up 1.6×. That’s where “MOISTURISING” and “ALCOHOL FREE” on the cologne bottle finally showed up.

What it reads now

Here’s the sunscreen bottle after all of this, at 92% average confidence:

Diana
Collection
Kid
protect & care
UVA UVB
PROTECTION
face & body
sunblock lotion
NET WT 200 ml

Compare that with the first output. Every line of plain printed text on that label is there.

The cologne bottle is the one on the cover. I retook it on a table, in plain light, and ran both versions on the same photo. The old single pass got 37% confidence and gave me “QUPPAGES”, “on) 9 fed” and “J NL Sil”. The new version gets 90%:

velOna
UDDLES
MOISTURISING
COLOGNE
ALCOHOL FREE
Peaceful Slumber
DERMATOLOGICALLY
TESTED
Nn nie

Not perfect. “Nn nie” is the little drop icon and the edge of the label, and the bubble letters still lose their first C. But every line you’d actually want to copy is there.

The important thing for me was not breaking what already worked. Screenshots and scans go through the first, normal pass and come back with high confidence, so the extra passes never run. A receipt still reads at 94% and a notes screenshot at 95%, at the same speed as before. The photo mode only kicks in when that first pass is unsure, and it adds about two or three seconds on my laptop.

Bonus: guessing the language

Tesseract needs to know the language up front, and most people never touch the dropdown. So the tool now has an “Auto-detect” option, and it’s the default on the English site.

The trick is simple. It reads the image in English first. English models still read Spanish, French or German letters reasonably well, just without the accents. Then I strip the accents from the result and count common short words for each language: “the”, “and” and “of” for English, “el”, “la” and “que” for Spanish, “der”, “die” and “und” for German, and so on. If another language clearly wins, the tool downloads that language’s data and reads the image again. A Spanish test note came back at 96% with “reunión” and “mañana” spelled correctly.

This doesn’t work for other scripts. You can’t tell Russian from Hindi by reading them with an English model, because you just get nonsense. For those, the tool looks at the languages set in your browser, and if one of them uses another script and the English result is weak, it tries that language.

What still doesn’t work

I want to be honest about this part. The cologne bottle says “CUDDLES” in big bubble letters, and the best the tool manages is “UDDLES”. The “Lady” in script on the sunscreen doesn’t come through at all, and neither does handwriting. These are limits of the engine, and the fix would be a much bigger model. That means tens of megabytes to download, or sending the photo to a server, and the whole point of this tool is that your images stay on your device.

For printed text on real-world photos, though, it went from mostly unusable to pretty good.

If you’re building something similar

• Always apply EXIF orientation before you process a photo. createImageBitmap(file, { imageOrientation: 'from-image' }) does it in one line.
• Show the user the image you’re actually processing. A preview would have shown me the sideways problem in five seconds.
• Read light-on-dark text from an inverted copy. Don’t trust the engine to handle it.
• Merge several passes instead of choosing one. Word boxes and confidence scores make it straightforward, and agreement between passes is a great signal.
• Only pay for the extra work when you need it. A confident first pass means you can skip everything else.

If you want to try it, the Image to Text tool is free and runs entirely in your browser. On a phone there’s a “Take a photo” button. I’d genuinely like to see the photos it still gets wrong.

Originally published on the devpack blog.