SupSegment

The SupSegment object allows you to show different content to different users within the same patch output. It is created using sup.segment() and should be returned from the main() function.

Limitations

Client-side only: Segments control which content is displayed to users on the client, but all segment data is sent to every user. This is a UI presentation feature, not a security mechanism.

No access restriction: The segment does not prevent users from accessing the “hidden” content. A determined user could inspect the underlying data to see content meant for other segments. If you need to protect sensitive information:

• Do not include secrets, private data, or security tokens in any segment
• Implement actual access control in your patch logic by checking sup.user before making any changes or revealing data that is privileged.
• Use segments only for personalization and UI customization, not for security

Constructor

sup.segment(users, matchingElements?, notMatchingElements?)

// Show different content to a specific user
const segment = sup.segment(
  user,
  "Content only this user sees",
  "Content everyone else sees"
);

// Target multiple users
const segment = sup.segment(
  [user1, user2],
  ["Content for these users"],
  ["Content for others"]
);

Parameters:

• users: A single user (or user ID string), or an array of users/IDs to target
• matchingElements: Content shown to users in the list (optional)
• notMatchingElements: Content shown to users NOT in the list (optional)

Both element parameters accept single values or arrays of any valid return type (strings, numbers, SupImage, SupButton, etc.).

Properties

userIds

type: string[]

The list of user IDs that will see the matching content.

matching

type: unknown[]

The content shown to users in the userIds list.

notMatching

type: unknown[]

The content shown to users NOT in the userIds list.

Example Usage

function main() {
  const currentUser = sup.user;

  // Show a special message to the patch creator
  const creatorSegment = sup.segment(
    "creator-user-id",
    "Welcome back, creator!",
    "Hello, visitor!"
  );

  // Show admin controls only to specific users
  const adminControls = sup.segment(
    [admin1, admin2],
    [sup.button("Delete", onDelete), sup.button("Edit", onEdit)],
    [] // Others see nothing
  );

  return [creatorSegment, adminControls];
}