Steam Showcase Editor

Write your Custom Info Box with live preview · BBCode ready to paste into Steam

Editor

Edit visually or jump into BBCode — both stay in sync with the preview.
The hosted app fetches public Steam Community data through its app server — never a login, password, Steam Guard code, cookie, or API key. Your draft stays in this browser (localStorage) and is never uploaded. Keep your profile and inventory public.
Steam-style editing — switch to BBCode anytime to tweak tags. Default preview layout
Saved locally No emoticons loaded yet Default preview layout 0 characters
Your emoticons
Enter your public Steam profile above, hit Load profile, then click an emoticon to insert it at your cursor.
Add an emoticon image manually

Useful when the inventory is private or Steam skips an item. Use the exact code from your showcase and a direct HTTPS image URL.

Pro tools

Extra controls for matching live Steam pixel-perfect — most players never need these.

Live Steam reference

Exact HTML Steam is serving for your Information Station. Handy to compare with the main preview.

Hit Load profile to pull in the live Information Station markup.

Layout details

Measured widths, fonts, and emoticon sizing from your loaded profile (same data behind the exactness badge).

Load your Steam profile to see layout measurements.

Screenshot comparison

Overlay a real Steam screenshot with an editor capture for a side-by-side check.

Overlay 50%
Showcase Docs

Make a Custom Info Box without the guesswork

  1. Paste your custom URL name, public profile URL, or SteamID64 up top.
  2. Hit Load profile — we match the preview to your live showcase width and pull your public emoticons.
  3. Write in Visual mode, or flip to BBCode when you want the exact tags Steam will save.
  4. Click Copy Steam BBCode, then paste into Steam → Edit Profile → Feature Showcase → Custom Info Box.

Your draft autosaves in this browser and stays there. The server only fetches public Steam Community pages — your profile, inventory, and showcase layout — and nothing you type is ever sent to it.

What “From your profile” width means

Steam’s Custom Info Box sits in a fixed left column (often about 636–652px). It doesn’t stretch wider on big monitors, and mobile Steam doesn’t reflow it like a responsive website. Load your profile once so this preview uses your measured width.

Tags Steam actually supports in profile showcases

Each example shows the BBCode you’ll paste, then a Steam-style preview of the result. Title fields are plain text only (no BBCode). Bodies are typically capped around 8,000 characters.

