How to create augmented reality in your browser - no code, step by step

A few years ago, learning how to create augmented reality meant learning a game engine, a 3D asset pipeline and at least one programming language. Today the honest answer is much shorter: open a browser tab. No-code AR platforms now run the entire workflow - scene editing, animation, interactivity and publishing - inside an ordinary web browser, and the finished experience opens on a phone from a link or QR code with nothing to install.

This is a start-to-finish walkthrough of that workflow. It uses AR Works as the worked example because it is free to start and browser-based end to end, but the shape of the process - choose your tracking, add content, animate it, wire up interactions, publish, test on a real phone - is the same on any no-code AR tool, so the steps should be useful whichever platform you end up choosing.

What you need before you start

• A computer with a modern browser. The editor is a web app, so there is nothing to download or license.
• A phone for testing. Published experiences open in recent iOS Safari or Android Chrome. Any reasonably current phone will do.
• Optionally, an image to track. If you want content anchored to a poster, worksheet, book page or product box, have that image ready as a file - and ideally a printed copy for testing.
• A small, specific idea. One object doing one interesting thing beats ten objects doing nothing. You can always add more after your first publish.

How to create augmented reality in the browser: seven steps

Step 1: Create a free account and an empty project

Sign up for a free AR Works account - the free plan includes the full editor, both tracking modes and publishing to a shareable link and QR code, so nothing in this walkthrough requires a paid plan. Create a project from the dashboard and it opens straight into the editor with a first scene waiting for content.

Step 2: Choose how your AR anchors to the world

This is the one real decision of the whole build, and each scene makes it independently, so a project can mix both modes.

Image tracking locks your content to a physical image. The phone recognises the printed picture through the camera and your 3D scene appears on top of it, glued in place as the phone moves. It is the right choice for posters, packaging, worksheets, business cards and book pages, and it works on both recent iOS Safari and Android Chrome. The quality of the target image matters more than anything else you do: pick something detailed and high-contrast, avoid large flat areas of a single colour, and print it matte rather than glossy.

World tracking needs no printed target - content is placed in the room itself. Support here is honest but uneven, and you should plan around it. On Android Chrome with ARCore, viewers get the full experience: a reticle finds surfaces, they tap to place the scene on the floor or a table, and they can pinch to resize it and rotate it with two fingers. On iPhones, iPads and Android phones without ARCore, the scene falls back to a camera-passthrough view - your content is composited over the live camera feed and viewers look around it using the gyroscope, but there is no surface detection or tap-to-place. Desktops get a simple 3D preview instead. If your audience is mostly iPhone users and the "anchored to reality" feel is the point, choose image tracking.

Step 3: Add your content

With the scene created, build what viewers will actually see. You can start with nothing but the built-in library: 3D primitives (cube, sphere, cylinder, cone, plane), 2D shapes and text elements cover a surprising amount of ground for labels, buttons, diagrams and abstract scenes. Alongside those, you can upload images, video, audio and 3D models: glTF/GLB files import directly, and FBX and OBJ files are converted to GLB in the browser when you add them, so most models you find or export will load without a separate conversion tool.

Position everything with the familiar move, rotate and scale gizmos, and group related objects so they move together. For an image-tracked scene, keep your content roughly the size of the target and centred on it - content that sprawls far beyond the image edge is harder for viewers to frame in the camera.

Step 4: Bring it to life with animation

Static AR is a missed opportunity - motion is what makes the illusion land. In the animation timeline you keyframe position, rotation, scale and opacity, and organise the results into named clips: a slow spin, a hover loop, a fade-in reveal. A curve editor lets you adjust easing so movement accelerates and settles naturally instead of moving robotically. If you imported a model that already contains animations - a walking character, a turbine with moving blades - those embedded clips can be played back as well, which is often the fastest route to something impressive.

Step 5: Add interactivity - without writing code

Interactivity is where no-code AR editors have changed the most. Instead of scripts, you connect logic nodes: event nodes such as "on scene start", "on tap" and "on collision" wire into action nodes such as play or stop an animation, show or hide an object, play a sound or video, wait for a delay, or jump to another scene. A simple, satisfying first interaction: on tap, play the reveal clip and a sound effect.

When you outgrow simple triggers, variables and conditional nodes take over. Variables can be scene-local or global, text elements can display a variable's live value, and comparison and if nodes let you branch - which is enough to build a tap-to-answer quiz with a running score, or a guided tour that only unlocks step three after steps one and two. It stays entirely visual: drag nodes onto the graph, connect the wires, and test.

Step 6: Preview, publish and get your QR code

You do not need a phone for every iteration - an in-browser preview runs the scene, its animations and its logic on your computer, which is where you will catch most mistakes. When it behaves, publish: for image-tracked scenes the platform compiles the tracking data on its servers, and you get a share link plus a QR code rendered in the share dialog. Print the QR code, drop it in a slide deck, or send the link directly.

Step 7: Test on a real phone, in a real place

Scan the QR code with the phone camera, open the link, and grant camera permission when the browser asks - that permission prompt is the only setup a viewer ever sees. Then test the way your audience will actually use it: the printed target at the size it will really be printed, the lighting of the actual room, the phone held at a natural angle. AR that works on a bright desk can struggle on a dim wall, and it is far cheaper to find that out now. Iteration is quick - adjust the scene in the editor, publish again and check the result on the phone moments later.

Tips that make a first AR experience feel polished

• Choose the target image before designing the scene. A weak, low-contrast target undermines everything built on top of it.
• Keep models light. Phones render your scene in a browser, so prefer low-poly models and modest textures; a small file that tracks smoothly beats a showpiece that stutters.
• Design for a hand-held phone. Short animation loops, generous tap targets and one clear focal point work better than dense, PC-style scenes.
• Give viewers a nudge. A screen-space overlay - text or a button fixed over the AR view - can say "tap the engine to open it", which saves the experience for anyone who does not think to touch the screen.
• Publish early, publish often. Because publishing takes moments, treat the phone as part of your editing loop rather than a final exam.

Where to go next

Once the first experience is live, the same editor scales up with you: multi-scene projects with animated transitions, a node-based materials graph for custom surfaces, opt-in collisions that fire logic when objects touch, and the screen-space UI overlay for HUD-style buttons and captions. None of it requires leaving the browser, and none of it requires code.

If you have not started yet, the free account from step 1 is genuinely enough to take an idea from blank project to a QR code on a printed page this afternoon - and the fastest way to understand augmented reality is still to point your own phone at something you made.