Code in the Real World: Augmented Reality Code Preview with WebXR

Code in the Real World: Augmented Reality Code Preview with WebXR

Your button doesn't live on a screen anymore. It lives on your desk. Your wall. Your palm.

Close your eyes and imagine this.

You've just written a sleek CSS card component. A gradient background. A subtle shadow. A hover animation that lifts the card by 4 pixels. On your monitor, it looks perfect. But you've been burned before. What looks good in a browser tab often feels different in the real world — on a phone, on a tablet, on a coworker's massive ultrawide.

Now imagine pointing your phone at your desk.

The camera opens. Your desk appears on the screen. And then — magic — your card component renders right there on the wooden surface. It sits naturally. The shadow falls across the grain. You walk around it. You crouch down. You see it from every angle. You reach out with your finger and drag it to the wall. Then you pinch to make it larger. It sticks to the surface like it was always there.

You haven't deployed anything. You haven't installed an emulator. You just wrote HTML, CSS, and JavaScript — and now it exists in your physical space.

That's not a prototype. That's Augmented Reality Code Preview — and it's built directly into your website right now.

What It Does: From Browser Tab to Real World

We've transformed your code editor into an AR development environment. Here's how it works:

Phone or AR Headset? Your Choice.

Live Code, Live Preview

The AR preview is not static. It's connected to your code editor in real time.

• Change the background color in CSS → The AR widget changes instantly.
• Add a hover animation → Walk around and trigger it by looking at the widget.
• Modify the border radius → Watch the corners smooth out on your desk.
• Swap the font → See how typography looks in physical space.

Every keystroke updates the AR overlay. No rebuild. No deploy. No emulator.

Hand Gestures (No Controllers Needed)

Using hand tracking (on supported devices), you can:

No controllers. No buttons. Just your hands.

Surface Detection (Hit Test API)

The AR preview doesn't just float in mid-air. It sticks to real surfaces:

