Link previews - arg.ai

When someone pastes a link to an HTML, TSX or JSX app (or to the .app launcher that opens it) into Slack, Arg posts a card with a picture of the app. Pasting a link is not the same as choosing to run the app, so by default Arg takes that picture without running your code. Your app’s source decides whether it may run.

Your app	Picture on the card
`.html` with the marker	The app running, scripts on
`.html` without the marker	The page’s markup and CSS, scripts off
`.tsx` / `.jsx` with marker	The app running, scripts on
`.tsx` / `.jsx` without it	No picture - a React app is blank without scripts

A .app launcher is pictured as the file it launches, so put the marker in that file. A launcher that opens a published Site gets no picture.

Opt in from HTML

Add the arg-live-preview metadata to the document’s <head>:

<!doctype html>
<html>
  <head>
    <meta name="arg-live-preview" />
    <title>Q3 revenue</title>
  </head>
  <body>
    <main id="chart"></main>
    <script type="module" src="./chart.js"></script>
  </body>
</html>

Opt in from TSX or JSX

Add the same element to the tree your component returns, or put a source directive at the top of the file:

/* @arg-live-preview */
import { createRoot } from "react-dom/client";
import App from "./App";

createRoot(document.getElementById("root")!).render(<App />);

How the picture is taken

Your app runs on the same isolated origin the Slack side panel uses, with no Arg session, so it cannot act as the person who shared the link.
arg.fs reads only the files the person who shared the link can open in Arg, and only read-only.
The picture is taken a few seconds after the page loads, at 1200 x 630.
The picture is cached until the app’s file changes.

Opt in once the app draws something worth showing on load. Leave the marker off a page whose first paint is a sign-in form, a spinner or an empty state, since that is what the card would show.