Skip to main content
Your render function returns JSX. The SDK turns it into a tree of catalog components and sends the tree to Reintersect, which validates it and stores it. Reintersect draws that stored tree with its own components everywhere the block appears. Your app never ships HTML, CSS or scripts to the browser, and there are no iframes.

​
What Reintersect owns

You choose components and describe what things are: structure, numbers, states, and whether an action is destructive. Reintersect owns how they look:
  • Spacing, typography, colour, dark mode and motion. Gaps come from how siblings relate, and the same tone always pairs its colour with a glyph and a spoken word.
  • Which button is primary. It’s the first button in the root Actions that isn’t destructive, worked out for each viewer from the buttons they can see.
  • Layout at every width. Blocks adapt to the space they’re given: a narrow table becomes cards, columns stack, and long labels wrap and clamp with a way to read the full text.
  • Number, date and duration formatting in each viewer’s locale.
  • Pending, error and empty states. A clicked button shows progress inside the button and nothing else changes until the result arrives. Success shows inline, without a toast.
  • Confirm dialogs for destructive actions, focus handling and keyboard behaviour.
  • The attribution line with your app’s icon and name.
See What Reintersect decides for the details.

​
Modes

Every block is drawn in one of three modes, chosen per viewer: Reasons a member can’t act include: no write access to the circle, the block is final, and the install is suspended or uninstalled. A click on a block whose development server is offline fails with an inline error.

​
Read-only views

Share pages and connected workspaces draw the full stored tree with actions removed. Reintersect never calls your app for someone viewing a share page, so anonymous visitors can’t trigger renders, actions or searches. What changes in read-only mode: Design blocks so the read-only version still makes sense. Put the facts in visible components and keep controls in Actions, so a share page still shows the state of the work after the buttons are hidden.

​
Connected workspaces

When a circle is connected to another Reintersect workspace, people there see a read-only copy of the block that updates when the original changes. Actions run only in the workspace that installed your app. When a circle is connected to a Slack channel, Slack shows the block’s summary and a link to it.

​
Agent text

Every block has a plain-text projection that the Reintersect agent reads. Reintersect computes it from the stored tree when the block is stored, so your app isn’t called when an agent reads a conversation. For a block in the conversation it’s working in, the agent sees something like:
The rules:
  • status is open, closed (final) or removed.
  • Text from your app is marked as data from your app, so it can’t pose as instructions to the agent.
  • Components that hold text contribute it; containers join their children. See How each component reads as text.
  • Data components describe their content: a Status gives Status: label, a Table or Chart gives a Markdown table, an Image gives its alt text.
  • Choice groups with host results include the current counts.
  • Parts restricted by audience are left out of the shared text. When the agent works for a member who passes the audience, that member’s projection includes them.
  • An agent reads at most 20 blocks live per turn. Beyond that, or when a block can’t be loaded, it sees the block’s title and summary.
To see the exact projection for your block, open the agent text view in the playground or call textOf(block.tree) in a test.

​
Forward compatibility

The catalog is versioned. If an older Reintersect client receives a component it doesn’t know, it leaves that component out and keeps the rest of the block. Reintersect’s server rejects components that aren’t in the catalog, so your app gets a clear error at render time instead.

​
Limits

Trees are validated against hard limits on size, depth and text before they are stored. See Limits.