#BIGWORDS.PAGE reference

BIGWORDS.PAGE shows a message as large as the screen allows. Everything about the display is in the URL, so sharing the link shares the display. There are no accounts and no backend, and nothing is stored anywhere.

The editor is the easiest way to make a display. All of the URL parameters are documented here, so generating links is easy too.

Try it: https://bw.teddysc.me/#Hello%20World

#How the URL works

All state lives in the URL fragment, the part after #. Browsers never send the fragment to a server, so:

• the server never sees or logs your message,
• changing the fragment updates the display without reloading the page,
• one static page serves every possible display.

https://bw.teddysc.me/#Hello%20World&bg=000000&fg=ffffff&anim=pulse

After the #:

#Hello%20World&bg=000000&fg=ffffff&anim=pulse
 └─ message ─┘ └──────── parameters ────────┘

The message is everything before the first unencoded &. Each segment after it is a key=value parameter.

The editor uses the same fragment at a different path:

Viewer:  https://bw.teddysc.me/#Hello%20World&anim=pulse
Editor:  https://bw.teddysc.me/editor#Hello%20World&anim=pulse

#Pages

Any non-empty fragment opens the viewer, even with no message. https://bw.teddysc.me/#&bg=ff0000 is a solid red screen.

#Encoding

Use standard percent-encoding.

You can type spaces and emoji into the address bar as they are. The browser encodes them, and a link copied from the address bar has them encoded. New lines, &, # and % in the message always have to be written encoded. The editor always produces fully encoded URLs.

Messaging apps and other tools that turn URLs into links usually stop the link before punctuation at the very end, so #Hello! gets linked as #Hello. Encode punctuation at the end of a URL, such as ! as %21 or . as %2E. The editor does this for you.

#Parameters

An invalid value (bad hex, unknown font, impossible date…) quietly falls back to that parameter's default. The viewer never shows an error.

#Formatting

Messages support a small part of Markdown. A message without any formatting shows as plain text.

Other Markdown, such as lists, links and images, shows as plain text. In a URL, write a heading's # as %23: https://bw.teddysc.me/#%23%20Gate%2012%0ABoarding%20now

Formatting can span lines. Bold, italic and strikethrough carry over line breaks, so **WELCOME HOME,%0AGRANDMA!** is bold on both lines. A blank line or a heading ends them, and a marker without a matching one is shown as typed.

Underscores inside words are left alone, as in standard Markdown, so names like Home_Guest_5G, snake_case or first_name@example.com show exactly as typed. Only an underscore at a word boundary starts or ends emphasis.

Code is shown exactly as typed. Nothing inside backticks is treated as formatting, a slide break, {countdown} or an escape, which makes it the easy way to show passwords and codes with symbols in them. A code span has to open and close on the same line. Browsers may write a typed backtick as %60 in the address bar; both forms work.

https://bw.teddysc.me/#Price:%20~~$20~~%20**$15** · https://bw.teddysc.me/#Wi-Fi:%20Home_Guest_5G%0APassword:%20%60x*7|q%60

#Special tokens

#Escapes

A backslash makes the next character literal.

A backslash before any other character is dropped. In a URL you can type the backslash as-is or as %5C.

Processing order: percent-decode → escapes and code spans → split slides on || → markdown → {countdown} → restore escaped characters.

#Fonts

All fonts ship with the site, each next to its license file. A font is only downloaded, from this site, when a display uses it. Nothing is loaded from third-party font services.

#Size

With size=auto (the default), the text grows to the largest size at which the whole block fits inside the display minus its padding. Headings count at their full size. Long lines wrap between words to fit, see Wrapping. The size is recalculated whenever the window is resized or rotated, and each slide is fitted on its own.

• size-max caps the size, however much room there is.
• size-min sets a floor. If the text would have to shrink below it, it stays at the minimum and runs off the edges of the screen, centered.
• With neither, the size scales freely with the screen.
• Both only apply with size=auto. A fixed size is used as given.
• 0 counts as not set, so size=0 is auto.

