Framer doesn't do that.

Framer uses a React animation library (Framer Motion) with a whileHover prop. When you mouse over an element, JavaScript calls element.style.setProperty() to apply inline styles in real time. When you mouse away, it reverts them. There's no CSS rule. The hover state only exists while your mouse is physically over the element, enforced by JS.

I ran into this while building an export tool for Framer sites (letaiworkforme.com). The exported pages had no hover effects at all because the React runtime was stripped out. Buttons didn't change color. Cards didn't lift on hover. The site felt dead.

I needed a way to capture these runtime hover styles and convert them into real CSS :hover rules. Here's how I did it.

The setup

The tool uses Puppeteer (headless Chrome) to crawl Framer sites. After loading a page, it strips out React's hydration scripts and replaces interactive components with vanilla JS. But hover effects need to be captured BEFORE stripping React, while the runtime is still active.

The properties I care about capturing:

 const HOVER_PROPS = [ 
          'background-color', 'color', 'opacity', 'transform', 'box-shadow', 'border-color', 'border-radius', 'filter', 'scale', 'text-decoration-color', 
]; 

These cover 95% of what Framer sites animate on hover.

Step 1: Find hover candidates

Framer marks elements that have hover animations with data-highlight="true". This is how their own runtime knows which elements to watch for pointer events.

const candidates = document.querySelectorAll('[data-highlight="true"]');  

I filter out anything smaller than 5x5 pixels (invisible or decorative elements), sort by vertical position (top to bottom, so the mouse path is natural), and cap at 60 elements per page. More than that and the capture time gets too long.

Step 2: Snapshot the baseline

Before hovering over anything, I park the mouse at (0, 0) to make sure nothing is in a hover state. Then for each candidate, I record the current inline style values for all the properties I care about:

const baseline = {}; 
for (const prop of HOVER_PROPS) { 
baseline[prop] = el.style.getPropertyValue(prop); 
} 

This gives me the "before" state. Whatever changes after hovering is the hover effect.

Step 3: Set up MutationObserver before hovering

This is the part that took the most iteration. I set up a MutationObserver on the element's parent BEFORE moving the mouse. The observer watches for style and class attribute changes on all descendants:

const mutatedEls = new Set(); 
let classChanged = false; 

const obs = new MutationObserver((muts) => { 
    for (const m of muts) { 
        if (m.attributeName === 'style') { 
            mutatedEls.add(m.target); 
        } 
        if (m.attributeName === 'class' && m.target === el) { 
            classChanged = true; 
        } 
       } 
     }); 

obs.observe(parentElement, { 
    attributes: true, 
    attributeFilter: ['style', 'class'], 
    subtree: true, 
}); 

Why track mutation counts? Because I need to distinguish between two very different things:

1. A real hover effect (the element itself changes background-color, box-shadow, etc.)
2. A variant transition (the hover triggers a full layout swap, with 20-40 child elements all changing at once)

If more than 5 child elements mutate during hover, it's probably a variant transition (handled by CSS class swaps, not inline styles). I skip those and handle them differently.

Step 4: Move the mouse with CDP

I use Puppeteer's page.mouse.move() which dispatches real mouse events through Chrome DevTools Protocol. This triggers Framer Motion's gesture detection the same way a real user's mouse would:

await page.mouse.move(centerX, centerY); // Wait 350ms for the spring animation to settle 
await new Promise(r => setTimeout(r, 350)); 

The 350ms wait is important. Framer Motion uses spring-based animations, so the hover state doesn't apply instantly. It eases in over 200-300ms. If you check too early, you get intermediate values instead of the final state.

Step 5: Diff the styles

After the animation settles, I compare each property against the baseline:

const changed = {}; 
for (const prop of HOVER_PROPS) { 
    const val = el.style.getPropertyValue(prop); 
    if (val && val !== baseline[prop]) { 
        changed[prop] = val; 
    } 
} 

If background-color went from "" to "rgb(59, 130, 246)", that's a hover effect. If nothing changed, the element doesn't have a real hover animation (maybe data-highlight was set for a different reason).

Step 6: Verify by un-hovering

This is the step that catches false positives. I move the mouse away and check if the styles revert:

await page.mouse.move(0, 0); 
await new Promise(r => setTimeout(r, 350)); 
let reverted = 0; 
for (const prop of Object.keys(changed)) { 
    if (el.style.getPropertyValue(prop) !== changed[prop]) { 
        reverted++; 
    } 
} 

if (reverted === 0) return false; // not a hover effect

If the styles DON'T revert, it wasn't a hover effect. It was a click handler, a state change, or some other one-time mutation. This verification step filters out about 15% of false positives on a typical Framer site.

