Heading Element

Text

About

A rich-text editor heading element supporting levels H1 through H6 for the Plate editor.

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

Code

How Heading Element 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 {
  H1Element,
  H2Element,
  H3Element,
  H4Element,
  H5Element,
  H6Element,
} from "@/components/ui/heading-node";
import {
  createPlatePlugin,
  Plate,
  PlateContent,
  usePlateEditor,
} from "platejs/react";

const initialValue = [
  { children: [{ text: "Heading 1" }], type: "h1" },
  { children: [{ text: "Heading 2" }], type: "h2" },
  { children: [{ text: "Heading 3" }], type: "h3" },
  { children: [{ text: "Heading 4" }], type: "h4" },
  { children: [{ text: "Heading 5" }], type: "h5" },
  { children: [{ text: "Heading 6" }], type: "h6" },
  {
    children: [
      { text: "Six levels of headings, each with its own size and weight." },
    ],
    type: "p",
  },
];

export default function HeadingNodeDemo() {
  const editor = usePlateEditor({
    plugins: [
      createPlatePlugin({
        key: "h1",
        node: { isElement: true, type: "h1", component: H1Element },
      }),
      createPlatePlugin({
        key: "h2",
        node: { isElement: true, type: "h2", component: H2Element },
      }),
      createPlatePlugin({
        key: "h3",
        node: { isElement: true, type: "h3", component: H3Element },
      }),
      createPlatePlugin({
        key: "h4",
        node: { isElement: true, type: "h4", component: H4Element },
      }),
      createPlatePlugin({
        key: "h5",
        node: { isElement: true, type: "h5", component: H5Element },
      }),
      createPlatePlugin({
        key: "h6",
        node: { isElement: true, type: "h6", component: H6Element },
      }),
    ],
    value: initialValue,
  });

  return (
    <div className="mx-auto w-full max-w-2xl rounded-lg border bg-background p-6 text-foreground shadow-sm">
      <Plate editor={editor}>
        <PlateContent
          className="min-h-[340px] rounded-md px-2 focus-visible:outline-none"
          placeholder="Type a heading..."
        />
      </Plate>
    </div>
  );
}