WriteIDEA studio for LitRPG authors

[ Tool ] · Free and offline

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.

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.
Strength24 (27)
Agility18
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>

Where to paste it

  1. Open your chapter in the Royal Road editor (New Chapter, or edit an existing one).
  2. In the editor toolbar, click the source code button (the <> icon) to switch to the HTML view.
  3. Paste the copied HTML where you want the box to appear.
  4. 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.
  • Legacy BBCode still works on Royal Road, but the site has moved to HTML and plans to drop BBCode later, so this tool gives you HTML.
  • 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.

This tool runs entirely in your browser. Nothing you type is sent anywhere, there is no account, and it keeps working with your network off. It is made by WriteIDE, a desktop app that tracks LitRPG stats and items across a whole novel. If you write enough of these boxes by hand to wish they stayed correct on their own, that is the problem WriteIDE works on. See the features