Step 7: Convert to CSS :hover rules

Once I have the verified hover properties, I store them as data attributes on the element:

el.setAttribute('data-framer-hover-id', 'fh42'); 
el.setAttribute('data-framer-hover-self', JSON.stringify(changed)); 

Later, the URL rewriter reads these attributes and generates real CSS:

[data-framer-hover-id="fh42"]:hover { 
    background-color: rgb(59, 130, 246); 
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); 
    transition: all 0.2s ease; 
} 

The transition is added so the hover doesn't snap on/off. Framer Motion uses spring animations for hover, but a CSS ease transition is close enough for exported sites.

The third type: CSS variant hovers

Beyond inline-style hovers, Framer has a second hover mechanism that works through CSS class swaps. When hovering, Framer swaps a class like framer-v-abc123 to framer-v-xyz789. Each class points to a different set of CSS rules already in the stylesheet.

The MutationObserver catches this because it also watches for class attribute changes. When I detect a framer-v-* class swap during hover:

1. Record the base class and the hover class

2. Move mouse away and verify the class reverts to the base

3. Store both class names as data attributes

4. The rewriter then generates a CSS rule that swaps classes on :hover

This handles hover effects that change layout, typography, or anything too complex for inline style manipulation.

Numbers

On a typical Framer site with 30-40 hoverable elements:

• Capture time: 15-25 seconds (350ms per element for hover + 350ms for un-hover + overhead)

• Inline style hovers detected: 5-15

• Variant hovers detected: 2-8

• False positives filtered by revert check: 3-6

• Generated CSS rules: 10-20

What I'd do differently

