Configuring StreamUP BBCode

by StreamUP

---

Version: 0.1.0

A text source for OBS that actually lets you style things. Bold, colours, gradients, animations, live countdowns, Google Fonts. All rendered natively inside OBS. No browser sources. No external services. Just type tags, get styled text.

If you've ever tried to make good-looking text overlays in OBS, you know the pain. This fixes that.

Requires OBS 31.0 or newer

---

What is BBCode?

BBCode is a simple way to format text using tags in square brackets. If you've ever used a forum, you've probably seen it before.

[b]this is bold[/b]

Opening tag, your text, closing tag. That's it.

You can nest them too. Want bold red text? Just wrap one inside the other.

[b][color=#ff4444]Bold and red[/color][/b]

Add an animation and it comes to life.

[rainbow speed=2]Colourful streaming text[/rainbow]

---

Adding the Source

1. In your scene, click + under Sources
2. Select StreamUP BBCode from the list
3. Type your text with tags in the Text field
4. Hit Tag Reference if you forget a tag

---

Quick Example

Hello [b]World[/b]!
[color=#ff0000]Red[/color] [i]italic[/i]
[wave amp=30 freq=4]Wavy[/wave]
[rainbow speed=2]Rainbow[/rainbow]

Bold, colour, a wave animation, and rainbow cycling. All in one source.

---

Tags

76 tags across 7 categories. Here's all of them.

TIP

The previews below use the exact same animation maths as the plugin. What you see here is what you get in OBS.

Formatting

Bold, Italic, Underline, Strikethrough

The basics. Wrap your text and it does what you'd expect.

[b]Bold text[/b]
[i]Italic text[/i]
[u]Underlined[/u]
[s]Struck through[/s]

Font Family

Change the font for a section of text. Uses any font installed on your system.

[font=Georgia]Georgia font[/font]
[font=Impact]Impact font[/font]

Georgia   Impact   Courier New   Comic Sans

Font Size

Set the size in pixels. Range is 1 to 500. There are also [big] and [small] shortcuts.

[size=72]Big text[/size]
[size=12]Small text[/size]
[big]1.5x bigger[/big]
[small]0.67x smaller[/small]

Subscript and Superscript

H[sub]2[/sub]O
E=mc[sup]2[/sup]

H₂O    E=mc²    X_n+1

Monospace

[code]fixed-width text[/code]
[tt]same thing[/tt]

Normal text vs fixed-width code

Drop Cap

Makes the first character large, spanning multiple lines. Good for story intros or title cards.

[dropcap]Once upon a time...[/dropcap]
[dropcap lines=4]Text[/dropcap]

Once upon a time in a land far, far away there lived a streamer who wanted their text overlays to look good...

Google Fonts

Use any of 500+ Google Fonts. The plugin downloads and caches them automatically the first time.

[gfont=Lobster]Fancy text[/gfont]
[gfont=Permanent Marker]Marker text[/gfont]

No setup needed. Just type the font name. There's also a dropdown in the properties panel with a Copy Tag button that puts [gfont=Name] on your clipboard.

Script Font   Consolas   Georgia

INFO

500+ Google Fonts are available. The plugin downloads and caches them automatically on first use.

---

Colours

Named Colours

Over 140 colour names are supported. Case doesn't matter, underscores and hyphens are optional.

[color=red]Red text[/color]
[color=dodgerblue]Blue text[/color]
[color=coral]Coral text[/color]

[colour] works too. Proper spelling.

Click to expand full color list

Color	Hex	Color	Hex
aliceblue	#F0F8FF	antiquewhite	#FAEBD7
aqua	#00FFFF	aquamarine	#7FFFD4
azure	#F0FFFF	beige	#F5F5DC
bisque	#FFE4C4	black	#000000
blanchedalmond	#FFEBCD	blue	#0000FF
blueviolet	#8A2BE2	brown	#A52A2A
burlywood	#DEB887	cadetblue	#5F9EA0
chartreuse	#7FFF00	chocolate	#D2691E
coral	#FF7F50	cornflowerblue	#6495ED
cornsilk	#FFF8DC	crimson	#DC143C
cyan	#00FFFF	darkblue	#00008B
darkcyan	#008B8B	darkgoldenrod	#B8860B
darkgray	#A9A9A9	darkgreen	#006400
darkkhaki	#BDB76B	darkmagenta	#8B008B
darkolivegreen	#556B2F	darkorange	#FF8C00
darkorchid	#9932CC	darkred	#8B0000
darksalmon	#E9967A	darkseagreen	#8FBC8F
darkslateblue	#483D8B	darkslategray	#2F4F4F
darkturquoise	#00CED1	darkviolet	#9400D3
deeppink	#FF1493	deepskyblue	#00BFFF
dimgray	#696969	dodgerblue	#1E90FF
firebrick	#B22222	floralwhite	#FFFAF0
forestgreen	#228B22	fuchsia	#FF00FF
gainsboro	#DCDCDC	ghostwhite	#F8F8FF
gold	#FFD700	goldenrod	#DAA520
gray	#BEBEBE	green	#00FF00
greenyellow	#ADFF2F	honeydew	#F0FFF0
hotpink	#FF69B4	indianred	#CD5C5C
indigo	#4B0082	ivory	#FFFFF0
khaki	#F0E68C	lavender	#E6E6FA
lavenderblush	#FFF0F5	lawngreen	#7CFC00
lemonchiffon	#FFFACD	lightblue	#ADD8E6
lightcoral	#F08080	lightcyan	#E0FFFF
lightgoldenrod	#FAFAD2	lightgray	#D3D3D3
lightgreen	#90EE90	lightpink	#FFB6C1
lightsalmon	#FFA07A	lightseagreen	#20B2AA
lightskyblue	#87CEFA	lightslategray	#778899
lightsteelblue	#B0C4DE	lightyellow	#FFFFE0
lime	#00FF00	limegreen	#32CD32
linen	#FAF0E6	magenta	#FF00FF
maroon	#B03060	mediumaquamarine	#66CDAA
mediumblue	#0000CD	mediumorchid	#BA55D3
mediumpurple	#9370DB	mediumseagreen	#3CB371
mediumslateblue	#7B68EE	mediumspringgreen	#00FA9A
mediumturquoise	#48D1CC	mediumvioletred	#C71585
midnightblue	#191970	mintcream	#F5FFFA
mistyrose	#FFE4E1	moccasin	#FFE4B5
navajowhite	#FFDEAD	navy	#000080
navyblue	#000080	oldlace	#FDF5E6
olive	#808000	olivedrab	#6B8E23
orange	#FFA500	orangered	#FF4500
orchid	#DA70D6	palegoldenrod	#EEE8AA
palegreen	#98FB98	paleturquoise	#AFEEEE
palevioletred	#DB7093	papayawhip	#FFEFD5
peachpuff	#FFDAB9	peru	#CD853F
pink	#FFC0CB	plum	#DDA0DD
powderblue	#B0E0E6	purple	#A020F0
rebeccapurple	#663399	red	#FF0000
rosybrown	#BC8F8F	royalblue	#4169E1
saddlebrown	#8B4513	salmon	#FA8072
sandybrown	#F4A460	seagreen	#2E8B57
seashell	#FFF5EE	sienna	#A0522D
silver	#C0C0C0	skyblue	#87CEEB
slateblue	#6A5ACD	slategray	#708090
snow	#FFFAFA	springgreen	#00FF7F
steelblue	#4682B4	tan	#D2B48C
teal	#008080	thistle	#D8BFD8
tomato	#FF6347	turquoise	#40E0D0
violet	#EE82EE	webgray	#808080
webgreen	#008000	webmaroon	#800000
webpurple	#800080	wheat	#F5DEB3
white	#FFFFFF	whitesmoke	#F5F5F5
yellow	#FFFF00	yellowgreen	#9ACD32

Hex Colours

Use #RGB or #RRGGBB format.

[color=#FF6B00]Orange[/color]
[color=#00ff88]Mint[/color]

Opacity

Set how transparent text is. 0.0 is invisible, 1.0 is fully visible.

[opacity=0.5]Half visible[/opacity]
[opacity=0.25]Very faded[/opacity]

Background Highlight

Add a coloured background behind your text. Works with colour names or hex values.

[bg=yellow]Highlighted[/bg]
[bg=#FF6B6B]Red background[/bg]
[highlight=#6bcb77]Green highlight[/highlight]

Gradient

Colour gradient across your text. Supports horizontal, vertical, and multi-stop gradients.

[gradient from=red to=blue]Gradient text[/gradient]
[gradient from=red to=blue dir=vertical]Vertical[/gradient]
[gradient stops="red 0%,gold 50%,blue 100%"]Multi-stop[/gradient]

Red to Blue Gradient   Multi-stop

Parameter	What It Does
from	Starting colour (name or hex)
to	Ending colour
dir	horizontal (default) or vertical
stops	Multi-stop colours: "red 0%,gold 50%,blue 100%"

---

Styling

Outline

Stroke around each character. Good for making text readable over busy backgrounds.

[outline color=black size=3]Outlined text[/outline]

Parameter	Default	What It Does
color	black	Outline colour
size	2	Thickness in pixels (1-20)

Shadow

Drop shadow behind text. Adjust the colour and offset.

[shadow color=black x=3 y=3]Shadowed text[/shadow]

Parameter	Default	What It Does
color	gray	Shadow colour
x	2	Horizontal offset (pixels)
y	2	Vertical offset (pixels)

Glow

Soft halo around text. Great for neon-style effects.

[glow color=gold size=8]Glowing text[/glow]

Parameter	What It Does
color	Glow colour
size	Glow radius in pixels (1-30)

Letter Spacing

Extra space between characters.

[spacing=10]Spaced out text[/spacing]

Text Alignment

Align text left, centre, or right within the source width.

[align=center]Centred text[/align]
[center]Shortcut[/center]
[left]Left[/left]
[right]Right[/right]
[justify]Justified[/justify]

Left-aligned

Centre-aligned

Right-aligned

Indent

Push text in from the left edge. Default is 40 pixels.

[indent=60]Indented text[/indent]

No indent
40px indent
80px indent

Horizontal Rule

A simple divider line across the full width.

Text above
[hr]
Text below

Text above

---

Text below

Box

Put a border around text. Add rounded corners, padding, whatever you need.

[box border=2 color=white padding=10]Boxed text[/box]
[box border=2 color=gold radius=10 padding=10]Rounded box[/box]

Parameter	Default	What It Does
border	2	Border thickness
color	white	Border colour
padding	10	Inside spacing
radius	0	Corner rounding

Boxed text   Gold rounded box   Red pill

Blur

Blurs the text. Higher number means blurrier. Range 1-20.

[blur=3]Blurry text[/blur]

Sharp   Blur 2   Blur 4   Blur 8

Texture

Fills your text shape with an image file. Point it at a local image path.

[texture image=wood.jpg]Textured[/texture]

Mask

Clips text to a mask image. White areas are visible, black areas are hidden.

[mask image=shape.png]Masked text[/mask]

Word Wrap

Forces text to wrap within the source width. Useful when you have custom extents set.

[wrap=word]Long text that wraps at word boundaries[/wrap]
[wrap=char]Wraps mid-character if needed[/wrap]

This is a long sentence that wraps at word boundaries within the source width

---

Animations

All animations run per-character with a staggered offset, so they ripple across the text naturally.

Wave

Characters float up and down in a sine wave pattern.

[wave amp=50 freq=5]Wavy text[/wave]

Parameter	Default	What It Does
amp	50	Wave height in pixels
freq	5	How fast it oscillates

Bounce

Characters hop up and down. Think bouncing ball.

[bounce amp=20 freq=3]Bouncy text[/bounce]

Parameter	Default	What It Does
amp	20	Hop height in pixels
freq	3	Hops per second

Shake

Random jitter on each character. Good for "danger" or "error" text.

[shake rate=20 level=5]Shaky text[/shake]

Parameter	Default	What It Does
rate	20	How often it jitters
level	5	How far it moves (pixels)

Pulse

Characters grow and shrink rhythmically.

[pulse freq=1 ease=-2]Pulsing text[/pulse]

Parameter	Default	What It Does
freq	1	Pulses per second
ease	-2	Easing curve (negative = smooth in-out)

Tornado

Characters orbit in circles around their position.

[tornado radius=10 freq=1]Spinning text[/tornado]

Parameter	Default	What It Does
radius	10	Circle size in pixels
freq	1	Orbits per second

Rainbow

Characters cycle through rainbow colours. Each character is offset so it looks like a moving gradient.

[rainbow speed=1]Rainbow text[/rainbow]

Parameter	Default	What It Does
speed	1	Colour cycle speed

Rotate

Each character spins on its own axis.

[rotate speed=45]Spinning[/rotate]

Parameter	Default	What It Does
speed	45	Degrees per second

Blink

Characters blink on and off. Classic.

[blink freq=2]Blinking text[/blink]

Parameter	Default	What It Does
freq	2	Blinks per second

Flip

Characters squish and mirror on an axis. All characters flip together.

[flip axis=x speed=1]Flipping text[/flip]
[flip axis=y speed=1]Flipping text[/flip]

Parameter	Default	What It Does
axis	x	Flip axis: x or y
speed	1	Flips per second

Metallic

A shiny metallic sheen that sweeps across text. Looks best with a gold or silver base colour.

[metallic speed=2]Metallic text[/metallic]
[metallic speed=2][color=gold]Gold sheen[/color][/metallic]

Parameter	Default	What It Does
speed	2	How fast the sheen moves

---

Effects

These are one-shot or ongoing visual effects. Some loop, some play once.

Typewriter

Characters appear one at a time, like someone is typing them. Optional blinking cursor.

[typewriter speed=8 cursor=1 loop=1]Typing text[/typewriter]

Parameter	Default	What It Does
speed	8	Characters revealed per second
cursor	0	Show blinking cursor (set to 1 to enable)
loop	0	Seconds to wait before restarting (0 = no loop)

Hacker

Characters scramble through random letters before revealing the real text, left to right.

[hacker speed=4 loop=2]Decoding text[/hacker]

Parameter	Default	What It Does
speed	4	Characters revealed per second
loop	2	Seconds to wait before restarting (0 = no loop)

Glitch

Random characters get temporarily replaced with junk. Looks like corrupted data.

[glitch rate=5 intensity=1]Glitchy text[/glitch]

Parameter	Default	What It Does
rate	5	How often glitches happen
intensity	1	How much text gets corrupted (0.0 to 1.0)

Fade

Text gradually fades out from a starting point.

[fade start=0 length=12]Fading text[/fade]

Parameter	Default	What It Does
start	0	Character position where fade begins
length	12	How many characters it fades across

Slide

Text slides in from off-screen.

[slide dir=left speed=80]Sliding in[/slide]

Parameter	Default	What It Does
dir	left	Direction: left, right, up, or down
speed	80	Slide speed in pixels per second

Zoom

Text scales in from small to full size (or any range you set).

[zoom from=0 to=1 speed=2]Zoom in[/zoom]

Parameter	Default	What It Does
from	0	Starting scale (0 = invisible)
to	1	Final scale (1 = normal)
speed	2	How fast it zooms

Scroll / Marquee

Scrolling text that moves horizontally. Like a news ticker.

[scroll speed=80]Breaking news: text goes here[/scroll]
[marquee speed=60]Same thing, different name[/marquee]

Parameter	Default	What It Does
speed	80	Scroll speed in pixels per second

Curve

Places text along a curved arc. Good for logos or decorative headers.

[curve radius=200 angle=180]Curved text[/curve]

Parameter	Default	What It Does
radius	200	How big the arc is (pixels)
angle	180	How far around the arc text goes (degrees)

Matrix

Characters cycle through random symbols like the Matrix digital rain effect.

[matrix speed=10]Decode this[/matrix]

Parameter	Default	What It Does
speed	10	How fast characters cycle

Fire

Text flickers with warm fire colours.

[fire intensity=0.5]Burning text[/fire]

Parameter	Default	What It Does
intensity	0.5	Fire strength (0.0 to 1.0)

Electric

Sparks and displacement. Characters jitter with electric energy.

[electric freq=10 intensity=5]Zapping text[/electric]

Parameter	Default	What It Does
freq	10	How often sparks happen
intensity	5	How much characters jump

---

Dynamic Content

These tags update in real time. Countdowns count, clocks tick, variables change when you tell them to.

Countdown

Live countdown timer from a number of seconds. Displays as MM:SS.

[countdown=120]

Counts down from 300 seconds (5 minutes) in real time.

Counter

Animated number that counts from one value to another over a set duration.

[counter from=0 to=1000 duration=5]
[counter from=0 to=99.9 duration=3 decimals=1]

Parameter	Default	What It Does
from	0	Starting number
to	100	Ending number
duration	5	How many seconds to count over
decimals	0	Decimal places to show

Clock

Live system clock. Uses Qt time format strings.

[clock format="HH:mm:ss"]
[clock format="hh:mm AP"]

Common formats: HH = 24h hours, hh = 12h hours, mm = minutes, ss = seconds, AP = AM/PM.

Random Words

Cycles through a list of words at a set speed.

[random words="Hello,Hi,Hey,Yo" speed=2]

Parameter	What It Does
words	Comma-separated list of words to cycle through
speed	How many words per second (default 2)

Variables

Placeholder that gets replaced when you set a value via WebSocket. Useful for alerts, notifications, or anything triggered by stream events.

Welcome [var=username] to the stream!

Shows as {username} until a value is set. See the WebSocket section for how to set variables.

Inline Image

Display an image inline with your text.

[img src=C:/images/logo.png width=32 height=32]

---

Special Tags

Style Presets

Apply a saved preset by name. Create presets in the Style Presets editor (button in the properties panel).

[use=alert]Warning text[/use]

Save a preset called "alert" with tags like [color=red][b][shake], then use it anywhere with [use=alert]. Saves a lot of typing. Here's what a preset like that would look like:

Presets can nest up to 10 levels deep and are shared across all BBCode sources.

No Parse

Show BBCode tags as plain text instead of rendering them.

[noparse][b]this stays as text[/b][/noparse]
[plain][i]same thing[/i][/plain]

Without noparse, [b]text[/b] renders as:

With noparse, the tags are displayed literally as [b]bold text[/b] instead of being rendered.

Reset

Closes all open tags and goes back to default styling. Two ways to write it.

[b][color=red]Styled text[reset]Back to normal
[b]Bold[/all]Not bold

Everything after [reset] or [/all] returns to default font, colour, and size.

Newline

Force a line break without pressing Enter.

Line 1[/n]Line 2

Line 1
Line 2

---

Combining Tags

You can stack as many tags as you want. Nest them inside each other and they all apply.

[rainbow][wave]Rainbow Wave[/wave][/rainbow]
[b][color=gold][metallic speed=2]Gold Sheen[/metallic][/color][/b]
[fire][shake rate=10 level=2]Fiery Shake[/shake][/fire]
[electric][color=#89b4fa]Electric Blue[/color][/electric]
[rainbow][bounce]Rainbow Bounce[/bounce][/rainbow]

The order doesn't usually matter, but effects that move characters (wave, bounce, shake) should generally go on the outside, and colour/styling tags on the inside.

---

Global Tags

The Global Tags field in the properties panel wraps all your text automatically. Type your opening tags and the closing tags are added for you.

Put [rainbow][wave] in Global Tags, and your entire text gets wrapped in [rainbow][wave]...[/wave][/rainbow].

This is useful when other tools (like WebSocket) are supplying the text content. You can apply effects without touching the text itself.

---

Settings Reference

Text Group

• Text - Your BBCode content
• Global Tags - Tags that wrap everything automatically
• Antialiasing - Smooth text edges (on by default)
• Auto Close Tags - Automatically closes any unclosed tags
• Refresh on Active - Restarts animations when the source becomes visible (on by default)

Font

• Font - Base font, size, and style (default: Arial, 48px)
• Default Colour - Base text colour when no [color] tag is active (default: white)

Google Fonts

• Google Font - Dropdown with 500+ fonts, or type any name
• Copy Tag - Copies [gfont=Name] to your clipboard

Effects

• Outline - Toggle on/off, set size (1-20px), colour, and opacity
• Shadow - Toggle on/off, set colour and X/Y offset (-50 to 50px)

Layout

• Custom Size - Fixed width and height (32-8000px)
• Auto Padding - Calculates padding automatically (on by default)
• Manual Padding - Left, right, top, bottom (0-500px each)
• Line Spacing - Extra space between lines (-20 to 100px)

---

WebSocket

The plugin registers as a WebSocket vendor called streamup-bbcode using the obs-websocket 5.x API. This lets you control BBCode sources from Streamer.Bot, scripts, or anything that connects to OBS WebSocket.

set_text

Update the text on a source.

Parameter	Required	What It Does
sourceName	Yes	Name of your BBCode source in OBS
text	Yes	The new BBCode text to display

get_text

Get the current text from a source.

Parameter	Required	What It Does
sourceName	Yes	Name of your BBCode source

Returns text in the response.

set_global_tags

Update the global tags on a source.

Parameter	Required	What It Does
sourceName	Yes	Name of your BBCode source
tags	Yes	BBCode tags to wrap everything in

get_global_tags

Get the current global tags.

Parameter	Required	What It Does
sourceName	Yes	Name of your BBCode source

Returns tags in the response.

set_variable

Set a variable value. This is what powers [var=name] tags.

Parameter	Required	What It Does
sourceName	Yes	Name of your BBCode source
name	Yes	Variable name (matches [var=name])
value	No	Value to display (empty string if not set)

Streamer.Bot Example

// Set text on a BBCode source
CPH.ObsSendRaw("CallVendorRequest",
  "{\"vendorName\":\"streamup-bbcode\"," +
  "\"requestType\":\"set_text\"," +
  "\"requestData\":{" +
    "\"sourceName\":\"My BBCode Source\"," +
    "\"text\":\"[b]Hello[/b] [color=red]World[/color]\"" +
  "}}", 0);

// Set a variable
CPH.ObsSendRaw("CallVendorRequest",
  "{\"vendorName\":\"streamup-bbcode\"," +
  "\"requestType\":\"set_variable\"," +
  "\"requestData\":{" +
    "\"sourceName\":\"My BBCode Source\"," +
    "\"name\":\"username\"," +
    "\"value\":\"Andi\"" +
  "}}", 0);

---

Tips

Nest tags freely. Bold, red, bouncing text is just [b][color=red][bounce]text[/bounce][/color][/b].

Use Global Tags for consistency. If every source should be the same font and colour, set it once in Global Tags instead of repeating it everywhere.

Save presets for things you reuse. If you keep typing [outline color=black size=2][shadow color=#000 x=2 y=2] on everything, save it as a preset and just use [use=my-style].

Auto Close Tags is your safety net. Turn it on if you're feeding dynamic text in via WebSocket. Stops formatting from leaking when a closing tag is missing.

Refresh on Active resets animations. Typewriter plays from the start every time you switch to a scene. Turn it off if you want animations to keep running in the background.