Prevue lets you paste the code of AI-generated artifacts and see them rendered inside real device mockups.
As we know, everyone's building with AI, and one thing that's common is UI design and previewing it. To do this you've gotta set up a project and run a dev server, or ask your agent to set up a preview for you, which a lot of times is ugly. We're all building to eventually post our work, hence why I built prevue. Paste your code and see a preview, change device sizes, and add beautiful backgrounds. Basically a mockup tool, but instead of Figma designs you inject your code.
Device frames
The frames are Apple device mockups that morph into mobile, tablet, or web sizes. They're drawn to match Apple's viewport dimensions.
Device switching and rubber band resize
Each frame has corner handles you can drag to resize. The scaling locks to aspect ratio and has logarithmic resistance past the bounds. Pull too far and it springs back. The formula is simple, but getting the feel right took a while. The 0.15 controls how much it gives. over * 3 makes resistance grow the further you pull.
Things that broke
Device morph
Device switching initially blink-switched between devices. I wanted to use a morph here for a smoother transition. Sounds simple, right? But when you actually preview code within it and the morph happens, the design inside breaks until it reaches the target device size. After lots of trial and error, I decided to add a frosted blur veil that slightly hides the swap, then dissolves when the morph settles.
Edge-hover flickering
The dock scales up slightly on hover. The scale change moved the element boundary, pushing the cursor "outside," which triggered mouseleave, which scaled it back down, which moved the boundary back. Infinite loop. The whole dock was oscillating. The fix was a stable invisible hit-area wrapper so the hover zone never changes shape.
DialKit for live tuning
Josh Puckett's Dialkit came in handy here, small hover states, opacity changes and spacing was made seamless through live fine tuning.
Small details
The device pills do a tiny spring bounce when you switch. 2% scale for 280ms. I wanted to make the switch feel physical instead of instant.
Takeaway
The functional stuff was maybe 30% of the effort. The other 70% is motion and feedback.