The 350ms wait per element is the biggest bottleneck. I could batch elements that are far apart on the page and hover them in parallel (one mouse can only be in one place, but elements that don't overlap could theoretically be tested concurrently with separate CDP sessions). Haven't tried this yet.

I also considered using getComputedStyle() instead of reading inline style properties. The problem is getComputedStyle includes inherited and stylesheet styles, making the diff noisy. Inline style.getPropertyValue() only returns what JavaScript explicitly set, which is exactly what Framer Motion does.

The full crawler is part of FramerExport, which exports Framer sites to static HTML/CSS/JS. The hover capture is about 200 lines of the ~1,100 line crawler.

If you've run into similar problems with capturing runtime-generated styles, I'd like to hear what approach you took.

This newsletter will be a little different from the ones before. In this edition, I'm excited to launch the Xano Cohort program, which I will be running. The program will start on May 6th for 6 weeks.

Why I am starting this:

Whenever I talk to people about Xano, the first thing they mention is the scarcity of content that focuses on building with Xano, as opposed to merely listing its features, similar to the wealth of tutorials available for Bubble. So, I thought, why not solve this problem?

In February, I ran the first batch with six participants, and all of them found it quite useful. Two out of six actually migrated their live Bubble apps to Xano and were happy about the switch. Two participants are exploring freelancing gigs, and the remaining two are building software using Xano. Therefore, I thought, let's scale this up a bit this time (for the current batch, I am opening 15 seats).

Why a cohort, not a course?

I want to engage with people who have the time to commit. Xano has a steep learning curve, so I'm looking for participants who can dedicate at least 7-10 hours a week to practice actively. This is something I cannot ensure if I merely offered a course. In the past, when I taught Bubble plugin building, it was unclear who actually built any plugins using my course. Consequently, the course became a black box, with no feedback loop. People would buy it and hardly watch it, let alone build anything.

Who is this cohort for?

• Those who know a frontend programming language and want to become full-stack developers.

• Those who have built products on Bubble.io and want to migrate their backend to Xano.

• No-code freelancers who want to learn new skills.

What will be the final outcome?

• Learn how to build a scalable backend using Xano.

• Learn to design efficient database structures.

• You will complete the program with two projects.

• Live QA sessions each week along with discord group.

Let me know if you are interested or someone in your circle interested.

For more details, check out here

One think before moving forward- If you are reading this post in your email, you must have subscribed to the Bubble Weekly Newsletter. That's why you are receiving this email. If you don't want to continue getting these emails, you can unsubscribe it.

Watch Video if you prefer-

Understanding Workload Units in Bubble

In the world of Bubble.io, a popular no-code platform, understanding and managing workload units is crucial for optimizing app performance and managing costs. Workload units are a measure of the computational resources consumed by your app on Bubble's servers. Just like you measure weight in pounds or kilograms, Bubble measures the computational work in workload units.

The Concept of Workload Units

Think of workload units as a way to gauge the stress your application puts on Bubble's servers. This measurement is directly tied to Bubble's pricing structure, making it essential for developers to monitor and manage their app's workload units efficiently.

Why Workload Units Matter

Every action your app performs, from database modifications to API calls, consumes a certain number of workload units. These units are a reflection of the server resources required to execute these actions. Bubble offers a transparent overview of how much each action consumes, but the calculation is not always straightforward.

How Workload Units Are Calculated

Consider booking a luxury hotel room as an analogy. The advertised cost is not the only expense; there are additional costs like transportation, tips, meals, and more. Similarly, in Bubble, an action like modifying a database doesn't just consume its base workload units. You also need to account for the actions required to locate the data and any subsequent updates or queries, each adding to the total workload units consumed.

Key Factors Influencing Workload Units

• Database Searches: The complexity and volume of your database searches significantly impact workload units. Optimizing search constraints can lead to more efficient searches and lower consumption.

• Data Transfer: The amount of data sent to the client side, governed by privacy rules, also affects workload units. Less data transfer means fewer units consumed.

• Page Loads: The process of loading a page, including fetching JavaScript, data, and executing page load events, consumes workload units. Optimizing what loads on a page can lead to savings.

• Actions and Workflows: Server-side actions and workflows consume workload units, while client-side actions do not. Prioritizing optimization for frequently called actions can reduce overall consumption.

Strategies for Reducing Workload Units

1. Optimize Database Searches: Use precise search constraints to minimize unnecessary data processing.

2. Manage Data Transfer Efficiently: Implement strict privacy rules to limit the data transferred to the client side.

3. Optimize Page Loads: Avoid unnecessary loading of elements and data on page load events to reduce workload units.

4. Focus on Frequent Actions: Identify and optimize the actions and workflows that are called frequently and consume the most workload units.

5. Use Back-end Workflows Wisely: Choose between parallel and sequential execution based on your needs to avoid excessive workload unit consumption.

6. Monitor Workload Units: Regularly review your app's workload unit consumption through Bubble's logs and metrics to identify areas for improvement.

Conclusion

Managing workload units in Bubble is about understanding the factors that contribute to their consumption and implementing strategies to optimize and reduce this consumption.

Remember, optimizing workload units should not compromise the functionality or security of your app. It's about finding the right balance between performance and resource consumption.

For more detailed insights into managing workload units in Bubble, watch the full video here.
Follow me on Twitter.

Follow these steps:

Step 1:

Enable the "Expose the option to add an ID to HTML elements" by navigating to Settings > General, and scrolling to the bottom of the page.

Step 2:

Locate the element for which you want to assign a custom ID, and enter the desired ID in the "ID Attribute" field.

Step 3:

Create the plugin using "text" as the input and pass this ID to the plugin's input.

Step 4:

var element = document.getElementById(properties.html_id);
  console.log(element);

That's it..

That's all for this blog. Subscribe for more future updates. Thank you!

Follow me on Twitter.

Checkout My Bubble Plugin Course - Use coupon code "THEBUBBLEGROUP" at checkout for 10% discount.

Let me demonstrate with an example.

I will call this GET API: https://api.thecatapi.com/v1/images/search

GET API Example -
Copy and paste this code into the action function.

    const response = await fetch('https://api.thecatapi.com/v1/images/search')
    const body = await response.json()
    const cat_image = body[0].url

    return {
        "cat_image":cat_image 
    }

POST API Example-

 const url = 'https://dummy.restapiexample.com/api/v1/create';
//body request
  const data = {
    name: 'value1',
    salary: 'value2',
    age: 'value2'
  };    


  try {
    const response = await fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(data)
    });

    const responseData = await response.json();
    console.log('Success:', responseData);
  } catch (error) {
    console.error('Error:', error);
  }

That's all for this blog. Subscribe for more future updates. Thank you!

Follow me on Twitter.

Checkout My Bubble Plugin Course - Use coupon code "THEBUBBLEGROUP" at checkout for 10% discount.

Let me demonstrate with an example.

I will call this GET API: https://dummy.restapiexample.com/api/v1/employees

We will be using jQuery for this purpose.

 $.getJSON('https://dummy.restapiexample.com/api/v1/employees')
    .done(function(json_data) {
         //success 
        console.log("data is " , json_data);
    })
    .fail(function(jqXHR, textStatus, errorThrown) {
        //come here if there is any error while calling the api
        console.error("Error: " + textStatus + ", " + errorThrown);
    });

POST API Example-

$.post('https://dummy.restapiexample.com/create', {name:'test',salary:'123',age:'23'}    )
  .done(function(response) {
    console.log('Success:', response);
  })
  .fail(function(jqXHR, textStatus, errorThrown) {
    console.error('Error:', textStatus, errorThrown);
  });