Headings [h1]Big title[/h1] [h2]Medium[/h2] [h3]Smaller[/h3]
Section titles — H1 is the big blue one with the dotted underline players recognize.
Emphasis [b]Bold[/b] [i]Italic[/i] [u]Underline[/u] [strike]Nope[/strike]
Classic text styling Steam players expect.
Spoiler [spoiler]secret ending[/spoiler]
Hidden until hover / focus. Keep spoilers short.
Noparse [noparse][b]shows tags literally[/b][/noparse]
Prints the tags as text instead of formatting them — great for tutorials.
Rule [hr]
Horizontal divider. Steam may also accept [hr][/hr].
Link [url=https://store.steampowered.com]Steam Store[/url]
Clickable text link. Prefer Steam / known-safe domains when you can.
Emoticons :steamhappy: Hello!
Codes from your loaded inventory become the little Steam images. Anything else stays literal text — exactly like Steam — and shows up in the Missing emoticon images panel.
Emoji (including ZWJ flags) [h1][b]🏳️‍⚧️ **Trans Rights Are Human Rights** 🏳️‍⚧️[/b][/h1]
Use the real Unicode flag sequence (🏳️‍⚧️), not a lone ⚧ symbol. Preview keeps ZWJ + color-emoji fallbacks so it matches Steam.
Decorative H1 bar [h1][b]_______▂ ▃ ▅ ▆ My Favorite Things ▆ ▅ ▃ ▂_______[/b][/h1]
Popular showcase look — mix underscores with spaced block glyphs so it matches live Steam.

Tags like [list], [table], [img], and color codes are for other Steam surfaces — don’t count on them inside a Custom Info Box.

Little things that make showcases look sharp

  • Decorative bars: Mix underscores with spaced block characters (▂ ▃ ▅ ▆) inside [h1][b]…[/b][/h1] — solid ▁ runs can look off vs live Steam.
  • Pride / ZWJ emoji: Paste the full flag sequence (e.g. 🏳️‍⚧️). A lone ⚧ is a different character and won’t match Steam’s flag.
  • Spacing: Steam is picky about blank lines after headings. This editor normalizes extras so lists sit flush like a real profile.
  • Width is basically fixed on Steam: Custom Info Boxes don’t grow past the profile column, and mobile Steam doesn’t meaningfully “shorten” the showcase for wrapping the way a phone website would. Load your profile so the preview uses that real width.
  • Manual (narrower): Still useful — drag left to stress-test long decorative H1 bars and long lines before you paste. It won’t match a separate mobile layout (Steam doesn’t really have one for this box).
  • Undo anytime: Ctrl/⌘+Z undoes body edits; Ctrl/⌘+Shift+Z (or Ctrl+Y) redoes.
  • Character budget: Aim under ~8,000 characters for the showcase body. Titles are short plain text.
  • Chasing the last few pixels: Once your showcase is live on Steam, use Pro tools → Screenshot comparison to overlay a real Steam screenshot on an editor capture. The Pro tools docs tab has a full walkthrough.
Why Manual shrink still helps
Paragraphs wrap; bar-style H1s stay one line. Narrow preview shows when a bar will clip on a tighter column — not a true “mobile Steam” mode.

Emoticons & links

  • Load profile pulls your public emoticon inventory so clicks insert the right :code:.
  • Click an emoticon to insert it at your current cursor — in Visual or BBCode mode.
  • If an image is missing, use Add image with the exact code and a direct HTTPS URL.
  • Refresh re-fetches inventory if you just traded for new emotes.
Emoticon in a sentence GG :steamhappy: see you on the battlefield
Codes like :steamhappy: become the little Steam images once Load profile has pulled your inventory. Codes you don't own stay as text.
Links [url=https://store.steampowered.com]Steam Store[/url]
Wrapped text + URL is the clearest pattern. Bare Steam URLs often auto-link, but tagged links are easier to control in a showcase.

Private inventories can’t be listed automatically — Steam simply won’t share them without a login (and this tool never asks for one).

Screenshot comparison

The preview is calibrated from your live profile, but the last few pixels — font smoothing, a decorative bar that wraps one character early, a heading sitting 2px low — are easiest to catch by laying a real Steam screenshot over an editor screenshot. That’s what Pro tools → Screenshot comparison does: it stacks the two images, lets you fade between them, and can paint a pixel diff of everything that doesn’t match.

Step by step

  1. Save your showcase to Steam first. Copy the BBCode, paste it into Steam → Edit Profile → Featured Showcase → Custom Info Box, and save. You can only compare against what Steam actually rendered.
  2. Capture the Steam side. Open your profile in the browser at 100% zoom (⌘+0 / Ctrl+0) and screenshot just the Custom Info Box — on macOS, ⌘+Shift+4 then drag. Start at the top-left corner of the title bar and end at the bottom-right corner of the box.
  3. Capture the editor side. Do exactly the same on the Steam-style preview panel in this app: same zoom, same crop boundaries (title bar corner to bottom-right corner). Matching crops matter far more than matching sizes — the tool scales images to fit, but it can’t undo a lopsided crop.
  4. Load both. Open Pro tools, then pick your Steam capture under Steam screenshot and your editor capture under Editor preview screenshot.
  5. Fade between them. Drag Overlay from 0% (pure Steam) to 100% (pure editor). Anything that visibly jumps as you scrub is a real difference.
  6. Turn on Pixel diff. Identical pixels go transparent, differences light up — brighter red means a bigger difference, blue means a small one.

Worked example

Say your decorative H1 bar looks slightly short in the preview. Screenshot the live Steam box (steam-info-box.png) and the preview panel (editor-preview.png), load both, and set Overlay to 50%. The heading text lines up, but the trailing ▂ ▃ ▅ ▆ run shows a doubled ghost edge shifted a few pixels left. Tick Pixel diff and the block glyphs light up red while everything else stays dark — so the mismatch is glyph width, not layout. That points at the symbol font fallback rather than your BBCode: hit Load profile to re-measure, check Layout details for the measured H1 font size and inner body width, and re-shoot. A clean pass looks like a nearly black diff with only text antialiasing showing.

Reading the result

  • Faint speckle over all text: normal. Font smoothing differs between the Steam page and this preview and will never diff to zero.
  • A solid block that lights up: a real layout difference — usually width, padding, or a heading margin. Re-run Load profile so the preview measures the current theme.
  • Everything shifted uniformly: your two crops didn’t start at the same corner. Re-capture rather than trusting the diff.
  • Emoticons missing on one side only: those codes aren’t in your loaded inventory. Use Add image to map them, or check the Missing emoticon images panel.

Screenshots stay in your browser — the comparison runs on a local canvas and nothing is uploaded.

Other Pro tools

  • Live Steam reference: the actual markup Steam serves for your Custom Info Box, rendered read-only next to the editor. Good for confirming a difference is real before you chase it.
  • Layout details: the measured numbers behind the exactness badge — widths, fonts, emoticon sizing. Copy details puts them on your clipboard for bug reports.