Docs

Introduction

TwistedPad lets you create customizable controller overlays for streams and videos. It’s designed for clarity, personalization, and performance—so viewers can see exactly what you’re pressing in real time.

Important: Controller input is detected by the device running the overlay (for example, the OBS Browser Source). If the controller is connected to a different machine, you’ll need a dual‑PC workflow (see below) or an input relay solution (future feature).

Quick start

Create an account — sign up and verify your email.
Create an overlay — open the editor and build your layout (Base + Pressed states).
Set it active — pick the overlay you want to broadcast as your “Active Overlay”.
Copy your overlay URL — you’ll use this in OBS as a Browser Source.
Add to OBS — see the “OBS single‑PC setup” section.

Pro tip: Keep a “template overlay” that’s clean and reusable. Clone it when starting new designs (Pro+ only).

Plans & core rules

Project2 uses a strict, enforceable ruleset so access and monetization are consistent across the site.

Topic	How it works
Visibility	Public or Private only (no “unlisted”). Private overlays can use an access list (Pro+ recipients only).
Slots	Overlay slots are currency. Creating an overlay consumes a slot; deleting refunds a slot (subject to abuse controls).
Free tier	Templates / sandbox only. No saving custom overlays.
Plus tier	Owner‑private overlays. BPS allowed. No input history. No cloning.
Pro+ tiers	Cloning enabled. Access lists supported. Team features depend on plan.
Licensing / Market	Planned: view/edit/exclusive licensing. Purchased overlays may have additional visibility restrictions.

Common setups

Use the setup that matches where your controller is connected and where you produce your stream.

Single‑PC stream

Controller and OBS on the same machine. This is the simplest and most reliable workflow.

Overlay runs as an OBS Browser Source.
Gamepad input is detected directly.
Best for PC games and controllers connected via USB/Bluetooth.

Dual‑PC stream

Your game runs on a “Gaming PC” and OBS runs on a “Streaming PC”. Controller is typically connected to the Gaming PC.

Run the overlay on the Gaming PC, then send it as video to the Streaming PC (NDI / capture / teleport workflow).
Alternative: connect a controller directly to the Streaming PC (if your setup allows).

Console note: Consoles do not expose controller inputs to a PC browser by default. If you stream console gameplay, you can still use TwistedPad for visuals, but reading real inputs may require additional hardware/software outside TwistedPad.

OBS single‑PC setup

This is the recommended setup when possible.

Open OBS Studio and click + under Sources.
Select Browser (Browser Source).
Paste your overlay URL.
Set Width/Height to match your canvas (common: 1920×1080).
Enable Shutdown source when not visible for best performance.
Click OK, then position/scale your overlay in the scene.

Common gotcha: Some browsers require focus/interaction before the Gamepad API becomes active. If inputs don’t show, click inside the overlay once (in a normal browser window) and confirm your controller is detected.

Dual‑PC streaming

Because the controller is usually connected to the Gaming PC, the overlay must run where the controller is. Then you deliver that overlay as video to the Streaming PC.

Option A: NDI (recommended if you already use NDI)

On the Gaming PC, run OBS with a scene that contains only your overlay Browser Source.
Add an NDI output for that scene (OBS‑NDI plugin workflow).
On the Streaming PC, add an NDI Source and select that overlay feed.
Chroma key is not required if you design with transparency; otherwise design with a clean background and key it.

Option B: Capture / teleport workflows

If you prefer not to use NDI, you can still move the overlay as video:

Capture card / HDMI: Show the overlay in a fullscreen window on the Gaming PC and capture it.
OBS Teleport / similar: Send a scene feed from Gaming PC OBS into Streaming PC OBS.
Window capture: Capture a browser window running the overlay, then crop/scale as needed.

Future direction: A dedicated input‑relay (Gaming PC → Streaming PC) would allow the overlay to run directly on the Streaming PC while reading remote inputs. This is not part of the current rebuild yet.

Streamlabs Desktop / StreamElements

Both platforms support browser overlays. The same fundamentals apply—use your overlay URL as a browser source and set a fixed resolution.

Streamlabs Desktop: Add a Browser Source and paste your URL. Ensure “Shutdown source when not visible” (or equivalent) is enabled if available.
StreamElements: Add a Custom Widget / Overlay and embed your overlay URL. Keep the widget resolution consistent with your scene.
Tip: If you see stutter, reduce animations (glow/filters) and keep the overlay resolution reasonable.

Performance & stability

Prefer 60fps overlays with minimal heavy effects. Excessive glow/blur can increase GPU load.
Turn on “Shutdown source when not visible” (OBS) to prevent background usage across scene switches.
Use a consistent canvas size (example: build at 1920×1080 and scale down in OBS) to avoid reflow/recalc churn.
Keep your browser source cache clean: if something looks stuck, refresh the Browser Source.

Diagnostics: If your overlay feels “laggy,” check: OBS stats (dropped frames), GPU usage, and whether another source is forcing FPS down (video decode overload).

