FrameworkJavaScript

Bookmark block: rich link previews

A static OpenGraph card for a pasted link, like Notion's "Create bookmark". It shows the page title, description, preview image, favicon, and domain.

The metadata comes from an unfurl endpoint that you supply. A backend is mandatory because of CORS. Blok ships only the contract.

Import

TypeScript

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

Configuration

Option	Type	Default	Description
`endpoint`	`string`	`""`	The unfurl endpoint you supply. Required. It is called as `endpoint?url=<encoded>` and should return `{ success: 1, link, meta: { title, description, image: { url }, favicon, domain } }`. Note that `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',
      },
    },
  },
});