AFFiNE 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

Infinite Canvas Store

Zustand store for managing infinite canvas state.

canvas-store
1export const useCanvasStore = create((set) => ({
2  scale: 1,
3  offset: { x: 0, y: 0 },
4  blocks: [],
5  
6  updateBlockPosition: (id, x, y) => set((state) => ({
7    blocks: state.blocks.map(b => 
8      b.id === id ? { ...b, x, y } : b
9    )
10  })),
11

12  zoomIn: () => set(state => ({ scale: state.scale * 1.1 })),
13  zoomOut: () => set(state => ({ scale: state.scale * 0.9 }))
14}));
PRO KITby IdeKit

AFFiNE Clone Box

A hybrid workspace solution combining a block editor with an infinite whiteboarding canvas. Built with Next.js 15 and Zustand, featuring drag-and-drop organization and spatial navigation.

Tech Stack
Next.js 15ZustandTailwind v4TypeScriptLucide
$99
One-time payment
Availability
50 / 50 left

Secured by Stripe