The component is designed by default to be unobtrusive, so you trigger a modal by tapping the grave slash ` character on your keyboard. Alternatively, you can enable a trigger button in the UI by toggling a theme setting.
Once the modal appears you have access to some common actions, links and settings that you might typically need while developing with Discourse.
Name
Description
show header button
Show the trigger for the dev toolbox in the header panel
remove button from flow
Fixes the header button to bottom right. (Requires show_header_button to be enabled)
actions close modal
Triggering an action in the toolbox will also close the toolbox modal.
custom links
Translation
Default
dev_utils.toggle_btn
Dev Toolbox
dev_utils.modal.title
Developer Toolbox
dev_utils.modal.cancel
Cancel
dev_utils.actions.title
Quick Actions
dev_utils.actions.toggle_alerts
Toggle Alerts
dev_utils.actions.toggle_plugin_outlets
Toggle Outlets
dev_utils.links.title
Quick Links
dev_utils.links.themes
Themes
dev_utils.links.components
Theme Components
dev_utils.links.colors
Colors
dev_utils.links.settings
Settings
dev_utils.links.plugins
Plugins
dev_utils.links.user_prefs
User Preferences
dev_utils.links.text
Text
dev_utils.links.plugin_api
Plugin API
dev_utils.links.docs
Discourse Docs
dev_utils.common_settings.title
Common Settings
dev_utils.common_settings.none
Select a setting
Last edited by @JammyDodger 2024-06-15T18:10:29Z
Check document Perform check on document:
42 Likes
nolo
October 11, 2022, 11:15am
2
Thank you for this great component, Keegan!
Right now the header icon always shows. A small improvement could be to only show it to admins. So when browsing the site as a regular user the look is not tweaked.
5 Likes
Lilly
June 8, 2023, 2:08pm
3
i quite like this component. thank you!
i just noticed that the Discourse Docs button goes to the Plugin API link instead of docs.
2 Likes
keegan
June 14, 2023, 6:57pm
4
Thanks for identifying that @Lilly , I’ve pushed an update resolving this:
main ← fix-incorrect-link
opened 06:32PM - 14 Jun 23 UTC
This PR fixes an issue where the <kbd>Discourse Docs</kbd> button link was direc… ting to the `plugin-api.js` file instead of [`https://docs.discourse.org`](https://docs.discourse.org)
Thanks for the request @nolo , I’ve added this now:
committed 06:56PM - 14 Jun 23 UTC
3 Likes
This looks very good – I need to identify all of the outlets, but both Toggle Outlets and Toggle Alerts seem to do nothing except close the modal.
Are they supposed to display/show or highlight something on screen when toggled on?
1 Like
Adding/installing this theme component in addition to the Developer Toolbox makes the Toggle Outlets button work…
2 Likes
Alteras
May 16, 2024, 8:39pm
7
The Plugin API link is not opening the file. Seems like it needs to be updated to app/assets/javascripts/discourse/app/lib/plugin-api.gjs?
2 Likes
keegan
May 17, 2024, 8:26pm
9
Thanks @Arkshine for the fix, I’ve merged that in
I’ve also added a few updates (fixes/modernizations) as well as a new feature where you can now add custom links by defining them in the theme setting:
3 Likes
th21
November 17, 2024, 7:30am
10
Can we submit translation for this component on crowdin? I didn’t find the entrance to it.
1 Like
Lilly
December 1, 2024, 6:16pm
13
Hi @th21 thanks for letting us know. I have added it as a translation project in Crowdin.
3 Likes
th21
February 6, 2025, 12:13am
17
What is the expected result of “Toggle Alerts”? clicked and nothing happened
1 Like
keegan
February 6, 2025, 4:02pm
18
It is intended to hide any alerts you have on your Discourse instance. If you have any alerts on your forum like this:
It will hide it from the page. It’s quite useful for example, when theming and you want to temporarily see the page without any alerts.
2 Likes
For local development use only. Not useful for production sites