That's all for this blog. Subscribe for more future updates. Thank you!

Follow me on Twitter.

Checkout My Bubble Plugin Course - Use coupon code "THEBUBBLEGROUP" at checkout for 10% discount.

So let's assume you are building the plugin that consists of client-side element and you are passing "anything with list" as the input.

Now, experiment with the input data in the plugin editor.

var length_data = properties.anything_data.length(); //lenght of input list

    var properties_data = properties.anything_data.get(0, length_data); //input data list

    console.log("Length", length_data);

    console.log("All data", properties_data);

    //looping over list
    for (let idx=0; idx < length_data; idx++){
            //get the one item at time
                let list_item = properties_data[idx];
             //this will list all the column of the given data type as the json array              
               console.log("list properties", list_item.listProperties());

              for(let prop=0; prop<list_item.listProperties().length; prop++){

                 //column name along with type , for ex- coulumn_name_type     
                 console.log("key:", list_item.listProperties()[prop]);  //event_name_text - event_name is the column name and text is the type
                 //its value
                 console.log("value:", list_item.get(list_item.listProperties()[prop]));

             }

        }

That's all for this blog. Subscribe for more future updates. Thank you!

Follow me on Twitter.

Checkout My Bubble Plugin Course - Use coupon code "THEBUBBLEGROUP" at checkout for 10% discount.

That's all for this blog. Subscribe for more future updates. Thank you!

Follow me on Twitter.

Checkout My Bubble Plugin Course - Use coupon code "THEBUBBLEGROUP" at checkout for 10% discount.

Go to the "API Calls" section of the plugin editor.

To start the API calls, click on "Add an API connection".

Now, simply provide the name of the API you are setting up. For example, we will set up the "Stripe" API calls.

Configure the authentication required for your API calls. The type of authentication you select here will determine the corresponding fields exposed in the Bubble plugin.

Now, for example, if we want to set up this API for API calls-

Click on "Initialize Call" to set up the API calls.

That's how you set up the API calls in the Bubble plugin editor.

That's all for this blog. Subscribe for more future updates. Thank you!

Follow me on Twitter.

Checkout My Bubble Plugin Course - Use coupon code "THEBUBBLEGROUP" at checkout for 10% discount.

Follow these steps:

Step 1:

Define the first field input as the "App Type" and the second as a dynamic value with the type of "first input type."

Drag the element to the editor, you will see two inputs:

- In the first input, provide the Input type.

- In the second input, supply the data.

Step 2:

Now, experiment with the input data in the plugin editor.

     //compute the length of the list 
    let list_length = properties.input_data.length()
    console.log("Length is ", list_length);
    //get the input data list
    var list_data =  properties.input_data.get(0, list_length);
    console.log("List data" , list_data);

    //loop over input list
     for (let idx=0; idx < list_length; idx++){
            //get the one item at time
                let list_item = list_data[idx];
             //this will list all the column of the given data type as the json array              
               console.log("list properties", list_item.listProperties());

              for(let prop=0; prop<list_item.listProperties().length; prop++){

                 //column name along with type , for ex- coulumn_name_type     
                 console.log("key:", list_item.listProperties()[prop]);  //event_name_text - event_name is the column name and text is the type
                 //its value
                 console.log("value:", list_item.get(list_item.listProperties()[prop]));

             }

        }

That's all for this blog. Subscribe for more future updates. Thank you!

Follow me on Twitter.

Checkout My Bubble Plugin Course - Use coupon code "THEBUBBLEGROUP" at checkout for 10% discount.

What's the difference between them?

If you set the parameter type to public-

Anyone with access to the page can view and modify the value, making the parameter value public.

If you set the parameter type to hidden-

The plugin installer cannot change the value, but everyone can view its value using the inspect element feature.

If you set the parameter type to secret-

No one can see the value, and they cannot change it either.

That's all for this blog. Subscribe for more future updates. Thank you!

Follow me on Twitter.

Checkout My Bubble Plugin Course - Use coupon code "THEBUBBLEGROUP" at checkout for 10% discount.

How can this issue be resolved?

You can incorporate any type of UI based on your element's functionality. However, it is common for people to use a logo in this situation. In this article, I will demonstrate how to add a logo.

$(instance.canvas).append(`<div style="background-color: #E7E9EB;"><img src="logo_image_url.png" style="width: 100%; height: 100%;"></div>`)

You need to copy and paste this code snippet into the preview function.

That's all for this blog. Subscribe for more future updates. Thank you!

Follow me on Twitter.

