Royal Road Blue Box Generator

Fill in the fields below to build a system message box for a Royal Road chapter. It writes plain HTML that the Royal Road editor accepts, so the box renders the way readers expect. Copy the result and paste it into your chapter.

Colour preset

Box title

Body lines (one per line)

Stat rows (optional)

Box width60%

Center the body linesInclude the writeide.com mark on the PNG

Preview

An approximation. Royal Road adds its own thin table border on the published page, so the live box on Royal Road will look very close to this.

System Notification
You have reached Level 10.
A new skill is available.
Strength	24 (27)
Agility	18

HTML for Royal Road

<table style="border-collapse: collapse; width: 60%; background-color: #0f2238;">
  <tbody>
    <tr><td colspan="2" style="background-color: #1f3a5f; color: #cfe6ff; font-weight: bold; text-align: center; padding: 8px;">System Notification</td></tr>
    <tr><td colspan="2" style="color: #d7e7f5; text-align: center; padding: 6px 10px;">You have reached Level 10.</td></tr>
    <tr><td colspan="2" style="color: #d7e7f5; text-align: center; padding: 6px 10px;">A new skill is available.</td></tr>
    <tr><td style="color: #d7e7f5; text-align: left; padding: 6px 10px; font-weight: bold;">Strength</td><td style="color: #d7e7f5; text-align: right; padding: 6px 10px;">24 (27)</td></tr>
    <tr><td style="color: #d7e7f5; text-align: left; padding: 6px 10px; font-weight: bold;">Agility</td><td style="color: #d7e7f5; text-align: right; padding: 6px 10px;">18</td></tr>
  </tbody>
</table>

Image (PNG)

Downloads a crisp 2× image of the box you can post to Reddit, Discord, or X, where the Royal Road HTML does not render. Royal Road chapters use the HTML above.

Where to paste it

Open your chapter in the Royal Road editor (New Chapter, or edit an existing one).
In the editor toolbar, click the source code button (the <> icon) to switch to the HTML view.
Paste the copied HTML where you want the box to appear.
Switch back out of source view. The box shows up as a table you can still edit by hand.

What Royal Road keeps, and what it changes

Background colours, text colours, alignment, and bold survive on the published page. That is why the output sticks to those.
Royal Road forces its own thin table border. Custom border colours and rounded corners show in the editor but do not render once the chapter is live, so the generator leaves them out.
Use HTML source for new Royal Road chapters. Older BBCode examples remain online, but chapter submissions can reject that legacy markup.
Colours use plain hex values. You can edit them directly in the pasted HTML if you want a shade that is not in the presets.

Made with writeide.com

Browse all free tools