Building a Measuring Tool with the Resize Observer API

Web APIs - a very interesting and rarely well explored territory. And yet, there's a large number of unique and very useful APIs that can help you to create tools for your projects.

For example, tracking size changes is key to creating dynamic, responsive experiences. This is where the Resize Observer API comes in.

In this article, we’ll build a measuring tool that displays the width and height of a resizable box in real-time. This is a project that demonstrates the power of the Resize Observer API and Browser APIs in general in a practical and interactive way.

What is the Resize Observer API?

The Resize Observer API is a browser feature that allows you to detect changes to the size of an element. Resize Observer works on individual elements. It works out-of-the-box, and can be a great addition to your toolset for building responsive design and dynamic UIs.

Here’s what makes it great:

• It’s lightweight and easy to use
• You can track changes in size for specific elements, not just the entire viewport
• It’s perfect for building responsive components or resizable widgets

What We’re Building

We’ll create a resizable box with dimensions displayed inside of it. As the user resizes the box, the displayed dimensions will update in real time.

Step 1: Setting Up the Project

First, let’s set up the basic structure for our project:

resize-tool/
├── index.html
├── styles.css
├── script.js

Step 2: The Markup

Here’s a simple layout for our app. The resizable box includes a text span to display its dimensions:

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Measuring Tool with Resize Observer API</title>
  <link rel="stylesheet" href="styles.css">


  <div>



<h2>
  
  
  Step 3: Styling the App
</h2>

<p>We’ll add some styles to make the resizable box more visually appealing:<br>
</p>

<pre class="brush:php;toolbar:false">body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #f0f0f0;
}

.container {
  position: relative;
  width: 80%;
  height: 80%;
}

.resizable {
  position: absolute;
  width: 300px;
  height: 200px;
  border: 2px dashed #007bff;
  background: rgba(0, 123, 255, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  resize: both;
  overflow: auto;
}

 .resizable span {
  background: white;
  padding: 5px;
  border-radius: 4px;
  font-size: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

Step 4: Adding Real-Time Resize Tracking

Now let’s bring the project to life using the Resize Observer API:

resize-tool/
├── index.html
├── styles.css
├── script.js

Step 5: Testing the Tool

1. Open the index.html file in your browser.
2. Drag the corners of the box to resize it.
3. Watch as the dimensions update instantly!

How It Works

1. The Resize Observer API is initialized to monitor size changes for the resizableBox element. It triggers a callback whenever the size of the observed element changes.
2. The Resize Observer Entry provides updated dimensions through the borderBoxSize property.
3. The updated width and height values are extracted and displayed dynamically by modifying the text content of the element inside the resizable box.

Conclusion

In this tutorial, we built a fun and interactive measuring tool using the Resize Observer API. This project demonstrates how browser APIs can simplify complex tasks.
If you try this out or extend it further, feel free to share your creations in the comments!
Also, check out the CKEditor blog for articles around rich-text editors, and start your journey with CKEditor 5 by signing up for a free trial today!