@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

$3

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

Markdown	Result
@[stripe]	Stripe
@[github]	GitHub
@[openai]	OpenAI
@[react]	React
@[tailwindcss]	Tailwind CSS

$3

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

Markdown	Result
@stripe	Stripe

$3

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

Markdown	Result
@Nerox_dev	Nerox_dev
@John Doe	John Doe
@My Portfolio	My Portfolio

$3

Bare platform URLs in text are automatically transformed into chips.

Markdown	Result
https://youtube.com/watch?v=dQw4w9WgXcQ	youtube.com/watch?v=dQw4w9WgXcQ
https://github.com/facebook/react	github.com/facebook/react
https://x.com/nerox_dev	x.com/nerox_dev

$3

Standard markdown links text can optionally be transformed into chips. Disabled by default to avoid breaking existing content.

Markdown	Result (when enabled)
React docs	React docs
My site	My site

---

Installation

``bash
npm install @nerox_dev/remark-entity-chips
`

Quick Start

$3

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

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

Configuration

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


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

// Transform markdown links [text 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 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:

`css
.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