FrameworkJavaScript

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',
      },
    },
  },
});