Free · local in your browser
Royal Road Blue Box Generator
Fill in the fields below to build a system-message box for a Royal Road chapter. It creates plain HTML for Royal Road source view, so you can copy it into a chapter and inspect the platform preview before publishing.
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 |
<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>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.
Good to know
Questions about this tool
How do I paste a blue box into Royal Road?
Copy the HTML, open your chapter in the Royal Road editor, switch to source-code view, and paste where the box should appear. Switch back out of source view and the box shows as a table you can still edit by hand.
Can I use colours other than blue?
Yes. There are six presets: System (blue), Quest (gold), Danger (red), Skill (green), Arcane (purple), and Plain (grey). The HTML uses plain hex values, so you can also change a shade directly in the pasted markup.
Why does the PNG exist if I can paste HTML?
Royal Road chapters use the HTML. The PNG is for places where markup does not render, such as Reddit, Discord, or X. It carries a small writeide.com mark that you can turn off, and the copied HTML never carries it.
Will the box look exactly like the preview?
Very close. Royal Road adds its own thin table border on the published page, so check the platform preview before you publish.