The preview
Choose Preview or Split at the top right of a project. Graspable starts the project's own dev server on your computer and shows it in the app. The preview updates as you or the agent change files.
The round-arrow button reloads the preview. It also restarts the dev server if it has stopped.
On Windows and Linux, the ⌥ key in this page is the Alt key.
The Scene panel
Choose Scene in the bar above the preview. A panel lists every object in the running scene, as a tree.
- Click a row to outline that object in the preview and select the code that created it.
- Type in filter objects… to narrow the list.
- Hidden objects are dimmed.
- Tick rig to also show controllers, hands and pointers.
- Each row shows the file and line the object comes from. Objects that your project's code did not write have none.
From an object to its code
Hold ⌥ and click an object in the preview. The editor opens the file and selects the code that created the object. The matching row is selected in the Scene panel.
That selection goes with your next request, shown as a chip above the prompt box. So you can ⌥-click a planet and write "make this twice as big".
It works the other way too. Move the cursor in a .jsx or .tsx file and the objects written on that line are outlined in the preview.
Scrub a number
In the editor, hold ⌥ over a number and drag left or right. The number changes and the preview follows while you drag. Hold Shift for steps ten times finer. The file is saved when you let go.
Use Split to see the code and the preview together.
The emulated headset
The preview includes an emulated Meta Quest 3, so you can try AR and VR without a headset.
- Click Enter AR or Enter VR in the preview.
- Use the on-screen controls to move the headset and controllers and press their buttons with mouse and keyboard.
For AR, the emulated headset stands in a synthetic room, so placing things on floors and walls works. Pick the room from the menu in the bar above the preview: living room, meeting room, music room, office large or office small.
The emulated headset exists only in the preview. It is left out when the project is built.
Record and replay
- Enter AR or VR in the preview.
- Choose Record, then use your app.
- Choose Stop & save.
The recording is saved in the project as a file in tests/xr/. Choose replay fixture… to play one back. After the replay, the bar says whether the scene and the final image match the recording.
Recordings also work as tests. See XR tests.
Open on a real headset
Choose Headset in the bar above the preview. Edits keep hot-reloading on the headset. The headset uses its own WebXR, not the emulated one.
Headset preview is not available for cloud projects. Move the project back to this computer first.
Same Wi-Fi
- Choose Share on Wi-Fi.
- Scan the QR code with the headset, or choose Copy link and open the link in the headset's browser.
- The first time, the headset browser warns that the connection is not private. This is expected: the certificate is made on your computer. Choose Advanced, then Proceed.
- Choose Stop sharing when you are done.
Anyone on your network who has the link sees the preview until you stop sharing. Only the preview is shared. Sharing also stops when the preview stops.
If your computer has more than one network address, a menu under the QR code lets you pick another.
USB (Quest, Pico, Android XR)
USB avoids the certificate warning. It needs two things that Graspable does not install:
- Android platform-tools (
adb) on your computer. - Developer mode turned on in the headset.
Then:
- Plug the headset in with USB.
- Put the headset on and allow USB debugging for this computer.
- In the Headset panel, choose Open next to the headset.
The preview opens in the headset's browser.
Headset preview was built against emulated devices and has not been confirmed on every headset model. If it does not work on yours, see Troubleshooting.