Example: https://bw.teddysc.me/#Big%20but%20not%20huge&size-max=12vh

#Wrapping

With wrap=on (the default, Word wrap in the editor), lines break between words wherever they need to, and auto-fit picks the largest size at which the wrapped text fits. Long messages come out much bigger, and the same link fills a phone held upright as well as a wide TV, since each screen wraps the text its own way. The breaks are balanced, so a wrapped line doesn't end on a single short word where the browser supports it.

• Your own line breaks and headings stay: wrapping only adds breaks.
• Lines break at spaces and after hyphens, as on any web page, and between characters in languages written without spaces, such as Chinese and Japanese. A word is never split anywhere else: one too long for the width makes the text smaller.
• With a fixed size, text wraps at that size instead of running off the sides.
• crawl wraps to the width as it scrolls up. scroll moves sideways, so it ignores wrap.

With wrap=off, each line of the message stays on one line, so long lines make the text smaller. Add line breaks (%0A) where you want them.

Compare wrapped and wrap=off.

#Padding

pad is a percentage, written in CSS shorthand order. Top and bottom are a percentage of the display height; left and right are a percentage of its width. "Display" means the ratio region when one is set.

The three-value form isn't supported. Each value must be below 50.

#Colors

auto follows the viewer's light or dark setting: white on black in dark mode (and when it can't be detected), black on white in light mode. Set bg and fg independently as 6-digit hex without the #. If you set only one, the other stays auto.

https://bw.teddysc.me/#Exit&bg=0a7a2f&fg=ffffff&font=4

#Animations

speed=slow|normal|fast applies to all of them. Compare slow, normal and fast pulses.

#Display ratio

Without ratio, the message fills the screen. With ratio=W:H it's drawn in a centered region of that shape, with the background color filling the rest. Useful for matching a projector or a video frame.

The editor also accepts a width × height in pixels and turns it into a ratio (1920 × 1080 → 16:9). Only the ratio goes in the URL.

#Countdown

There are two kinds: until counts down to a date and time, and timer counts down for a length of time. Set one and put {countdown} in the message. If the message is empty, the countdown is shown on its own. Format and zero work the same for both.

#Until a date and time

Set until to an ISO 8601 date and time. The time is the viewing device's local time, unless you add a zone such as Z or +02:00. The editor's date picker takes the time in your own time zone and writes it to the URL in UTC (with Z), so the countdown ends at the same moment everywhere.

#For a length of time

Set timer to a length of time. The timer starts when the page opens, so reloading the page or opening the link again starts it over. Each device that opens the link runs its own timer. It keeps time while the tab is in the background or the screen is off.

Use any of d, h, m and s, in any order, with no spaces. Amounts add up and can go past the next unit, so 90m is 1 hour 30 minutes and 1d28h is 2 days 4 hours. The longest timer is 99 days.

https://bw.teddysc.me/#Break%20ends%20in%0A{countdown}&timer=15m&zero=Back%20to%20work!

until and timer can't be used together. If a link has both, the one that comes first is used and the other is ignored. The editor shows one at a time: pick Countdown or Timer at the top of its Countdown or timer section.

#Format and zero

With label, units are dropped from the front once they reach zero: three hours shows as 3h 00m 00s, then 59m 59s, then 59s. Zeros after the first unit stay, so the countdown doesn't jump around as it ticks. colon always shows all four units.

https://bw.teddysc.me/#Doors%20open%20in%0A{countdown}&until=2027-01-01T19:00:00&zero=Welcome!

#Slides

Separate slides with ||. All slides share every setting, and each is fitted on its own. A new slide comes in every interval seconds, using the transition set by trans:

https://bw.teddysc.me/#Welcome!||Doors%20open%20in%0A{countdown}||Enjoy%20the%20show&until=2027-01-01T19:00:00&interval=8

https://bw.teddysc.me/#9:00%20Welcome||10:30%20Workshops||12:30%20Lunch&interval=3&trans=up

Transitions last 0.6 seconds, or less when slides change quickly, so a transition always finishes well before the next one starts. When the viewing device is set to reduce motion, slide, up and zoom fade instead.