Checkout My Bubble Plugin Course - Use coupon code "THEBUBBLEGROUP" at checkout for 10% discount.

So, what should you do instead? Define a temporary variable.

It's better to define it within the "initialize" function.

//define the variable
instance.data.my_variable= "this is sample Data";

Now you can use the "instance.data.my_variable" anywhere in the client side function.

That's all for this blog. Subscribe for more future updates. Thank you!

Follow me on Twitter.

Checkout My Bubble Plugin Course - Use coupon code "THEBUBBLEGROUP" at checkout for 10% discount.

Step 1:

Navigate to the "Element" section of the Bubble editor and create a new client-side element.

Step 2:

Scroll down to the "Element Code" section within the element.

Step 3:

Search for the library you wish to import and obtain its CDN URL (refer to this article to find the CDN URL). Then, insert the following code into the "Element Code" section.

<script src="https://www.WebRTC-Experiment.com/RecordRTC.js"></script>

That's it, you have load the library.

That's all for this blog. Subscribe for more future updates. Thank you!

Follow me on Twitter.

Checkout My Bubble Plugin Course - Use coupon code "THEBUBBLEGROUP" at checkout for 10% discount.

For example, if you refer to the image above, the RecordRTC library is hosted on the WebRTC server, but not all libraries are hosted on their own servers, especially open-source ones.

However, most of these libraries are hosted on CDNs (Content Delivery Networks). CDNs are file-hosting services that provide multiple versions of common libraries. They typically offer high-performance and location-cached files, ensuring that your users receive the files from geographically close locations, regardless of where they are.

Therefore, if you need any library, it is better to use these CDNs rather than uploading it to your own Bubble server.

Here are some prominent CDNs for JavaScript libraries:

- CDNJS - JSDelivr - Unpkg

Visit these CDNs and search for the library you need. You will find the URL for that library, which you can use in the plugin editor to load the library on the client side.

That's all for this blog. Subscribe for more future updates. Thank you!

Follow me on Twitter.

Checkout My Bubble Plugin Course - Use coupon code "THEBUBBLEGROUP" at checkout for 10% discount.

Let's say you want to build an audio recorder plugin; you might search for it on Google but end up finding numerous libraries and struggle to decide which one to choose.

Let me help you with this process:

Step 1:

List all the features you want in this plugin.

Since we want to build an "Audio Recorder" plugin, let's write down its sub-features:

- Start audio recording - Stop audio recording - Pause/resume recording - Option to upload recording to the server - Stop recording at a pre-defined time

Step 2:

Visit npm and search for JavaScript libraries using relevant keywords.

Step 3:

Review each library's documentation to determine if it supports the features mentioned in Step 1.

Step 4:

Don't forget to check the issue section on GitHub for each library. See if people are answering questions and if there's a good community of developers. This way, if you encounter issues in the future, there will be people to help you.

Step 5:

Check the size of the library, which is important if you're using it on the client side.

That's all for this blog. Subscribe for more future updates. Thank you!

Follow me on Twitter.

Checkout My Bubble Plugin Course - Use coupon code "THEBUBBLEGROUP" at checkout for 10% discount.

Use the following code to upload Base64 data to Bubble File Manager.

context.uploadContent(properties.file_name,base64_data, function(err, url){

                        console.log("URL", "https:"+url);

                    });

Do read this post on how to format base64 data before sending it.

That's all for this blog. Subscribe for more future updates. Thank you!

Follow me on Twitter.

Checkout My Bubble Plugin Course - Use coupon code "THEBUBBLEGROUP" at checkout for 10% discount.

By default, Bubble exposes the "fileupload" API for uploading base64 data.

Use the following code to upload Base64 data to Bubble File Manager.

var payload = {
        name: properties.file_name,
        contents: base64_data
    };


var options = {
    uri: properties.website_home_url + "fileupload",
    method: "POST",
    json: payload
};

const response = await context.v3.request(options);

That's all for this blog. Subscribe for more future updates. Thank you!

Follow me on Twitter.

Checkout My Bubble Plugin Course - Use coupon code "THEBUBBLEGROUP" at checkout for 10% discount.

But the real question is how to do it -

Follow these steps-

Step 1:

Create the variable type "File" as the exposed state-

Step 2:

Create a variable to hold the file URL (remember to add the "https" prefix if it's not already included) and then expose the variable.

var file_url = "https"+url_without_http; 
instance.publishState("uploaded_file",file_url);

It will automatically expose the file-name too.

That's all for this blog. Subscribe for more future updates. Thank you!

Follow me on twitter.

Checkout My Bubble Plugin Course - Use coupon code "THEBUBBLEGROUP" at checkout for 10% discount.