• Desks and tables – Perfect for dashboard mockups
• Walls – Great for posters, banners, or full-page designs
• Floors – Ideal for large-scale visualizations
• Ceilings – Why not? (We won't judge)

The Hit Test API continuously scans your environment, detecting flat surfaces with centimeter precision. Tap anywhere on a detected surface, and your widget snaps there.

The Modern Tech Stack: How AR Runs in Your Browser

No app store. No SDK. No Unity. Just a browser tab and a camera.

WebXR Device API: The Standard for Browser-Based AR

WebXR is the W3C standard for augmented and virtual reality in the browser. It provides:

• Session management (start/stop AR mode)
• Pose tracking (where is your head/phone in space?)
• Input handling (hand gestures, controllers, gaze)
• Rendering loop (60fps+ sync with device motion)

What this means for you:

• No app installation required
• Works across devices (iOS Safari, Android Chrome, AR headsets)
• Future-proof (WebXR 1.0 is stable and growing)
• Privacy-respecting (camera access requires permission, frame data never leaves your device)

Hit Test API: Surface Detection in Real Time

The Hit Test API is what makes AR feel magical. It answers the question: "Where is the nearest flat surface in front of the camera?"

javascript:

// Simplified example
const frame = session.requestAnimationFrame(onFrame);
const hitTestResults = frame.getHitTestResults(hitTestSource);

if (hitTestResults.length > 0) {
  const pose = hitTestResults[0].getPose(referenceSpace);
  // Place your widget at pose.transform.position
}

Capabilities:

• Detects horizontal surfaces (tables, floors)
• Detects vertical surfaces (walls)
• Provides precise position and orientation
• Updates 60x per second (smooth tracking)

Three.js with AR Support: The Rendering Engine

Three.js is the most popular 3D library for the web. Its AR module extends WebXR into a developer-friendly API.

We use Three.js to:

• Render your HTML/CSS widget as a textured 3D plane
• Apply realistic lighting based on environment (via light estimation API)
• Cast shadows onto real surfaces (sold separately — just kidding, it's built-in)
• Handle occlusion (real objects can hide your widget)
• Manage 60fps rendering even on mobile devices

Your Benefits: Why AR Changes How You Design and Present

Test Responsive Design in Real Environments

A button that looks great on your 27-inch monitor might be illegible on a phone in bright sunlight. A card that's perfectly sized on a desk might feel tiny when projected on a wall.

With AR Code Preview, you test in real environments:

You can't simulate these in a browser. You have to see it in the real world.

Impress Clients with AR Mockups

"You want me to imagine how this dashboard would look on my office wall?"

No. Let me show you.

Hand your client your phone. Point it at their wall. Your widget appears. They can walk around it. Resize it. Move it to another wall. They can see the hover animation. They can test the button click.

The result: Faster approvals. Fewer "can you move this 2 pixels left?" emails. More "wow, this is incredible."

Rapid Prototyping Without Devices

Don't own an iPhone, an Android, and an AR headset? No problem. The AR preview lets you simulate any device's viewport:

• Phone mode – Widget appears at phone-appropriate size on your desk
• Tablet mode – Larger widget
• Desktop mode – Widget sized like a monitor
• Billboard mode – Massive widget on a wall (great for signage mockups)

You test on one device (your phone) and simulate others. It's not perfect, but it's 90% of the way there.

Architecture and Interior Design Mockups

Are you a front-end developer working on a kiosk dashboard? A digital signage project? An interactive museum exhibit?

AR Code Preview lets you:

• Place your UI on actual walls in actual rooms
• Test viewing angles from different positions
• Check readability from across the room
• Demonstrate to stakeholders without installing hardware

Learn Spatial UI Design

We're entering the era of spatial computing (Apple Vision Pro, Meta Quest, HoloLens). Designing for 3D space is different from designing for 2D screens.

With AR Code Preview, you can:

• Experiment with z-index in physical space
• Learn how shadows behave on real surfaces
• Understand depth perception in UI
• Prototype for AR/VR without expensive headsets

Real-World Scenarios (Try These Today)

Scenario 1 – The Coffee Shop Mockup

Setup: You're designing a loyalty card widget for a coffee shop app.

AR Test: Point your phone at the coffee shop's counter. Place your widget there. Stand where customers will stand. Is the font readable? Is the button reachable? You adjust padding and font size. The final design works perfectly in the real environment.

Scenario 2 – The Client Presentation

Setup: You've built a dashboard for a factory floor. The client wants to see it on their wall-mounted display.

AR Solution: You visit the factory. Point your phone at the wall. Your dashboard renders at actual size. The client walks 20 feet away. Still readable. They approve the design on the spot.

Scenario 3 – The Accessibility Test

Setup: Your user has low vision. They need large touch targets.

AR Test: Place your widget on a desk. Ask a tester to tap it from a wheelchair. Is it reachable? Is the hit target large enough? You resize the buttons. The tester confirms. You ship inclusive design.

Scenario 4 – The Museum Kiosk Designer

Setup: You're building an interactive touchscreen for a museum exhibit.

AR Test: Visit the museum. Point your phone at the proposed kiosk location. Place your UI on the wall. Check for glare from nearby windows. Test readability from a child's height. Adjust colors and contrast. The final install is flawless.

Scenario 5 – The Remote Design Critique

Setup: You need feedback from a designer in another city.

AR Solution: You share a link to your AR preview. They open it on their phone. They place your widget on their desk. They record a video (with AR overlay) showing exactly what they mean. "Move this button 10 pixels left" becomes a 10-second video.

How to Get Started

1. Open the AR Code Preview

Find "AR Preview" next to the regular "Live Preview" button in your code editor.

2. Grant Camera Permission

Your browser will ask: "Can this site use your camera?" Click Allow. (We never record or store video.)

3. Point Your Camera at a Surface

Hold your phone steady. Look for white dots appearing on flat surfaces (tables, floors, walls). These are detected hit test points.

4. Tap a Surface

Your current HTML/CSS widget renders instantly on that surface.

5. Interact with Hand Gestures (if supported)

6. Edit Your Code

Switch back to the code editor. Change colors, fonts, sizes. Switch back to AR preview. Watch it update in real time.

7. Save and Share

• Save AR session – Save the surface position and widget settings
• Generate share link – Anyone with the link can see the same AR view (requires compatible device)
• Record video – Capture your AR mockup for presentations
• Export as USDZ – Place the widget in other AR apps (iOS only)

Advanced Features (Power Users)

Multiple Widgets (AR Scene Management)

Create entire AR scenes with multiple components:

• Place a navbar on the top of the wall
• Place a card on the desk below
• Place a button floating in mid-air (experimental)
• Save the entire scene as a template

Perfect for full-page mockups or multi-surface installations.

Lighting Estimation (Realistic Shadows)

Your widget doesn't just float. It responds to real light.

The Light Estimation API analyzes your environment and:

• Matches ambient light color (warm sunlight vs. cool fluorescent)
• Adjusts shadow direction (based on real light sources)
• Simulates reflections (on glossy surfaces)

Your widget looks like it belongs in the room.

Occlusion (Real Objects Hide Your Widget)

Hold your hand between your phone and the widget. Does it disappear behind your hand? With occlusion enabled: yes.

Real objects (hands, coffee cups, notebooks) correctly obscure your AR widget. The illusion is complete.

Surface Persistence (AR Anchors)

Place a widget on your desk today. Come back tomorrow. With AR Anchors, the widget remembers its position relative to physical features (requires cloud anchor service).

• Local anchors – Saved on your device (works offline)
• Cloud anchors – Shared across devices (requires login)

Multi-User AR (Collaborative Previews)

Two people in the same room. Two phones. One AR widget.

Both see the same widget in the same physical location. Both can move it. Changes sync in real time via WebRTC.

Perfect for design reviews, client presentations, or pair programming in AR.

Hardware Requirements (Honest Expectations)

No LiDAR? No problem. Basic AR (surface detection + placement) works on hundreds of millions of devices. Advanced features (hand tracking, occlusion) require newer hardware.

Browser Support (WebXR)

Desktop fallback: If you open the AR preview on a desktop without a camera, you get a 3D viewer with mouse controls. Rotate, zoom, and inspect your widget from any angle.

Privacy & Security (We Take This Seriously)

Your Camera Data Never Leaves Your Device

• WebXR camera frames are processed locally for surface detection and tracking
• No video is recorded or uploaded (unless you explicitly save a recording)
• No facial recognition (we can't see your face, just surfaces)
• No environment mapping sent to servers (lighting estimation happens locally)

Permissions

• Camera access is opt-in and can be revoked anytime
• A red indicator appears when the camera is active
• You can disable AR entirely in settings

Opt Out Anytime

Don't want AR features?

• Never click "AR Preview"
• Or disable entirely: Settings → Features → Disable AR

The regular code editor and 2D preview work exactly as before.

Limitations (Honest Expectations)

Frequently Asked Questions

Q: Does this work on my iPhone?

A: Yes. iPhone XR and newer (iOS 13+) support basic AR. iPhone 12 Pro and newer (with LiDAR) support advanced features (occlusion, hand tracking).

Q: Does this work on my Android?

A: Yes. Any Android device with ARCore support (Google's list: Pixel, Samsung Galaxy S8+, many others). Check if "Google Play Services for AR" is installed.

Q: Can I use this without a phone?

A: Yes. Desktop browsers show a 3D viewer (mouse-controlled). Not AR, but still useful for inspecting 3D widgets.

Q: Is this free?

A: Yes. AR preview is included for all users. No premium tier. No per-session fees.

Q: Can I export my widget as a real AR file?

A: Yes. Export as USDZ (iOS Quick Look) or GLTF (web standard). Place it in other AR apps or share with clients.

Q: Will this drain my battery?

A: AR is GPU-intensive. A 10-minute AR session uses ~5-10% battery on modern phones. We optimize rendering (variable frame rate when idle).

Q: Can I record my AR session?

A: Yes. Click "Record" to capture video with AR overlay. Great for presentations, bug reports, or social media.

Q: My widget looks blurry in AR. Why?

A: The widget is rendered as a texture. For sharp text, ensure your widget's CSS uses -webkit-font-smoothing: antialiased and keep the widget scale reasonable (not zoomed 10x).

Q: Can I use this for WebXR content (not just widgets)?

A: Not yet. Currently limited to HTML/CSS/JS widgets. Full WebXR scene authoring is on the roadmap.

The Future of AR Code Preview

We're actively building:

• Full Three.js scene import – Upload your own 3D models
• Real-time collaboration – Multiple devices, same AR space
• AR debugging tools – Visualize hit test points, tracking quality, frame rate
• Gesture recorder – Record hand movements and replay for testing
• Integration with Figma – Import designs directly into AR
• AR code completion – "Show me how this looks on a brick wall" generates CSS automatically

Get Started in 60 Seconds

1. Open any code snippet in our editor
2. Click "AR Preview" (next to the regular preview button)
3. Grant camera permission (if asked)
4. Point your phone at a desk or wall
5. Tap the surface where you want your widget
6. See your code come to life in the real world
7. Edit your code and watch the AR widget update instantly