Using or in themes is now deprecated. Any use of these tags in themes should be updated according to the instructions below. Regular and are unaffected by this change. Timeline These are rough estimates, subject to change May 2025 - console deprecation messages enabled July 2025 - admin warning banners enabled Late September 2025 March 2026 - removal of feature Converting Templates introduced using this method should be moved to dedicated .hbs files, or refactored into gjs files. To keep as HBS, connector templates can be placed in: {theme}/javascripts/discourse/connectors/{outlet-name}/{connector-name}.hbs and component templates can be placed in: {theme}/javascripts/discourse/components/{component-name}.hbs :warning: Since March 2026, .hbs files are also deprecated. After making this conversion, move on to the instructions in Deprecating .hbs file extension in themes and plugins To build connectors and components in the modern .gjs format, check out this chapter of the theme developer tutorial: [imagem] Theme Developer Tutorial: 4. Using Outlets to insert and replace content Developer Guides Discourse uses the Ember JS Framework 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… Converting Code inside these tags can be migrated to a dedicated JavaScript file. If you develop your theme via the admin panel interface, copy the code out of the , and move it into the JS tab (where it says // your code here). If you develop your theme locally, create a new file at {theme}/javascripts/discourse/api-initializers/init-theme.js then add this wrapper, and place your code in the indicated spot: import { apiInitializer } from "discourse/lib/api"; export default apiInitializer((api) => { // Your code here }); In script tags, the only way to import other JS modules was using the require() syntax. While that will still work in a .js file, it will soon be deprecated, so now would be a good time to convert it to modern ES6 imports. For example: - const I18n = require("discourse-i18n").default; + import I18n from "discourse-i18n"; - const { h } = require("virtual-dom"); + import { h } from "virtual-dom"; For more information on JS initializers: [imagem] Theme Developer Tutorial: 6. Using the JS API Developer Guides In the last couple of chapters, we’ve explored how to use the JavaScript API to render content into outlets. renderInOutlet is the most commonly-used API, but there are a ton more! In this chapter we’ll try out a few of them, and show you how to discover more. Common API methods getCurrentUser() api.getCurrentUser() will return information about the current user, or null if nobody is logged in. This can be used for all sorts of things, including per-group logic, or rendering a user’s username i…

Is there an error in the browser console?

“Deprecation notice: Adding JS code using is deprecated. Move this code to a dedicated JavaScript file. [deprecation id: discourse.script-tag-discourse-plugin] [info: Modernizing inline script tags for templates & JS API]” “Deprecation notice: The post-meta-data widget has been deprecated and api.decorateWidget is no longer a supported override. [deprecated since Discourse v3.5.0.beta1-dev] [deprecation id: discourse.post-stream-widget-overrides] [info: Upcoming post stream changes - How to prepare themes and plugins]”

I think you can replace this with outlets. Where in the topic are you adding this?

If you’re asking where the output is in production, then it’s here. [post-number] I’d much rather have it somewhere that makes it searchable though.

I would add to this for people who come from adding easily JS to headers on their website : 1° that for me here on discourse mostly “Vanilla” Javascript works and not regular Javascript 2°to solve loading issues, place it inside document.addEventListener(‘DOMContentLoaded’, function() { Code here }); ; this will avoid errors as you are loading the code after page load.

We are using const LoginRoute = require("discourse/routes/login").default; LoginRoute.reopen({ activate() { this.controllerFor('application').setProperties({ showFooter: true }); } }); to show a footer on all pages due to GDPR (Privacy Policy and Impressum). Otherwise we did not make any changes. How do we convert this best? Thank you very much!

Thanks for the instructions. I’m a bit confused about which if any of the method(s) in my script are deprecated and which method I should migrate to. It’s for showing a random banner image at the top of the page. I need to modify the image locations frequently, so I want to use the new JS tab inside a theme component, not a local upload or GIT repo. Here’s a simplified outline of the current code in the tab: const h = require("virtual-dom").h; api.createWidget("my-widget", { html() { ... >> ... api.onPageChange(() => { this.scheduleRerender(); }); } }); {{mount-widget widget="my-widget"}}

As a poke and guess admin I was a bit worried reading this, but when I checked my custom theme, I saw only a very simple script: // icon substitutions for share buttons api.replaceIcon('d-post-share', 'up-right-from-square'); api.replaceIcon('d-topic-share', 'up-right-from-square'); So it was just a copy of whats between the script tags, hop to the JS tab, and there was a place to slap it in. That was easy! import { apiInitializer } from "discourse/lib/api"; export default apiInitializer((api) => { // icon substitutions for share buttons api.replaceIcon('d-post-share', 'up-right-from-square'); api.replaceIcon('d-topic-share', 'up-right-from-square'); });

[imagem] rahim123: Thanks for the instructions. I’m a bit confused about which if any of the method(s) in my script are deprecated and which method I should migrate to. It’s for showing a random banner image at the top of the page. I need to modify the image locations frequently, so I want to use the new JS tab inside a theme component, not a local upload or GIT repo. Here’s a simplified outline of the current code in the tab: const h = require("virtual-dom").h; api.createWidget("my-widget", { html() { ... >> ... api.onPageChange(() => { this.scheduleRerender(); }); } }); {{mount-widget widget="my-widget"}} Sorry for this bump, but I’m still confused about which of the new methods to use. [imagem] david: Converting Templates introduced using this method should be moved to dedicated .hbs files, or refactored into gjs files. To keep as HBS, connector templates can be placed in: {theme}/javascripts/discourse/connectors/{outlet-name}/{connector-name}.hbs and component templates can be placed in: {theme}/javascripts/discourse/components/{component-name}.hbs Can anybody confirm if there is a way to achieve the same thing as above but using the admin panel interface (either the or the JS tab)?

Widgets and script tags like these are deprecated. You can move the code into the JS tab, and use something like: import Component from "@glimmer/component"; // … api.renderInOutlet( "top-notices", class MyBanner extends Component { get someGetter() { // Some code here } {{this.someGetter()}} } ); to place a component class in the top-notices outlet.

Modernizando tags de script inline para templates e API JS

Dev

Tópico		Respostas	Vistas
Upcoming Header Changes - Preparing Themes and Plugins Development dev-news	36	4698	8 Setembro , 2024
Templating of my "component" broke. How do I fix it? Development	14	544	17 Março , 2026
A versioned API for client side plugins Development rest-api	33	20651	21 Junho , 2024
Using the JS API Developer Guides plugin-api , explanation , code	18	12806	30 Janeiro , 2026
Developing Discourse Plugins - Part 2 - Connect to a plugin outlet Developer Guides plugin-guides , tutorial	38	30946	23 Novembro , 2025

Modernizando tags de script inline para templates e API JS

Related topics