Link Cards

Bookmark a web page on the canvas: paste a URL and the card fills in with the page's title, favicon, address and preview image.

A link card is a bookmark you can see. Paste a URL into it and the card turns into a rich preview of that page: its favicon, its title, its address, and, when the page provides one, its preview image. It is a clean way to put a reference doc, ticket, or related page on the canvas so the link is part of the picture rather than buried in a hover card.

Release notes, v2.4https://example.com/notes
A filled link card: the preview image on top, then the favicon, the page's title and its address, with an arrow to follow it.

Adding and Editing a Card

A link card behaves like any other boxed element, so it moves, resizes, recolours, locks, and layers in the usual way.

Open the palette's Collaborate category and pick Link Card, under Navigate. Click the canvas to drop it at its default size, or drag to draw it the size you want.

An empty card prompts you to add a link. Double-click it to open the link dialog.

Paste a URL and press Save link. The card fetches the preview and fills itself in. To change the URL later, double-click the card again.

Right-click a card and its Link category offers Set Link on an empty card, then Change Link and Remove Link once it has one. A card can also point at a tab, an element or another of your documents, picked in the same dialog; it then reads Tab, Element or Document, with the tab's or document's name beneath.

Clicking the row along the bottom of a filled card (its favicon, title and address) follows its link; the rest of the card drags and selects like any element.

How the Preview Is Fetched

When you set a URL, livediagram fetches the page's preview once and caches it onto the card. Because the preview is stored with the card, collaborators and anyone who reloads the document see the same card without it being fetched again.

  • The card shows the title, favicon and preview image when the page exposes them, above the full address.
  • The preview image and favicon are referenced straight from the source page, so if a page later removes them the card falls back gracefully.
  • A card keeps its own neutral look whatever the tab's theme, and you can still recolour it.
  • While there is no preview yet, or if a fetch does not return one, the card shows the host as its title and the full URL beneath, under a plain globe banner, so it is always useful.

Safe by Design

Fetching a preview happens on livediagram's server, never from your browser reaching across the web on its own, and that path is built to be safe to run on a public, self-hostable codebase:

  • Only http and https addresses are fetched, and a slow page is given up on after 8 seconds rather than holding the card.
  • Addresses pointing at private networks, local machines, or internal metadata are refused, so a card can never be used to probe somewhere it should not reach.

The result is that a link card is just a friendly preview of a public page, with none of the surprises that fetching arbitrary URLs could otherwise bring.

If a card shows only the bare URL, the page may not publish preview metadata. The link still works, the card just has less to show.

Was this article helpful?