Sandbox adventures: Learning PDF features and frontend tricks in a live playground

As a technical writer, my job involves more than just documenting how features work. To create meaningful, accurate, and helpful content, I often find myself diving into the product itself — learning how features behave, experimenting with code, and testing edge cases. One of the tools that helped me tremendously on this journey is Nutrient Web Playground.

What started as simple curiosity turned into a surprisingly engaging hands-on learning experience. I wasn’t just exploring documentation; I was coding, breaking things, fixing them, and learning along the way.

Below is a walkthrough of the actual things I tried, what I struggled with, and what stuck with me.

Mentionable users in comments

The first feature I explored was commenting in PDFs, because I wanted to programmatically specify which users could be mentioned in comments. This led me to explore how the SDK lets you pass in a mentionableUsers array during initialization.

It was my first exposure to structured SDK configuration in this context, and it gave me a better sense of how frontend apps pass around state and metadata. By setting this up, I learned how object configuration works in JavaScript, how structured data is passed into SDKs, and how customizing user experience often comes down to API hooks.

What I learned

• How object configuration works in JavaScript
• How structured data is passed into SDKs
• How customizing user experience often comes down to API hooks

Simulating annotation hover events

Annotations in Nutrient Web SDK don’t emit native hover events, which I found both interesting and limiting. But instead of stopping there, I explored how to simulate this behavior using DOM event listeners and custom renderers.

This taught me a valuable frontend lesson: Limitations often have workarounds if you understand the underlying document object model (DOM). Using mouseover listeners, closest() DOM traversal, and customRenderers, I simulated a hover effect that behaved just the way I needed.

What I learned

• DOM manipulation basics — event listeners and dynamic nodes
• Using SDK renderers to enhance interactivity
• How to use browser development tools to explore SDK internals

Changing the default button focus in a delete modal

This one was subtle but practical. I noticed that the delete confirmation dialog in the SDK defaulted to focusing the Cancel button, and I wanted it to focus on Delete instead. Thanks to this guide, I figured out how to manipulate the modal after it’s rendered using setTimeout() and DOM traversal.

It was a perfect example of learning how to think in browser time — understanding that UI rendering is asynchronous. and sometimes, you need to delay your logic.

What I learned

• Timing and lifecycle of UI elements
• Using setTimeout to wait for DOM rendering
• Even small UI changes can meaningfully improve UX

Exporting and importing annotations with Instant JSON

This was my entry point into learning how structured data is serialized and deserialized. I tried exporting annotations to Instant JSON, inspecting the JSON output, and reimporting them into the document.

Understanding this roundtrip helped me appreciate the importance of object immutability, schema fidelity, and how annotation properties translate to a storable format.

What I learned

• Serialization and deserialization in frontend applications
• Working with immutable annotation objects
• How to test output by inspecting JSON and comparing behaviors

Adding watermarks using text annotations

For watermarking, I explored how to use a TextAnnotation to programmatically add a watermark with dynamic text such as Generated for {username}. It was a straightforward exercise, but it taught me how placement, font size, and page indexing work in annotations.

What I learned

• How annotations are positioned with bounding boxes
• Page indexing and multipage document logic
• Styling annotations through code

Measuring areas

This was one of those deep-dive explorations where I really had to persist.

I wanted to programmatically measure areas of different shapes — ellipses, polygons, rectangles — within a PDF using Nutrient Web SDK. While I had already learned about line and polyline measurements earlier, this one felt more involved, and honestly, I hit a few walls before I figured it out.

Measuring the area of an ellipse

I started with an ellipse. I discovered that the EllipseAnnotation could be configured with measurement properties similar to lines and polylines. But it took some trial and error before I figured out how to correctly set the bounding box and center. I had to calculate the center of the ellipse from its bounding box dimensions and pass the radii explicitly. It was frustrating at first — things weren’t showing up and then the area wasn’t being computed — but eventually, with the right bounding box and measurement configuration, it worked.

What I learned

• measurementScale defines how PDF points map to real-world units
• measurementPrecision controls the decimal granularity of the output
• isMeasurement: true marks the annotation for measurement

Once I got it right, seeing the measured area rendered on the PDF was a satisfying moment.

Measuring the area of a polygon

Next, I tackled measuring the area of a polygon using PolygonAnnotation. This one required me to define multiple points — I initially used three for a triangle — and then compute an accurate bounding box. Unlike a rectangle, where the bounding box is straightforward, polygons required me to calculate the minimum and maximum of all X and Y coordinates to set the bounding box dynamically.

What surprised me here was how critical the bounding box dimensions were to getting the area measurement to render correctly. This is where I probably spent the most time debugging and learning.

Learning by doing

Every one of these experiments taught me something new — not just about Nutrient Web SDK, but about how modern frontend development works.

If you’re a writer like me, or a QA engineer, a product person, or someone just curious about coding, I highly recommend using a playground. It’s one of the most empowering tools for learning by doing — and having fun while you’re at it.

FAQs