Notion Clone Box
Editor.tsx - IDEKIT
Explorer
›components
VibeEditor.tsx
Sidebar.tsx
›app
tsVibeEditor.tsx
1import React from "react";
2
3export function VibeEditor() {
4return (
5<div className="vibe-station">
6Hello World
7</div>
8);
9}
main*0 errorsLn 5, Col 24UTF-8TypeScript React

Included Snippets

Block Renderer

Recursive component to render nested block content.

block-render
1export function BlockRenderer({ block }) {
2  const Component = BLOCK_TYPES[block.type] || TextBlock;
3  
4  return (
5    <div className='group relative pl-4'>
6      <Component content={block.content} />
7      {block.children?.map(child => (
8        <BlockRenderer key={child.id} block={child} />
9      ))}
10    </div>
11  );
12}

Slash Command Menu

Context menu for inserting new blocks.

slash-menu
1const handleKeyDown = (e) => {
2  if (e.key === '/') {
3    setMenuPosition(getCaretCoordinates());
4    setShowSlashMenu(true);
5  }
6};
7

8// Filter commands based on input
9const filteredCommands = commands.filter(cmd => 
10  cmd.name.toLowerCase().includes(query)
11);
PRO KITby IdeKit

Notion Clone Box

A production-ready Notion clone template built with Next.js 15. Features a block-based editor, slash commands, nested pages, and real-time database sync via Supabase. Includes full source code.

Tech Stack
Next.js 14TailwinduuidLucide
$149
One-time payment
Availability
30 / 30 left

Secured by Stripe