Slides changing faster than about twice a second can affect people with photosensitive epilepsy.

The editor counts the URL's characters and warns as it nears about 2,000. Some messaging apps, email clients and proxies cut off longer links.

#QR code

qr puts a QR code on the display, drawn in your browser with no outside service. Its value is the text the code holds, and how it starts decides what the scanning phone does:

The editor's QR code section has a form for each type and writes the URL for you. If you build one yourself, encode the qr value like the rest of the URL, with %26 for &.

#Placement and size

The code scales with the screen. Larger codes scan from farther away, and a long qr value makes a denser code, which needs a larger size. The code is always black on white with a quiet zone, so it scans whatever your colors are.

#Link

qr=<URL>: any URL, such as https://example.com/menu. Inside it, write & as %26, # as %23 and % as %25 (so an escaped space, %20, becomes %2520).

https://bw.teddysc.me/#Scan%20me&qr=https://bw.teddysc.me/docs&qrpos=below

#Wi-Fi

qr=WIFI:T:<security>;S:<network>;P:<password>;;

Phones that scan it offer to join the network. Each field ends in ;, the fields can come in any order, and the whole value ends with one more ;.

In the network name and password, first put a \ before any \, ;, ,, : or ". Then encode the result for the URL: spaces become %20 and each \ becomes %5C. For the network Cafe Guest with the password latte;art:

https://bw.teddysc.me/#Free%20Wi-Fi%0AScan%20to%20join&qr=WIFI:T:WPA;S:Cafe%20Guest;P:latte%5C;art;;&qrpos=below&qrsize=35

An open network: qr=WIFI:T:nopass;S:Library;;. A hidden one: qr=WIFI:T:WPA;S:Back%20Office;P:secret123;H:true;;.

The password is in the link and in the code, so anyone with the link or a view of the screen can read it.

#Phone call

qr=tel:<number>

The number is required. Use the international form, such as +15551234567, so it works from any country; the + can be typed as is. Spaces and dashes in the number are ignored, so tel:+1-555-123-4567 works too.

https://bw.teddysc.me/#%23%20Lost%20dog%0AMax,%20brown%20terrier%0ACall%20555-123-4567&qr=tel:+15551234567&qrpos=below&qrsize=30

#Text/SMS

qr=SMSTO:<number>:<message>

https://bw.teddysc.me/#%23%20Found%20a%20cat?%0AText%20us&qr=SMSTO:+15551234567:I%20found%20your%20cat&qrpos=below&qrsize=30

#Email

qr=mailto:<address>?subject=<subject>%26body=<message>

Leave out a field you don't need, and the ? too if there are none. The & between subject and body must be written %26.

https://bw.teddysc.me/#Questions?%0AEmail%20us&qr=mailto:hello@example.com?subject=Question%26body=Hi!&qrpos=below

#Location

qr=geo:<latitude>,<longitude>

Android opens it in a maps app. iPhone cameras may only show it as text, so for iPhones use a link to a map instead.

https://bw.teddysc.me/#Meet%20here&qr=geo:40.6892,-74.0445&qrpos=below

#Plain text

Any value that isn't one of the above, such as qr=Table%2012, goes in the code as text, decoded like the rest of the URL (Table 12). The phone shows the text and does nothing else.

#Image

img takes a public image URL (http, https or data:image).

The image loads straight from its host, which is never told which page asked for it. Like any image on the web, the host does see the viewing device's IP address and browser, and with refresh it sees a request every time the image reloads. Some hosts refuse to serve images to other sites, so an image that opens fine in its own tab can still fail here. If an image fails, the viewer leaves it out and the editor shows a warning.

refresh=N loads the image again every N seconds, for an image URL that points at something that changes, such as a webcam snapshot or a chart. Only the image reloads: the text, slides and any timer carry on. The new image replaces the old one once it has fully loaded, and if it fails to load, the last one stays up. Each reload adds a throwaway _= query parameter to the image URL, so no cache can answer it with the old image.

#Tips

