BBCode viewer: preview posts without publishing
Many forum editors only show a preview after a page reload, and some have no preview at all. When you are writing long patch notes, guides or event announcements full of colors, lists and tables, it helps to see the result as you type. This BBCode viewer renders your post live, so you can catch a missing [/color] or a broken list before anyone else sees it.
Example
[size=5][b]Patch notes v2.4[/b][/size]
[list]
[*][color=green]New:[/color] dark mode for the dashboard
[*][color=orange]Changed:[/color] faster search
[*][color=red]Fixed:[/color] login loop on Safari
[/list]
[spoiler=Known issues]Sync may take a minute after updating.[/spoiler]The preview shows a large bold title, a bulleted list with colored labels and a collapsible spoiler section.
Tags you can preview
- Text:
[b],[i],[u],[s],[sub],[sup],[highlight] - Style:
[color=red]or[color=#ff0000],[size=1…7]or pixel sizes,[font=Georgia] - Layout:
[center],[right],[align=justify],[indent],[hr] - Content:
[url],[email],[img],[youtube],[quote=Name],[code] - Structure:
[list],[list=1],[*],[table],[tr],[td],[spoiler],[h1]–[h6]
Why a post might look different on your forum
BBCode is not a single standard. Each forum package defines its own tag set, and administrators can add custom tags. Differences you may notice:
- Sizes – phpBB uses percentages (
[size=150]), others use a 1–7 scale. The viewer accepts both. - Tables, spoilers and video – available only if the forum enables them.
- Styling – quotes, code blocks and fonts adopt your forum's theme, so colors and spacing will differ even when the structure is identical.
If a tag appears as plain text in the preview, it is not a recognized BBCode tag, which is usually a typo in the tag name.
Tips for well-formed BBCode
Close tags in the reverse order you opened them ([b][i]text[/i][/b]), and put each [*] item on its own line for readability. Unclosed tags are closed automatically at the end of the preview, but many forums are stricter.
Safe rendering
The preview escapes any HTML you type, drops unsafe link types such as javascript: and displays the result in a sandboxed frame. Your draft stays in your browser.
Tags that often go wrong
- Links:
[url=https://example.com]Read more[/url]shows the text “Read more”, while[url]https://example.com[/url]shows the address itself. Leaving out thehttps://makes many forums treat the link as relative. - Images:
[img]needs a direct link to the image file, usually ending in .png, .jpg or .gif. The address of a photo-sharing page shows up as a broken image. - Quotes:
[quote=Name]credits the author; many forums also accept quotation marks around names that contain spaces. - Numbered lists: use
[list=1]; a plain[list]gives bullets, and each item still needs its own[*].
A quick check before posting: every opening tag that takes content, such as [b], [color] or [quote], should have a matching closing tag in the preview. [*] and [hr] are the usual exceptions that stand alone.
Related tools
Have the content in HTML already? Convert it with HTML to BBCode. Migrating posts away from a forum? BBCode to HTML gives you the markup, and the hyperlink generator creates BBCode links for you.