# Modernizing inline script tags for templates & JS API

**URL:** https://meta.discourse.org/t/modernizing-inline-script-tags-for-templates-js-api/366482
**Category:** Development
**Tags:** dev-news
**Created:** [May 19, 2025, 9:55am UTC](https://meta.discourse.org/t/modernizing-inline-script-tags-for-templates-js-api/366482 "2025-05-19T09:55:17Z")
**Posts on this page:** 1
**Showing post:** 47

<div class="post-metadata">

### Author: ![NateDhaliwal](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/natedhaliwal/32/313494_2.png) [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [February 2, 2026, 11:37am UTC](https://meta.discourse.org/t/modernizing-inline-script-tags-for-templates-js-api/366482/47 "2026-02-02T11:37:37Z")

</div>

> [@Monikas](#):
>
> `discovery-list-container-top`

Try this:

```js
api.renderInOutlet(
  "discovery-list-container-top",
  <template>
    <div class="moe-counter-container">
      <img 
        src="https://moe.8845.top/get/?name=Monika&theme=booru-helltaker" 
        alt="Visitor Counter" 
        class="moe-counter-img"
      >
    </div>
  </template>
);

```

See:

> [@Theme Developer Tutorial: 4. Using Outlets to insert and replace content](https://meta.discourse.org/t/theme-developer-tutorial-4-using-outlets-to-insert-and-replace-content/357799):
>
> Discourse uses the [Ember JS Framework](https://emberjs.com/) for its user interface. On top of Ember, Discourse provides a number of APIs to allow themes to customize the user interface. The most commonly-used API is Plugin Outlets. These outlets are positioned throughout Discourse core, and allow themes to render Ember Components inside them. Those components are given access to some contextual information called “outlet args”. Some outlets also “wrap” part of the core user interface, which allows themes to add the…

---

_[View the full topic](https://meta.discourse.org/t/modernizing-inline-script-tags-for-templates-js-api/366482)._