DivMagicCom
It doesn't copy the styling accurately
I just bought DivMagic.
When I try to copy the style of the body > section.featured element:
If I choose Tailwind output, I get:
https://play.tailwindcss.com/2ug6BEVUgF
If I choose inline CSS, I get:
https://divmagic.com/studio/c/69dYeCjoVz
What's the right way to invoke it to make it work? :)
Btw, when I try to copy the styling of one of the cards, it doesn't let me:
The card is clickable, and after clicking the DivMagic button and then clicking the card, the site follows the link that clicking on the card leads to :/
And if I try to copy the styling of the whole cards section (body > main),
it doesn't copy the css animation (
animation: wobbly 3s ease-in-out infinite;) even if I select inline-CSS instead of Tailwind output:
https://play.tailwindcss.com/2FKlyahKjM
(The fire emoji is not wobbling in the copied version.)
In most cases, choosing Inline CSS or Tailwind will give the same output.
There could be differences if the styles can't be mapped 1-1 to Tailwind. For example, DIvMagic will convert colors to closest Tailwind matches, try to modify height/width/margin/padding values to fit Tailwind ones if it can. If not it will use arbitrary values.
This is the element you're trying to copy, right? https://divmagic.com/studio/c/EzRQnjxclP
Please make sure you select the right element that includes the background image (if that's the issue you're referring to?)
It becomes easier if you use DevTools:
Regarding clickable elements, you can press "D" while hovering over the element. That will invoke DivMagic without clicking on the button. We will add an option to set that key.
Copying animations is not currently supported but we will add that option. Animations usually increase the code output size and we were trying to keep the output size as small as possible so it is easier for you to customize the design for your own website.
Thanks for your quick reply, I really appreciate it :)
- Clicking D after clicking the icon doesn't work for me, it has no effect. I'm using Chrome on Win11 btw. I also tried Shift+D, doesn't work either. And AFAIK nothing else is bound to that key, maybe it's a focus issue? Maybe it's relevant that my windows mouse is set to "focus follows mouse" behavior? E.g. when I hover my mouse over a window, it receives keyboard input even if it's not elevated (X mouse behavior).
These are my settings, but it should affect anything inside the browser, right?
It must be something else then..
- Is there a shortcut key to confirm the style-copy popup that's equivalent to clicking the "Copy" button? I'm asking because 1. the mouse path between the toolbar icon and the popup's Copy button is far because it always opens at the lower right corner and 2. even if I move the popup, it doesn't remember its position and the next time it opens again at the lower right corner, so it's cumbersome to operate, especially with a touchpad on a laptop without a mouse (always having to move the pointer far up and down, and then aiming with the touchpad at the small Copy button), and especially when the workflow involves repeating this process many times. So I suggest 1. adding a keyboard shortcut that's equivalent to pressing the "Copy" button 2. if technically possible, as soon as the user has selected the element to copy, the Copy button in the popup should be focused, so that pressing Space/Enter will press it, but with the added advantage (compared to just having a keyboard shortcut) that it allows Shift-TAB navigation in case the user wants to go upwards in the copy settings to change a setting before hitting Enter to copy 3. the popup should remember its position relative to the viewport and reappear there on the next invocation.
- I actually didn't necessarily want to copy the background image, the important point for me was that the styling should be copied accurately, e.g. the rounded corners look completely different after copying! How to avoid that?
- And yeah, I assumed that DivMagic would quantize the style space to be able to map to tailwind, that's why I also tried to copy as inline css, which should involve style quantization/rounding/truncation, but it also looked different when I copied it with inline css. E.g. the rounded corners looked different, the fire emoji wasn't animated, and: Another thing I noticed: When I tried to copy something that has a modern trendy styling (e.g. glassmorphism), DivMagic fails to copy it accurately (even with inline css)!
E.g. https://magicui.design toolbar:
Copied as inline CSS looks very different:
https://divmagic.com/studio/c/7EfF82nxH8
And you can see that the hover states/animations also don't work. (And the "Search..." placeholder disappeared.)
Similarly here: https://toddle.dev
copied as inline CSS:
https://divmagic.com/studio/c/ClZ7WCgxKd
The button hover states/animations also don't work there.
And if I copy this section on the magicui site using inline CSS mode:
The styling of the cards is different, e.g. in the original they're all the same size, but in the copy they aren't:
And the vignette radial gradient is missing..
And if I copy this part (again using inline CSS)
it looks very different as well: https://divmagic.com/studio/c/7WKF3JM47x
And if I try to copy the navbar on https://psycatgames.com using inline CSS:
It looks very different as well:
https://divmagic.com/studio/c/4Z6kz7xZkM
:(
Btw, I used these settings for the above examples, they should copy the styling in the most accurate way, right?:
-
Also, the space between elements is sometimes not accurately copied, e.g. if I copy the pricing section from https://www.outseta.com/pricing as inline CSS: https://divmagic.com/studio/c/7uZ0miuJdc There is less vertical space between the text lines in each card than in the original. The cards are more cramped/condensed vertically.
-
I also noticed that sometimes the wrap behavior is different for copied elements (media queries), i.e. I had situations where, when I reduce the width of the viewport, instead of wrapping, the whole design was scaled like an image without maintaining the aspect ratio of the UI and its constituents. I forgot which site that was, I'm trying to find that example again..
-
I don't have the DivMagic tab in DevTools. How to enable it?
Another example:
If I copy the "glass" item from https://css.glass using these settings:
I get essentially nothing that's visible:
https://divmagic.com/studio/c/CMGgVrcvSf
And if I try to copy the background (below the glass card), DivMagic glitches the site, and when I click copy, I get this:
https://divmagic.com/studio/c/17oYURTUQB
And when I try to copy this area on this page https://www.goodbooks.io/books/zero-to-one
whether I copy in Tailwind or inline-CSS mode, and whether I choose adaptive or exact mode, it doesn't copy the buttons:
https://divmagic.com/studio/c/7hTvMKSW16
When I try to copy the rightmost button directly with DivMagic using inline-CSS and exact mode, it also doesn't work: https://divmagic.com/studio/c/E5laG6cuEZ
First of all, thank you very much for all the great feedback!
I'll answer all your questions and issues but before that I should make a general note. I will also try to make this more clear on our landing page because we get a lot of emails regarding style mismatches.
The primary goal of DivMagic is to serve developers by allowing them to go from a business idea to a nice looking UI without thinking about the design. All features we added try to work towards this goal. This means that the copied code should be as small and easily understandable as possible so developers can make code changes easily.
Now let's go through the issues and I believe my statement above will be more clear.
- The key binding for "D" becomes active with a JS key listener event. There's a tricky situation with Chrome extensions, which is that, when popup is active, the focus stays on the popup. You can try that by clicking on the popup and pressing "Tab". The tab button will only highlight the links in the popup and not the page itself. For the key "D" to become active, you'd need to click on the page one time which will bring the focus back to the page. This becomes a non-issue if you turn on "Auto Hide Popup" become then the popup disappears automatically.
Normal popup behavior (You have to click on the page to close the popup and change focus)
https://github.com/DivMagicCom/DivMagic/assets/119697666/55002525-25a8-427e-89ae-e90e33f3ed58
Auto-hide behavior (Popup closes automatically so you only need one "D" press)
https://github.com/DivMagicCom/DivMagic/assets/119697666/92d61532-5e9b-4c51-977b-f9d90d47d614
-
That's a great point. We will add all the features you listed.
-
For some reason that website loads differently for me? I don't see those rounded borders that you see?
-
Hover states and animations are not copied on purpose. The reason is my first point above, these usually increase the output size a lot so we decided to filter them out. I do realize these are important for some users so we're going to include them in the next release under one of the Copy Mode options.
To be sure, you're using the December 20 version, right? The testimonial section not having correct widths is not expected. I tried copying the same components and the tool got the correct fixed widths for me: https://divmagic.com/studio/c/8e5L7EyP37. I will look into this more.
The vignette radial gradient is missing is also expected. Here's why. Let's see it in the DOM:
This is not a style on the actual element, they added a separate, absolute positioned element to give that background effect.
Here's how DivMagic sees this. "There's this div that has no children and no text. It has a lot of styles. It seems like it doesn't contribute to the style and it will increase the output size too much. I will skip this." This goes with the first point I mentioned. If DivMagic includes all elements, then the output becomes very big and long and developers can't modify it easily. So, DivMagic sometimes does sacrifices in order to make the output code easily customizable. This is a part where "Exact Copy" mode will get it. (See https://divmagic.com/studio/c/9pRsnAyw4z). Exact mode will make DivMagic get all styles even if it thinks they're not very necessary. This will give an output that looks more like the source but the code size will be much bigger.
- This is again related to DivMagic thinking there are unnecessary elements. Here's the DOM:
The developers of this website added an empty div with paddings to put space between elements. One could argue whether this is good practice or not but regardless of that, DivMagic will again think that this is not needed. It will say "A div with almost no style, no text, no color. This can't be affecting the style. I will skip this."
Copying that component with "Exact" mode will give the correct spacing but the component depends on grid display and that will look different. Exact mode copies pixel level styles so it looks different if viewed on a different screen size and most importantly font family. We're trying to find the right balance here where we include the necessary elements while also keeping the output code size small.
-
That should not happen often. When it does, you can try copying a smaller component. For example, if you copied full page and it looks strange when viewport changes, try copying a specific component and see how it is different. There's a reason for why that might happen but it is a very long description so I'll skip it for now. However, we are aware of it and working on the solution.
-
You need to enable it from the popup settings, then it will show up. Note that you might need to open a new tab after enabling it for it to show.
-
Glass website. Here's copied output: https://divmagic.com/studio/c/AniFY7ESkP
The reason why your output displays nothing is because you copied the "glass" element there and that element itself doesn't display anything. It only makes sense when it is put on top of another element. For situations like that, you can try copying the full page to see how it looks.
-
I was wondering if you had other extensions that might be interfering with the websites you visit? I copied that whole page it got the buttons correctly: https://divmagic.com/studio/c/EwMsa5zHTJ. Just copying the buttons also works: https://divmagic.com/studio/c/9lKrSqarAz
Once again, thanks for all the feedback. Most of these issues come from the fact that DivMagic tries to minimize the output code and it makes sacrifices by filtering out some styles. We are working on making this more customizable so users can choose the range of details that they want in the output.