---
title: "Bookmark Block — Rich Link Previews"
description: "Turn a URL into a rich link card with a title, description, and favicon, degrading gracefully when metadata is missing."
source: https://blokeditor.com/docs/bookmark/
lastmod: 2026-09-07
---

Framework JavaScript

Block Tools Bookmark

# Bookmark block: rich link previews

A static OpenGraph card for a pasted link, like Notion’s "Create bookmark". Shows the page title, description, preview image, favicon, and domain. Metadata is fetched from a consumer-supplied unfurl endpoint (CORS makes a backend mandatory) — Blok ships only the contract.

### Import

TypeScript

```
import { Bookmark } from '@bloklabs/core/tools';
```

### Configuration

| Option | Type | Default | Description |
| --- | --- | --- | --- |
| `endpoint` | `string` | `""` | Consumer-supplied unfurl endpoint. Required. Called as `endpoint?url=<encoded>` and expected to return `{ success: 1, link, meta: { title, description, image: { url }, favicon, domain } }` (note `image` is an object, not a string). |
| `headers` | `Record<string, string>` | `undefined` | Optional headers (e.g. auth) sent with the metadata request. |

### Save Data

TypeScript

```
interface BookmarkData {
  url: string;          // The bookmarked URL
  title?: string;       // Page title
  description?: string; // Page description
  image?: string;       // Preview image URL
  favicon?: string;     // Favicon URL
  domain?: string;      // Page domain, e.g. "example.com"
}
```

JSON

```
{
  "id": "bkm001",
  "type": "bookmark",
  "data": {
    "url": "https://example.com/article",
    "title": "An Interesting Article",
    "description": "A short summary of the page.",
    "image": "https://example.com/preview.png",
    "favicon": "https://example.com/favicon.ico",
    "domain": "example.com"
  }
}
```

### Usage Example

TypeScript

```
import { Blok } from '@bloklabs/core';
import { Bookmark } from '@bloklabs/core/tools';

const editor = new Blok({
  holder: 'editor',
  tools: {
    bookmark: {
      class: Bookmark,
      config: {
        endpoint: 'https://your-backend.example.com/unfurl',
      },
    },
  },
});
```