Why Retool chose Hypertune
Read more
Hypertune

Why Retool chose Hypertune for feature flags and experimentation on their Next.js marketing site

Retool lets you build internal software with AI. Learn how they scaled with feature flags and experimentation on their Next.js marketing site with Hypertune.

04 Nov 20254 min read

Miraan Tabrez
Founder
Why Retool chose Hypertune for feature flags and experimentation on their Next.js marketing site

Retool lets you build internal software with AI. Their marketing site is built in Next.js, deployed on Vercel, and gets millions of visits a month.

The team wanted to use feature flags on the site, and run A/B tests, multivariate tests, and personalization campaigns.

They previously used a visual A/B testing tool but this didn't scale with their Next.js setup.

The problem with visual A/B testing tools

Visual A/B testing tools like VWO work by manipulating the page DOM after the initial render. They target DOM elements by their CSS selector and then run client-side JavaScript to change their contents to render the correct experiment variant for the visitor.

This approach has several problems:

Layout shift, flickering, and FOOC (flash of original content) — Since the changes are only applied after the initial page render, the original content may briefly show first, resulting in a flicker.
Page load delay — One solution to preventing a flash of the original content is to hide the page until the changes have been applied, but this increases the time the visitor is staring at a blank screen.
Brittleness — If the underlying page structure changes, the CSS selector targeting breaks, so the tool stops rendering experiment variants correctly, invalidating results.
Unhandled re-renders — If the site is built in React or a framework like Next.js, the page can re-render, showing the original content instead of the experiment variant, again invalidating results.

This results in:

Data contamination — Experiment variants aren't always rendered correctly, contaminating experiment data, and invalidating results.
Poor UX — Flickering degrades the user experience and hampers conversion rates.
Team friction — Collaboration between marketing and engineering is difficult.

Why traditional feature flag and experimentation tools didn't help

To solve these problems, they tried popular tools for feature flags and experimentation, but they had their own set of problems:

Complex integration — They had separate SDKs for the server and client that needed to be manually stitched together.
Unreliable flag updates — The SDKs couldn't reliably get flag updates in serverless environments like Vercel deployments. They tried to fetch updates in the background but serverless instances were frozen between requests, preventing this. So flags couldn't be reliably updated.
High latency — Serverless instances were short-lived so SDK initialization became a bottleneck, adding latency to page loads.
Layout shift and flickering — Client-side SDKs initialized independently of the main page load, causing layout shift and flickering.
Fragmented rollout logic — Feature flags and experiments lived in separate systems, so managing a single feature rollout across both became complex.
Risk of contamination — There was a risk of checking experiment flags (and therefore logging experiment exposures) for users who didn't pass the main feature flag check, resulting in contaminated data and invalid results.
Not built for content — Marketing wanted to experiment not just on booleans but structured content like headlines, layouts, CTAs, etc.

Hypertune: a new approach

Instead of manipulating the DOM after the page loads, Hypertune is integrated directly in the Next.js codebase. You can think of it like a headless CMS but with the full power of a feature flag and experimentation system.

Here's how Retool set it up:

1. Engineering defined the schema

They defined a configuration schema for the marketing site. This can include simple boolean feature flags, e.g. to control whether or not to show a banner. But it can also include richer object flags, e.g. to control structured content like the banner's title, text, and CTA.

They also defined conversion event types, and the Context type that contains visitor attributes like their anonymous ID, user agent, referrer, UTM parameters, etc.

2. They integrated the SDK

The Hypertune SDK worked on both the server and the client and was easy to integrate.

Since it's optimized for serverless environments like Vercel deployments, flag updates were reliable.

By default, it initializes from Hypertune Edge with low latency (typically < 25ms), but they set up Hypertune's Vercel Edge Config integration to make it even faster. This enabled the SDK to initialize on the server with near-zero latency (typically < 1ms).

Since the SDK is hydrated on the client during page load, flags and experiments evaluated correctly in the first render, avoiding layout shift, flickering, and page load delay.

And since the Hypertune CLI generates compile-time types for flags, inputs, and events, they could evaluate flags, pass the Context containing visitor attributes, and log conversion events, all with full end-to-end type safety.

3. Marketing was safely empowered

As a result, marketing could update flags and content, run experiments, define personalization rules, and set up AI loops, all from the Hypertune dashboard without depending on engineering.

4. They ran reliable experiments

Experiment variants were always rendered correctly.

And since experiments were always embedded within flag targeting in the dashboard, there were no "experiment flags" that needed to be called from the code, so there was no risk of incorrectly logging experiment exposures, and experiment data was always accurate.

Result

As a result, the team at Retool was able to run an experiment during a major launch of their new marketing site, collecting accurate data, with no impact on latency or conversion.

Going forward, they hope to use Hypertune's multivariate AI loops to explore millions of possible combinations of variants of landing page elements, to tune their site for each visitor segment.

Thom Allen
Platform Engineer at Retool
It was a big launch and everything went perfectly with Hypertune. We're excited to keep adding more flags and empower the marketing team to run more experiments and personalization campaigns.
Start for free
Start now, no strings attached
Evaluate your first feature flag in minutes
Get started for free
Remix
React
TypeScript