• Keep a slide up longer: repeat it. A||A||B shows A for two intervals. With trans=none the repeat is seamless.
• Add a pause: leave a slide empty. A||||B shows a blank screen between A and B.
• Keep every slide the same size: auto-fit sizes each slide on its own, so a short slide comes out bigger than a long one. Set size-max to about the size the longest slide gets, and they all match.
• Show one word at a time: give each word its own slide, with a short interval and trans=none. https://bw.teddysc.me/#**You**%7C%7C**dropped**%7C%7C**your**%7C%7C**wallet**%7C%7C**wallet**&bg=000000&fg=ffffff&font=4&size-max=50vh&interval=0.2&trans=none
• Show commands and codes exactly as typed: put them in backticks, so symbols like * and _ aren't read as formatting. Without them, the stars in this command would vanish and .jpg would turn italic. https://bw.teddysc.me/#%23%23%20Step%203%0A%60cp%20*.jpg%20*.png%20photos/%60
• Open it on another screen: in the editor, the QR button next to the URL shows the display's link as a QR code. Scan it with the tablet or phone that will show the display.
• Hide the browser: use the browser's full screen mode (F11 on Windows and Linux, Control-Command-F on a Mac), or install the app, which opens full screen where the device allows it.

#Viewer behavior

• Screen wake: with wake=on (the default) the viewer asks the browser to keep the screen on. It asks again whenever the tab becomes visible. Browsers without support ignore it.
• Fullscreen: the viewer never asks for fullscreen and has no controls. Use your browser's or kiosk's own fullscreen mode.
• Tab title: always BIGWORDS.PAGE, whatever the message.
• Errors: never shown. Bad parameters use defaults; failed images are left out.

#Debug

When a display doesn't look the way you expect, such as text smaller than it should be or something in the wrong place, dbg shows how the viewer laid it out. Each level adds to the one before:

https://bw.teddysc.me/#Wi-Fi:%20**Cafe%20Guest**%0APassword:%0A**latte;art**&dbg=3

The overlay shows only in the viewer, not in the editor's preview. A screenshot of it at level 3 is the most useful thing to include when reporting a display problem.

#The editor

The editor shows a live preview that renders exactly what the viewer shows, plus controls for every parameter.

• The address bar always mirrors the current state, without filling your history.
• Editing the fragment in the address bar updates the controls.
• The URL field below the preview is editable too: paste a link (or just its fragment) and press Enter to load it. In the installed app, which has no address bar, that's how to edit an existing link.
• Copy URL copies the viewer URL (the same fragment without /editor). Open viewer shows it in the same tab, and Back returns to the editor; the icon next to it opens it in a new tab instead. The QR button next to the URL shows it as a QR code, so a phone or tablet can scan it to open the display.
• Parameters left at their defaults are dropped from the URL to keep it short.

#Install and offline

BIGWORDS.PAGE can be installed as an app from the browser: Install in Chrome or Edge, or Share → Add to Home Screen on iPhone and iPad. The app opens on the editor, fullscreen where the device allows it.

After the first visit, the site keeps a copy of itself, so displays, the editor and these docs work without a connection, whether installed or in a browser tab. Images from other sites (img) only show while online. When you're online, pages always load the latest version. Browsers can clear the copy for a site you haven't used in a while, especially in a tab; an installed app keeps it longer.

#Privacy

The message and settings live only in the URL fragment, which browsers do not send to servers. BIGWORDS.PAGE's own code adds no analytics, cookies or tracking. A site that hosts it may add analytics of its own: check that site's notes, which may follow at the end of this page, or its privacy policy.

#Self-hosting

The build is a folder of static files. Any static host works if it serves index.html for /, editor.html for /editor, docs.html for /docs, and 404.html with status 404 for any other path. Set SITE_URL to your own origin when building (for example SITE_URL=https://signs.example.com npm run build) to add canonical URLs, social cards and a sitemap. A Docker image based on Caddy is included in the repository:

docker compose up -d --build

The container listens on port 80 inside its network and publishes no ports by default. Put it behind your reverse proxy, which handles TLS.