# HTML Template for WebXR scene | Error running outside of Playground

**URL:** <https://forum.babylonjs.com/t/html-template-for-webxr-scene-error-running-outside-of-playground/10957>\
**Category:** Questions\
**Created:** [May 19, 2020, 5:13am UTC](https://forum.babylonjs.com/t/html-template-for-webxr-scene-error-running-outside-of-playground/10957 "2020-05-19T05:13:52Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![pmaxwellward](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pmaxwellward/32/11872_2.png) [@pmaxwellward](https://forum.babylonjs.com/u/pmaxwellward)\
**Post date:** [May 19, 2020, 5:13am UTC](https://forum.babylonjs.com/t/html-template-for-webxr-scene-error-running-outside-of-playground/10957/1 "2020-05-19T05:13:52Z")

</div>

In the Intro to WebXR ([Introduction to WebXR - Babylon.js Documentation](https://doc.babylonjs.com/how_to/introduction_to_webxr)) this simple template is provided for creating a default XR Experience in the playground: [Babylon.js Playground](https://www.babylonjs-playground.com/#F41V6N)

Problem is, this template does not work outside of the playground. If you set up your own HTML, the scene won’t render. Here is an example (style tags omitted):

```
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>WebXR Template</title>
        <script src="https://preview.babylonjs.com/babylon.js"></script>
        <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
        <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
    </head>
   <body>
    <canvas id="renderCanvas" touch-action="none"></canvas> <!-- touch-action="none" for best results from PEP -->
    <script>
    var canvas = document.getElementById("renderCanvas"); // Get the canvas element
    var engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine
    var createScene = async function () {
        var scene = new BABYLON.Scene(engine);
        var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);
        camera.setTarget(BABYLON.Vector3.Zero());
        camera.attachControl(canvas, true);
        var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
        light.intensity = 0.7;
        var sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene);
        sphere.position.y = 1;
        const env = scene.createDefaultEnvironment();
        const xr = await scene.createDefaultXRExperienceAsync({
            floorMeshes: [env.ground]
        });
        return scene;
    };
    var scene = createScene(); //Call the createScene functi
     // Register a render loop to repeatedly render the scene
     engine.runRenderLoop(function () {
             scene.render();
     });
     // Watch for browser/canvas resize events
     window.addEventListener("resize", function () {
             engine.resize();
     });
    </script>
   </body>
</html>

```

If you try to run that, you get the error “scene.render is not a function.” I understand that this has something to do with Async Function and Promises, but I don’t understand enough about that area to solve the issue.

So what would a simple HTML template for webXR look like? Maybe the solution can be added to the Introduction to WebXR page in the docs?

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [May 19, 2020, 2:30pm UTC](https://forum.babylonjs.com/t/html-template-for-webxr-scene-error-running-outside-of-playground/10957/2 "2020-05-19T14:30:21Z")

</div>

Yeah I see the problem. the createScene is not awaited

Pinging @RaananW

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [May 20, 2020, 6:35am UTC](https://forum.babylonjs.com/t/html-template-for-webxr-scene-error-running-outside-of-playground/10957/3 "2020-05-20T06:35:08Z")

</div>

Pretty sure this was fixed already. When downloading from the playground, this is the scene creation template I am getting:

![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/7/7b2d4068eede1c8200d15fec90dd8e5f649bf429.png)

@pmaxwellward - the code is visible and can be used directly in the playground. This is our way of sharing code. Having said that - the download function should be working correctly. What exactly did you do to get this file? can you share the link you used to download this?

---

<div class="post-metadata">

**Author:** ![pmaxwellward](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pmaxwellward/32/11872_2.png) [@pmaxwellward](https://forum.babylonjs.com/u/pmaxwellward)\
**Post date:** [May 20, 2020, 5:48pm UTC](https://forum.babylonjs.com/t/html-template-for-webxr-scene-error-running-outside-of-playground/10957/4 "2020-05-20T17:48:24Z")

</div>

I hand coded the HTML for this scene. I did not use the download feature in the playground, but will start doing that. I copied the HTML template from this page: [First Steps - Babylon.js Documentation](https://doc.babylonjs.com/babylon101/first)

Thank you for your feedback
