Skip to main content

React WebGL

Run a Unity WebGL build inside Creator Studio


Before start, make sure you have installed WebGL for Unity. You can find download option in File > Build Settings

  1. Change the Compression format in the Edit > Project Settings > Player > WebGL settings > Publishing settings to the Disabled

  2. (Optional) Switch platform to the WebGL in the File > Build Settings, if another platform is chosen

  3. Form WebGL build: File > Build Settings > Build. The output WebGL build contains 4 files in the BuildDirectory/Build:

    • BuildName.framework.js
    • BuildName.loader.js
    • BuildName.wasm

  4. Place these files inside asylum-ui/packages/connection-library/data/build_name and add new Space in const spaces: ISpaceMockData[] array in asylum-ui/packages/connection-library/seed/mocks.ts. Specify the correct paths to your Unity build in spaceClient and list of supportedBlueprints (if you run seed script, you will have default NFT blueprints with ids [0, 1, 2, 3]):

    export const spaces: ISpaceMockData[] = [
    id: 'space_id',
    title: 'Your Space',
    img: 'image_url',
    genre: '...',
    shortDescription: '...',
    description: '...',
    gallery: [...],
    supportedBlueprints: [0, 1, 2, 3],
    spaceClient: {
    data: 'data/build_name/',
    framework: 'data/build_name/BuildName.framework.js',
    loader: 'data/build_name/BuildName.loader.js',
    wasm: 'data/build_name/BuildName.wasm',

  5. Follow the steps of Docker setup and run the following command in terminal:

    docker-compose up

    If you had Docker setup before, you have to delete asylum-ui image and container and run docker-compose up again, otherwise new changes won't be applied.


    To see the proper result you should have items minted on your chain. To do this you can:

  6. Open a web browser and go to the http://localhost:3000/

  7. Add the wallet and connect to the local node

  8. Choose the space and press the Run button.

  9. The build is running