Overlay Preview Tool

Updated: Mar 25, 2026

Copy for LLM

The Overlay Preview Tool lets you build, test, and iterate on overlay views directly in the browser without deploying a game bundle. Write XML and CSS, configure mock data, and see the rendered result in real time. When you are satisfied with your overlay, the tool generates the integration code you need to add it to your game.

This is the fastest way to develop overlay views. Use it to prototype layouts, debug rendering issues, and explore the available components before integrating overlays into your game code.

Using the Tool

The tool is organized into editor panels on the left and a preview area on the right. Each panel controls a different aspect of the overlay:

XML Editor

Write your overlay XML using the supported elements: View, Text, Image, Button, For, If, ElseIf, Else, Condition, and ConditionGroup. See Overlay View Components for the full reference.

CSS Editor

Define styles using CSS class names. Reference these classes in your XML elements via the className attribute. For example, if you define .avatar { border-radius: 50%; } in the CSS editor, use className="avatar" on an Image element.

Dev Params

Provide a JSON object representing the initialData you would pass to createOverlayViewAsync() in your game code. Access values in your XML using `` template expressions.

For example, if your Dev Params contain:

{
  "score": 1500,
  "level": "Gold"
}

You can reference them in XML as and.

FBInstant Mock

Edit mock data for built-in template keys like ,, and ``. This simulates the data that Meta would resolve at runtime, so you can preview what your overlay will look like with real player information.

Assets

Upload images and fonts that your XML and CSS reference. For example, if your CSS uses a custom font or your XML references a local image via src, upload those assets here.

Preview Controls

Create — Renders the overlay with your current XML, CSS, and data. This simulates calling createOverlayViewAsync().

Update — Re-renders the overlay with modified parameters, simulating a call to updateAsync() on an existing overlay. Use this to test how your overlay responds to data changes.

Dismiss — Clears the preview, simulating overlay removal.

Built-In Templates

Click Templates in the header to browse pre-built examples that demonstrate common overlay patterns:

Template	What It Demonstrates
Profile Card	Current player’s photo, name, and a score display.
Friend List with Invite	Connected players list with “Play Now” action buttons.
Custom Leaderboard	Rendering arbitrary players by ID with scores, sorted by rank.
Game Over Screen	Score display with conditional high-score messaging and a share button.
Stats with Conditionals	`If` / `ElseIf` / `Else` blocks showing different messages based on player stats.
Challenge Tracker	`ConditionGroup` with `AND`/`OR` operators and the `IN` operator.
Player Stored Data	Displaying data stored via `FBInstant.player.setDataAsync()`.

Each template includes working XML, CSS, and mock data. Use them as starting points — modify the template, click Create, and see your changes immediately.

NEZP Overlay View Preview Tool

Build and preview overlay XML with dummy data

Status: Not Created

CREATE → SHOW → [UPDATE → SHOW] → DISMISS

Next Steps

Overlay View Components — Full reference for all XML elements, attributes, and control structures.

Example Game Use Cases — End-to-end examples with JavaScript integration code.

API Reference — Complete reference for the FBInstant.overlayViews module.