# Layouts Plugin

**URL:** <https://meta.discourse.org/t/layouts-plugin/55208>\
**Category:** Plugin\
**Tags:** pavilion, broken\
**Created:** [January 5, 2017, 9:41am UTC](https://meta.discourse.org/t/layouts-plugin/55208 "2017-01-05T09:41:13Z")\
**Posts on this page:** 1\
**Showing post:** 84

<div class="post-metadata">

**Author:** ![angus](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/angus/32/341715_2.png) [@angus](https://meta.discourse.org/u/angus)\
**Post date:** [August 27, 2017, 2:15pm UTC](https://meta.discourse.org/t/layouts-plugin/55208/84 "2017-08-27T14:15:49Z")

</div>

Here you go:

[https://github.com/angusmcleod/layouts-custom-html](https://github.com/angusmcleod/layouts-custom-html)

Works as you would expect a ‘custom html’ widget to. e.g.

 ![29 PM](https://global.discourse-cdn.com/meta/original/3X/4/7/47a407602916f9e6d9e92d49eb99047fc30ca375.png)

 ![41 PM](https://global.discourse-cdn.com/meta/original/3X/d/7/d7a3da90f1f537a42f185f5fbd8c12b54f5eb8c2.jpg)

Although, the better approach would be building the html by making your own widget file and using virtual dom helpers.

This would be the equivalent of the above example:

```plaintext
import { createWidget } from 'discourse/widgets/widget';
import { h } from 'virtual-dom';

export default createWidget('custom-html', {
  tagName: 'div.custom-html',

  html() {
    return h('iframe', { height: 1000, width: 500, src: 'http://www.milliondollarhomepage.com/'})
  }
})

```

@Ham I suspect the reason it didn’t work for you is a load order issue. If you change the name of the plugin folder to something alphabetically greater than `discourse-layouts`, it will work. I’ll address the underlying issue later this week.

---

_[View the full topic](https://meta.discourse.org/t/layouts-plugin/55208)._