Security & privacy

Private overlays should remain private unless you intend to share them. For Pro+ overlays, use the access list for controlled sharing.
Email verification is required for linking accounts and for access‑list invites (where enforced).
Do not publish internal links that grant elevated access. If you suspect leakage, rotate/remove access and report.

Reminder: API endpoints are intentionally not documented publicly at this time.

Keyboard shortcuts

Shortcuts speed up editing. Most apply to the currently selected target/item. Some shortcuts depend on which panel is active (for example, Extra Images vs Base layer).

Navigation & preview

[ / ] — Previous / next target
1 / 2 — Switch Base / Pressed state
Space (hold) — Temporarily preview the opposite state (Base ↔ Pressed)

Move / align

Arrow keys — Nudge selected item
Shift + Arrow keys — Nudge by 5px
Alt + G — Snap current item to grid
Alt + R — Reset current item position
Shift + E — Align items in the current group to the current target’s X/Y (when supported)
Ctrl + Click — Multi‑select (when clicking items in the preview)

Copy / paste styles

Alt + C — Copy current target style to clipboard
Alt + V — Paste clipboard style to current target
Alt + Shift + V — Paste clipboard style to the whole group (matching targets)
\ — Clone style from the other state (Base ↔ Pressed) for the current target

Mirror / paired targets

Alt + M — Mirror position to L/R paired target
Alt + Shift + M — Mirror position + style to L/R paired target

Undo / redo

Ctrl + Z — Undo
Ctrl + Y or Ctrl + Shift + Z — Redo

Note: If a shortcut listed here does not work in your current editor build, it may be disabled for that mode or removed in your version. When in doubt, use the editor UI controls as the source of truth.

URL parameters (runtime overrides)

You can override certain overlay settings at runtime by appending query parameters to your overlay URL. Some of these are legacy‑compatible notes and may not be enabled in the current rebuild yet.

# Controller transform ?cx=960&cy=540 # Controller position (pixels) ?cs=80 # Controller scale (%) # Trigger meters &tm=0 # Disable both trigger meters (0/1) &tml=0 # Disable left trigger meter (0/1) &tmr=0 # Disable right trigger meter (0/1) &tms=bar # Trigger meter style for both &tmsl=bar # Style for left only &tmsr=bar # Style for right only &tmscale=110 # Scale for both (%) &tmlscale=110 # Scale for left only (%) &tmrscale=110 # Scale for right only (%) &tmlx=40&tmly=80 # Left trigger meter position (pixels) &tmrx=40&tmry=80 # Right trigger meter position (pixels) # BPS (buttons per second) &bps=1 # Enable BPS widget (0/1) &bpsx=60&bpsy=60 # Position (pixels) # Input history &ih=1 # Enable input history (0/1) &ihx=60&ihy=120 # Position (pixels) # Mapping / profiles &profile_dz=10 # Stick deadzone (0–50%) &profile_tdz=3 # Trigger deadzone (0–30%) &profile_curve=linear # linear|aggressive|relaxed &profile_invert_lx=1 # Invert left X (0/1) &profile_invert_ly=1 # Invert left Y (0/1) &profile_invert_rx=1 # Invert right X (0/1) &profile_invert_ry=1 # Invert right Y (0/1) &profile_remap=btn-a:btn-b,bumper-left:trigger-left

Parameters are applied on page load. You can combine multiple overrides in one URL by chaining with &.

Troubleshooting

Overlay loads, but inputs do not show

Confirm the controller is connected to the same machine running the overlay (Browser Source machine).
Try opening the overlay URL in a normal browser tab and click once in the page to “activate” input.
If using Bluetooth, confirm the controller is paired and visible to the OS (not only to Steam).

OBS Browser Source shows a blank page

Check that the URL is correct and accessible when logged out (or that your overlay is allowed to be viewed).
Disable “local file” settings and use an HTTPS URL where possible.
Try toggling “Refresh cache of current page”.

It stutters or drops frames

Reduce heavy effects (glow intensity, stacked images, large video backgrounds).
Lower overlay resolution and scale in OBS.
Enable “Shutdown source when not visible”.

Private overlay sharing issues

Ensure recipients are Pro+ (if required by access-list rules).
Ensure the recipient’s email is verified if your rules require verification for access.
Re-add the user to the access list after they verify if they were invited before verifying.

FAQ

Do I need to rebuild my overlay for different resolutions?

Not usually. Build at a clean base resolution (commonly 1920×1080) and scale/crop in OBS. If you use very small scenes or unusual aspect ratios, you may want a dedicated overlay for that layout.

Can I run the overlay on a different PC than OBS?

Yes, but only as a video feed (NDI / capture / teleport). Controller input must be detected where the overlay runs.

Why can’t Free users save?

Free tier is designed for trying templates and testing the sandbox. Saving and private overlay ownership are tied to paid tiers and slot currency.

Do you document the API?

Not publicly at this time. Internal documentation will be added later under the admin panel when the surface area stabilizes.