Link Base Kit

Text

About

A Plate editor base plugin kit that enables static, server-side rendering of hyperlinks in rich text content.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Link Base Kit to your project and fits it to your theme.

Code

How Link Base Kit is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";

import BaseLinkKit from "@/components/ui/link-base-kit";

import { createSlateEditor } from "platejs";
import { PlateStatic } from "platejs/static";

const editor = createSlateEditor({
  plugins: BaseLinkKit,
  value: [
    {
      type: "p",
      children: [
        { text: "Read the " },
        {
          type: "a",
          url: "https://platejs.org",
          children: [{ text: "Plate documentation" }],
        },
        { text: " to learn more about building rich text editors." },
      ],
    },
  ],
});

export default function LinkBaseKitDemo() {
  return (
    <div className="p-6 text-foreground">
      <PlateStatic editor={editor} />
    </div>
  );
}