@nerox_dev/remark-entity-chips

Transform entity mentions into rich, visual chips in Markdown. Works with Astro, Next.js, Docusaurus, and any remark-based pipeline.

Live Demo (Astro) | Live Demo (Next.js)

Examples

Entity Mentions (@[entity])

Entities in the built-in database are automatically resolved with their name, favicon, and URL.

Entity Mentions with Custom URL (@[entity](url))

Use the entity's favicon and display name but link to a custom URL.

Custom Chips with Domain Favicon (@[text](url))

If the text doesn't match an entity but the URL domain is in the database, the domain's favicon is used.

Auto-Detected Bare URLs (enabled by default)

Bare platform URLs in text are automatically transformed into chips.

Markdown Links (opt-in)

Standard markdown links [text](url) can optionally be transformed into chips. Disabled by default to avoid breaking existing content.

Installation

npm install @nerox_dev/remark-entity-chips

Quick Start

Astro

// astro.config.mjs
import { defineConfig } from "astro/config";
import entityChips from "@nerox_dev/remark-entity-chips";

export default defineConfig({
  markdown: {
    remarkPlugins: [entityChips],
  },
});

Configuration

import entityChips from "@nerox_dev/remark-entity-chips";

[
  entityChips,
  {
    // Transform bare URLs into chips (default: true)
    autoDetectUrls: true,

    // Transform markdown links [text](url) into chips (default: false)
    transformMarkdownLinks: false,

    // Custom CSS class names
    classNames: {
      chip: "entity-chip", // default
      favicon: "entity-favicon", // default
      name: "entity-name", // default
    },
  },
];

| Option | Type | Default | Description | | ------------------------ | --------- | ------------------ | ---------------------------------------- | | autoDetectUrls | boolean | true | Transform bare platform URLs into chips | | transformMarkdownLinks | boolean | false | Transform [text](url) links into chips | | classNames.chip | string | "entity-chip" | CSS class for the chip wrapper | | classNames.favicon | string | "entity-favicon" | CSS class for the favicon image | | classNames.name | string | "entity-name" | CSS class for the label text |

Supported Entities

The built-in database includes 200+ entities across categories:

| Category | Examples | | -------------- | --------------------------------------------------------- | | Frameworks | React, Vue, Angular, Svelte, Astro, Next.js, Tailwind CSS | | Dev Tools | GitHub, GitLab, VS Code, Docker, Vite, ESLint | | AI | OpenAI, Anthropic, Claude, Hugging Face | | Fintech | Stripe, PayPal, Wise, Square | | Social | YouTube, X, LinkedIn, Discord, Reddit | | Cloud | AWS, Google Cloud, Azure, Vercel, Netlify, Cloudflare | | Databases | PostgreSQL, MongoDB, Redis, Supabase, Firebase, Prisma | | SaaS | Notion, Slack, Figma, Linear, Jira |

Styling

Add CSS to style the chips:

.entity-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 16px;
  background: #f0f0f0;
  text-decoration: none;
  color: #333;
  font-size: 0.9em;
  border: 1px solid #ddd;
}

.entity-chip:hover {
  background: #e0e0e0;
}

.entity-favicon {
  border-radius: 2px;
}

Disclaimer

This project is not affiliated with, endorsed by, or sponsored by any of the companies or projects whose names or trademarks appear in the built-in entity database. All trademarks, logos, and brand names are the property of their respective owners and are used here solely for identification purposes.

Favicons are fetched at runtime via Google's public favicon service and are not bundled or redistributed with this package.

License

MIT