# UI layout

**URL:** <https://phaser.discourse.group/t/ui-layout/11299>\
**Category:** Phaser 3\
**Created:** [February 23, 2022, 3:44pm UTC](https://phaser.discourse.group/t/ui-layout/11299 "2022-02-23T15:44:54Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![bladehoarse](https://avatars.discourse-cdn.com/v4/letter/b/f19dbf/32.png) [@bladehoarse](https://phaser.discourse.group/u/bladehoarse)\
**Post date:** [February 23, 2022, 3:44pm UTC](https://phaser.discourse.group/t/ui-layout/11299/1 "2022-02-23T15:44:54Z")

</div>

Hi all,

I’m coding a small game on web browser and I’m questionning myself about how to have a nice,clean and easy to create UI.

What I want to create is something a bit like [skribbl.io](http://skribbl.io). A list of the players, a game canvas in the middle, a basic chat where to enter your answers and so on.

The problem is, for now I only saw code example where the programmer has to place every single elements manually and it can become very tedious… After some research, I found out the this.add.dom(…).createFromCache() method. This allows to code some simple html element and add it to phaser game.

Is it a good practice ? Does it exist some layout manager in phaser ?

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [February 23, 2022, 5:57pm UTC](https://phaser.discourse.group/t/ui-layout/11299/2 "2022-02-23T17:57:35Z")

</div>

When you add game objects with `this.add.dom()` they will get scaled and positioned with the game canvas if you’re using the Scale Manager modes like `FIT`, but that’s all.

For substantial UIs people usually add their own HTML/CSS to the page instead, or use a library like Angular, React, Vue.

---

<div class="post-metadata">

**Author:** ![bladehoarse](https://avatars.discourse-cdn.com/v4/letter/b/f19dbf/32.png) [@bladehoarse](https://phaser.discourse.group/u/bladehoarse)\
**Post date:** [February 23, 2022, 10:01pm UTC](https://phaser.discourse.group/t/ui-layout/11299/3 "2022-02-23T22:01:44Z")

</div>

Thanks for your reply but what do you mean by “add their own HTML/CSS to the page” ?

So, taking the skribbl example again. Are you telling me to create an html/css page where the drawing zone is a Phaser.Game ? Or the whole display would be a Phaser.Game with some html/css (+react/vue/…) inegrated somehow inside ?

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [February 23, 2022, 11:47pm UTC](https://phaser.discourse.group/t/ui-layout/11299/4 "2022-02-23T23:47:19Z")

</div>

Like with skribbl, the Phaser game is the drawing region and everything else is your own HTML/CSS stuff.

 ![skribbl canvas in DOM inspector](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/8/8742d56c640fb7e7ab85e232424ccd753dda162e.png)

---

<div class="post-metadata">

**Author:** ![bladehoarse](https://avatars.discourse-cdn.com/v4/letter/b/f19dbf/32.png) [@bladehoarse](https://phaser.discourse.group/u/bladehoarse)\
**Post date:** [March 1, 2022, 3:41pm UTC](https://phaser.discourse.group/t/ui-layout/11299/5 "2022-03-01T15:41:08Z")

</div>

thanks 🙂