BBCode Editor - Online BBCode Editor with Live Preview

📖 BBCode Documentation

What is BBCode?

BBCode (Bulletin Board Code) is a lightweight markup language used to format posts in message boards and forums. It's a safer alternative to HTML, allowing users to format text without the security risks associated with raw HTML.

Basic Text Formatting

BBCode	Result	Description
`[b]text[/b]`	Bold text	Makes text bold
`[i]text[/i]`	Italic text	Makes text italic
`[u]text[/u]`	Underlined text	Underlines text
`[s]text[/s]`	~~Struck-through text~~	Strikes through text

Links and Images

BBCode	Description
`[url=URL]text[/url]`	Creates a link with custom text
`[url]URL[/url]`	Creates a link with the URL as text
`[img]URL[/img]`	Displays an image
`[email]address[/email]`	Creates an email link

Quotes and Code

BBCode	Description
`[quote]text[/quote]`	Creates a quoted block
`[quote=Author]text[/quote]`	Quotes with attribution
`[code]code[/code]`	Inline code with monospace font
`[pre]text[/pre]`	Preformatted text block

Lists

BBCode	Description
`[ul][li]item[/li][/ul]`	Unordered (bullet) list
`[ol][li]item[/li][/ol]`	Ordered (numbered) list
`[list][*]item[/list]`	Simplified list syntax

Colors and Sizes

BBCode	Description
`[color=red]text[/color]`	Changes text color (name or hex)
`[size=20]text[/size]`	Changes text size (in pixels)

Alignment

BBCode	Description
`[left]text[/left]`	Aligns text to the left
`[center]text[/center]`	Centers text
`[right]text[/right]`	Aligns text to the right

Tables

[table]
[tr]
[th]Header[/th]
[th]Header[/th]
[/tr]
[tr]
[td]Cell 1[/td]
[td]Cell 2[/td]
[/tr]
[/table]

Other Elements

BBCode	Description
`[hr]`	Horizontal rule/line
`[br]`	Line break

💡 Tips & Tricks

Nesting: You can nest BBCode tags (e.g., [b][i]text[/i][/b])
Validation: Always close your tags in the reverse order they were opened
Colors: Use color names (red, blue) or hex codes (#FF0000)
Sizes: Size values are in pixels, typically 10-30
Images: Use direct image URLs for best results

🌐 Common Use Cases

Forum Posts

[b]Subject:[/b] Discussion

[quote=Author]
Previous message
[/quote]

[i]My response...[/i]

Tutorials

[b]Step 1:[/b] Do this
[code]example code[/code]
[b]Step 2:[/b] Do that

[url=LINK]More info[/url]

Product Reviews

[b]Pros:[/b]
[ul][li]Feature 1[/li]
[li]Feature 2[/li][/ul]

[b]Cons:[/b]
[ul][li]Issue 1[/li][/ul]

📝 BBCode Editor