Math Base Kit

Component 15

$Math Base Kit preview$ Preview

About

Plate editor plugin kit that adds static, read-only rendering of block and inline LaTeX equations for server-side and RSC content.

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

Code

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

Usage.tsx

import { BaseMathKit } from "@/components/ui/math-base-kit";

import * as React from "react";
import { createStaticEditor, PlateStatic } from "platejs/static";

const value = [
  {
    type: "p",
    children: [
      { text: "Mass–energy equivalence: " },
      {
        type: "inline_equation",
        texExpression: "E = mc^2",
        children: [{ text: "" }],
      },
      { text: "." },
    ],
  },
  {
    type: "equation",
    texExpression: "\\int_{a}^{b} f(x) \\, dx = F(b) - F(a)",
    children: [{ text: "" }],
  },
];

export default function MathBaseKitDemo() {
  const editor = createStaticEditor({
    plugins: BaseMathKit,
    value,
  });

  return (
    <div className="mx-auto max-w-2xl p-8">
      <PlateStatic editor={editor} />
    </div>
  );
}