RevenueCat Paywall Precision Builder (Speedrun Submission)

Inspiration

When I discovered RevenueCat’s Paywall Builder, I was genuinely amazed. As someone with a background in development, I’m used to coding every UI component manually. Seeing a drag-and-drop, no-code tool that allows you to create pixel-perfect paywalls visually felt like a game changer. It made me rethink how much time and effort can be saved in building critical subscription screens using such intuitive tools. The challenge itself—the idea of blending speed with design accuracy—felt both competitive and creatively fulfilling, so I knew I had to give it my best.

What it does

This project is a speed-built, pixel-perfect replication of RevenueCat’s reference paywall screens using their Paywalls V2 builder. It includes both the Monthly and Annual plan tabs, complete with a working toggle, trial eligibility assumed, and all design elements precisely aligned as per the reference.

How we built it

Using the RevenueCat Paywalls V2 builder, I recreated the provided paywall designs:

• Preloaded fonts and images as permitted.
• Carefully pasted provided text to avoid manual typing delays.
• Built both Monthly and Annual plan screens visually using the tool’s drag-and-drop features and style configurations.
• Focused on optimizing each step in the build sequence through multiple dry runs.
• Recorded the entire screen as required, from the first click to the final UI reveal.

Challenges we ran into

• Adapting my mindset from “coding” to pure visual building.
• Maintaining speed without sacrificing pixel-perfect precision.
• Avoiding small mistakes (like alignment shifts or incorrect font sizing) under time pressure.
• Learning to think like a designer rather than a developer for this challenge.

Accomplishments that we're proud of

• Achieved a smooth, fast build process after multiple iterations.
• Recreated both tabs with complete accuracy.
• Balanced both speed and precision to meet judging criteria.
• Gained confidence in using no-code UI design tools effectively.

What we learned

• Speed comes from mastery, not rushing.
• Visual design requires as much structured thinking as writing code.
• UI tools like RevenueCat Paywalls can simplify development while still requiring a disciplined approach.
• Small visual details like margins, font weights, and button placements have a huge impact on the overall polish of a design.

What's next for RevenueCat Paywall Precision Builder (Speedrun Submission)

After this challenge, I aim to explore more no-code/low-code tools and integrate them into my development workflow. My goal is to strike the right balance between code and visual design, depending on the project needs. Participating in this challenge has inspired me to rethink how UI and subscription flows can be built faster without compromising on quality.

Additionally, I'm excited to keep refining my skills for future rounds of this competition and, hopefully, compete live in New York City.

Built With

• preloadassets
• revenuecat
• revenuecatpaywallbuilderv2