Developing a CRUD Playground with Next.js, TipTap, and PrismJS

Building a CRUD playground in Next.js allows you to experiment with content creation and management interactively. In this guide, we'll integrate TipTap as a WYSIWYG editor, PrismJS for code snippets, FontAwesome for toolbar icons, and Tailwind Typography for styling.

Setting Up the Next.js Project

npx create-next-app@latest my-crud-playground
cd my-crud-playground

Install dependencies:

npm install @tiptap/react @tiptap/starter-kit @tiptap/extension-code-block @tiptap/extension-highlight @tiptap/extension-link prismjs @fortawesome/react-fontawesome @fortawesome/free-solid-svg-icons tailwindcss @tailwindcss/typography

Configuring Tailwind using typography plugins for the content styling

module.exports = {
	content: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
	theme: {
		extend: {},
		},
	plugins: [require("@tailwindcss/typography")],
};

Implementing TipTap as a WYSIWYG Editor

Create a component Editor.js:

import { useEditor, EditorContent } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import CodeBlock from "@tiptap/extension-code-block";
import Highlight from "@tiptap/extension-highlight";
import Link from "@tiptap/extension-link";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faBold, faItalic, faCode } from "@fortawesome/free-solid-svg-icons";
export default function Editor() {
 const editor = useEditor({
   extensions: [StarterKit, CodeBlock, Highlight, Link],
   content: "<p>Hello World!</p>",
 });
 return (
   <div className="prose mx-auto">
     <div className="toolbar flex gap-2 border-b p-2">
       <button onClick={() => editor.chain().focus().toggleBold().run()}>
         <FontAwesomeIcon icon={faBold} />
       </button>
       <button onClick={() => editor.chain().focus().toggleItalic().run()}>
         <FontAwesomeIcon icon={faItalic} />
       </button>
       <button onClick={() => editor.chain().focus().toggleCode().run()}>
         <FontAwesomeIcon icon={faCode} />
       </button>
     </div>
     <EditorContent editor={editor} />
   </div>
 );
}

Note: This is a simple usage of TipTap, as its a modular lib, you can modify it as you wish.

/my-crud-playground
│── /src
│   ├── /app
│   ├── page.js
│   ├── /components
│   │   ├── TipTapEditor.js
│   │   ├── PrismLoader.js
│   ├── globals.css
│── /public
│── /node_modules
│── .gitignore
│── package.json
│── tailwind.config.js
│── next.config.js
│── README.md

Using PrismJS for Code Highlighting

"use client";
import { useEffect } from "react";
import Prism from "prismjs";
import "prismjs/components/prism-javascript";
export default function PrismLoader() {
 useEffect(() => {
   Prism.highlightAll();
 }, []);
 return <div className="hidden"></div>;
}

Include PrismLoader in your post container:

import PrismLoader from "./PrismLoader";
export default function PostContainer({ content }) {
 return (
   <div>
     <PrismLoader />
     <div className="prose" dangerouslySetInnerHTML={{ __html: content }}></div>
   </div>
 );
}

Conclusion

This setup gives you a CRUD playground with Next.js, a modular WYSIWYG editor (TipTap with FontAwesome icons), syntax highlighting (PrismJS), and beautiful typography (Tailwind). You can extend it by adding a database (e.g., Firebase, Supabase) for persistent data storage. For my “learning” project, i use AppBackend as its database.

Github Repository

Happy coding!