MarkupBuddy

App Info

This browser-based web application is a rich-content HTML "wizard" designed to provide a free development environment for web services needs at Treasury Board of Canada Secretariat.

It's tailor-made to handle conversion of MS Office documents and offer quick, clean, accessible formatting of HTML for use on AEM (Adobe Experience Manager). It also provides a space to produce, validate and preview in real time before the need to interact with a live staging enivornment first. Compatible with WET4, GCWeb and the new GoC Design System.

Developed with help from the following tools and frameworks: HugeRTE, Monaco editor, Tailwind CSS, Font Awesome, HTML Beautify and Radia AI (primarily Google Gemini 2.5).

Project source code is available on GitHub. For more detailed information or help, please contact:

Stratton Campbell
Communications Officer, Web Publishing @ Strategic Communications and Ministerial Affairs
Treasury Board of Canada Secretariat / Government of Canada
Stratton.Campbell@tbs-sct.gc.ca

How to Use - Quick Guide

Best results for new documents

Paste the entire document contents into the rich-text editor from MS Word (desktop client). Go directly to step #2, DO NOT EDIT ANYTHING YET!
Toggle Auto-Clean MSO* ON to clean MS office junk automatically on editor switch OR Go to HTML and use Clean MSO* (same result either way).
- *MSO = "Microsoft Office"
Under Quick Formatting, check and toggle all the tools you want to utilize then hit Format.
Re-visit your document in the rich-text editor (Go to Rich-Text) and QA with the original document. Fix any errors like headings, lists, etc.
- > Re-run any Quick Formatting options (especially Auto-Section and Auto-Level Headings)
(if footnotes are present) Use Process Footnotes to format any Word footnote references (it will not work on "fake" footnotes).
(if tables are present) Switch to Table Mode, assign base options to all tables via Format ALL Tables. Run Auto-Responsive and Auto Scope/ID. Select each table and hit Customize for finer control.
Continue any development needed.
Set Element ID's to assign ID's to various tags selected in the pop-up.
If required, under Quick Insert, add Page ToC and Section ToC (table of contents). Select the language and level-depth needed. (This action can be repeated if headings with id's are changed, added or removed)
Check your work! Use the Validate and Preview features as needed.

Best results for existing code (HTML using WET4 + GCDS)

Go to HTML and paste the entire HTML content into the HTML editor from AEM or local files.
Depending on the required changes, use either editor to get the job done. Tracked changes can be pasted into the rich-text editor (Auto-Clean MSO ON works best for these to clean them as you switch back and forth).
- > Updates to any hyperlinks can be done easily in the rich-text editor (right click or choose the link icon)
- > Note: Pasting over anything with an ID (like a heading) may remove the ID. Be sure to check and add back in if needed.
Under Quick Formatting, check and toggle all the tools you want to utilize then hit Format.
(if footnotes are present) Use Process Footnotes ONLY IF: New footnotes are brought in and no other footnotes were there previously. If new footnotes need to be added into existing ones, this feature will not work as intended.
(if tables are present) Switch to Table Mode. Select each table in the dropdown menu and hit Customize for finer control.
- > Use Format ALL Tables first if new tables are added in a page where no other tables existed OR you're ok with overwriting existing settings for all old and new tables.
- > REMINDER: Auto-Responsive and Auto Scope/ID effect all tables.
Continue any development needed.
(Optional) Set Element ID's to assign ID's to various tags selected in the pop-up.
(Optional) Set Page ToC and Section ToC (table of contents) if needed.
- > IMPORTANT NOTE: Using this on a page that already has them will result with the link titles being overwritten with the headings. This may be OK for some projects, but some page may have custom link titles that may differ from the actual heading!.
Check your work! Use the Validate and Preview features as needed.

This tool is in-browser only and does not manage or store any files. Keep local files and save your work often!

Inject Custom CSS

Enter custom CSS below. It will be injected into the preview and the exported prototype file. Font Awesome is automatically being applied.

IMPORTANT:

Keep a local copy and save your work often!
To avoid custom classes being cleaned and removed, use the "custom-" OR "tbs-" prefix to ALL class names!
- Example: "tbs-bluebox"

<style>

</style>

NOTE: This is persistent until you manually delete any CSS code below or refresh the page/application. Pressing Cancel or closing this modal will not clear the inputted code!

MarkupBuddy

Quick Formatting

Quick Insert

Page ToC ("On this page")

Section ToC ("In this section")

App Info

How to Use - Quick Guide

Best results for new documents

Best results for existing code (HTML using WET4 + GCDS)

Inject Custom CSS

Quick Formatting

Quick Insert

Page ToC ("On this page")

Section ToC ("In this section")

Live Preview

Customize

Formatting OptionsApply formatting to ALL tables present in this document. This will overwrite any pre-existing settings!

Base Properties

Structure and Styling

Alignment

Customize Table

Alignment>

Structure and Styling>

Base Properties>

App Info

How to Use - Quick Guide

Best results for new documents

Best results for existing code (HTML using WET4 + GCDS)

Inject Custom CSS

Formatting Options
Apply formatting to ALL tables present in this document. This will overwrite any pre-existing settings!