Developer Toolbox

[Discourse]

	Summary	Developer Toolbox gives quick access to common links, actions, and settings often used when developing with Discourse.
	Repository Link	https://github.com/discourse/discourse-dev-utils
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

For local development use only. Not useful for production sites

As this is an official theme component maintained by the Discourse team, support, bug, ux, and feature requests can be made in the respective categories here on Meta, and tagged with the appropriate theme component tag. Click on a link below to get one started.

 Support  Bug  UX  Feature

Features

How it works

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.

Settings

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:

[nolo (Manuel)]

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.

[Lilly]

i quite like this component. thank you!

i just noticed that the Discourse Docs button goes to the Plugin API link instead of docs.

[keegan (Keegan George)]

@Lilly

Discourse Docs button goes to the Plugin API link instead of docs.

Thanks for identifying that @Lilly, I’ve pushed an update resolving this:

FIX: Use correct link for Discourse Docs

@nolo

small improvement could be to only show it to admins.

Thanks for the request @nolo, I’ve added this now:

DEV: Show only for admins (#3)

[denvergeeks]

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?

[denvergeeks]

Adding/installing this theme component in addition to the Developer Toolbox makes the Toggle Outlets button work…

GitHub - communiteq/plugin-outlets-theme-component

[Alteras]

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?

[Arkshine]

Thanks, I made the PR

DEV: Update plugin API link

[keegan (Keegan George)]

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: