How to build your first AR experience without code

Building augmented reality used to mean writing JavaScript, wrangling 3D libraries, and shipping an app. It doesn't anymore. With XR Designer you compose a scene in a live viewport, wire up behaviour by clicking, and publish to a link that opens in a phone's browser. No install, no SDK, no engineering team.

This is the full path, start to finish. If you're new to the format, What is WebAR? covers the basics first. Otherwise, open the studio in another tab and follow along.

The nine steps, end to end

1. Start a project. Open the studio and create a new project. Begin from a blank scene, or pick a template to skip the setup — product viewer, photo frame, portal, or business card. A template lands you on a working scene you can edit, which is the fastest way to learn the layout.
2. Choose how it anchors. Every AR scene is tied to something the camera recognises, so set the tracking type first. Pick world surfaces (place on a floor or table), a printed image (a poster, label, or card), a face (front-camera filters and try-on), the sky, or a GPS location. The choice shapes everything downstream, so decide it up front in the project's tracking setting.
3. Add your content. Drag in a 3D model (glTF, GLB, or FBX — animation clips come along), or drop a primitive like a box, sphere, or cylinder. Add text and lights so the scene reads in real conditions. Everything is real-world scale: one unit is one metre, so a 0.3 box is 30 centimetres wide on the table.
4. Give it a look. Drop a PBR material onto an object — there are 40-plus, from chrome and gold to frosted glass and clay. Prefer a pattern? Use one of the procedural textures, or an animated shader like hologram or fresnel. Need something specific that no preset gives you? Generate a custom texture from a text prompt with AI textures, and it drops straight into the scene.
5. Bring it to life. Add motion with an animation preset — orbit, float, spin, sway, and a couple dozen more, each with speed, amount, and axis. For exact, authored movement, record a keyframe timeline: scrub the track, snapshot the transform at each point, and it interpolates between them.
6. Make it interactive. This is where it stops being a 3D model and becomes an experience. Wire a trigger to an action — when someone taps, comes within a radius (proximity), or something collides, fire an action like play an effect, play an animation, go to another screen, or set a score. It's all visual, no code. Want weight and impact? Turn on physics, or attach a one-shot effect such as a confetti pop or a shockwave.
7. Add a 2D HUD (optional). If the experience needs on-screen controls or copy, add a screen-space UI canvas. Place buttons, text, lists, or a swipeable carousel, anchored to the corners and edges of the screen. These elements wire to the same triggers and actions as everything else, so a button can advance a screen or fire an effect.
8. Test on your phone. Before you publish anything, check it on real hardware. Generate a private, signed QR link to preview the unpublished scene on a device — it's separate from the published URL, so you can iterate without shipping. Scan it, point the camera, and see your scene where it'll actually live.
9. Publish. One click gives you a public link and a QR code. Optionally password-protect the page, and brand the splash and start screens so it looks like yours from the first tap. Share the link or print the code, and anyone can open it.

What you see is what ships

The editor and the published experience render from the same scene description. The physics, animation, particles, textures, and shaders run through shared logic, kept honest by parity tests — so the AR your visitors see matches the editor, down to the motion and the materials. There's no separate "build" that drifts from your preview, and no surprises after you publish. If it looks right while you're editing, it looks right on the phone.

The fastest way to learn this is to start from a template, change one thing, and publish. The whole loop takes minutes — and once you've done it once, the rest is just more of the same.

That's the whole pipeline

Start a project, anchor it, add content, style it, animate it, wire the interactions, test on a phone, publish. Nine steps, no code, one sitting. You don't need to plan a roadmap or learn a 3D engine to ship something real today. If you're thinking about where this fits in a campaign or a storefront, 7 ways augmented reality grows your business has the ideas. When you're ready, open the studio and build the first one.