[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import PixelArtEditor from "@/components/pixel-art-editor" export default function Page() { return (

) } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/pixel-art-editor.tsx" isEdit="true" isQuickEdit="true" "use client" import type React from "react" import { useState, useEffect, useRef, useCallback } from "react" import { Plus, Trash2, Eye, EyeOff, Download, Undo2, Redo2, Eraser, PaintBucket, Pencil, Grid3X3, Pipette, ZoomIn, ZoomOut, } from "lucide-react" import { cn } from "@/lib/utils" // --- Types --- type PixelGrid = string[][] // hex codes or empty string interface Layer { id: string name: string visible: boolean opacity: number // 0-100 grid: PixelGrid } type Tool = "pencil" | "eraser" | "bucket" | "picker" interface HistoryState { layers: Layer[] gridSize: number } // --- Constants --- const DEFAULT_GRID_SIZE = 16 const MAX_HISTORY = 20 const COLORS = [ "#000000", "#1a1c2c", "#5d275d", "#b13e53", "#ef7d57", "#ffcd75", "#a7f070", "#38b764", "#257179", "#29366f", "#3b5dc9", "#41a6f6", "#73eff7", "#f4f4f4", "#94b0c2", "#566c86", "#333c57", "#ffffff", "#ff0044", "#00ff999", "#ffff00", "#00ccff", "#9900ff", "#ff6600", ] // --- Helper Functions --- const createEmptyGrid = (size: number): PixelGrid => { return Array(size) .fill(null) .map(() => Array(size).fill("")) } const generateId = () => Math.random().toString(36).substr(2, 9) const getColorCounts = (layers: Layer[]): Map => { const counts = new Map() layers.forEach((layer) => { layer.grid.forEach((row) => { row.forEach((color) => { if (color) { counts.set(color, (counts.get(color) || 0) + 1) } }) }) }) return counts } // --- Main Component --- export default function PixelArtEditor() { // State const [gridSize, setGridSize] = useState(DEFAULT_GRID_SIZE) const [layers, setLayers] = useState([ { id: "layer-1", name: "Layer 1", visible: true, opacity: 100, grid: createEmptyGrid(DEFAULT_GRID_SIZE) }, ]) const [activeLayerId, setActiveLayerId] = useState("layer-1") const [selectedColor, setSelectedColor] = useState("#ff6b00") const [tool, setTool] = useState("pencil") const [isDrawing, setIsDrawing] = useState(false) const [history, setHistory] = useState([]) const [historyIndex, setHistoryIndex] = useState(-1) const [showGridLines, setShowGridLines] = useState(true) const [zoom, setZoom] = useState(1) const colorCounts = getColorCounts(layers) const sortedColors = Array.from(colorCounts.entries()).sort((a, b) => b[1] - a[1]) const canvasRef = useRef(null) const containerRef = useRef(null) // Initialize history useEffect(() => { if (history.length === 0) { const initialState = { layers: JSON.parse(JSON.stringify(layers)), gridSize } setHistory([initialState]) setHistoryIndex(0) } }, []) // --- History Management --- const addToHistory = useCallback( (newLayers: Layer[], newGridSize: number) => { const newState = { layers: JSON.parse(JSON.stringify(newLayers)), gridSize: newGridSize } const newHistory = history.slice(0, historyIndex + 1) newHistory.push(newState) if (newHistory.length > MAX_HISTORY) newHistory.shift() setHistory(newHistory) setHistoryIndex(newHistory.length - 1) }, [history, historyIndex], ) const undo = () => { if (historyIndex > 0) { const prevState = history[historyIndex - 1] setLayers(JSON.parse(JSON.stringify(prevState.layers))) setGridSize(prevState.gridSize) setHistoryIndex(historyIndex - 1) } } const redo = () => { if (historyIndex < history.length - 1) { const nextState = history[historyIndex + 1] setLayers(JSON.parse(JSON.stringify(nextState.layers))) setGridSize(nextState.gridSize) setHistoryIndex(historyIndex + 1) } } // --- Drawing Logic --- const getCoordinates = (e: React.MouseEvent | React.TouchEvent) => { if (!canvasRef.current) return null const rect = canvasRef.current.getBoundingClientRect() const clientX = "touches" in e ? e.touches[0].clientX : (e as React.MouseEvent).clientX const clientY = "touches" in e ? e.touches[0].clientY : (e as React.MouseEvent).clientY const x = Math.floor(((clientX - rect.left) / rect.width) * gridSize) const y = Math.floor(((clientY - rect.top) / rect.height) * gridSize) return { x, y } } const floodFill = (layerIndex: number, x: number, y: number, targetColor: string, replacementColor: string) => { if (targetColor === replacementColor) return if (x < 0 || x >= gridSize || y < 0 || y >= gridSize) return const newLayers = [...layers] const grid = newLayers[layerIndex].grid const currentColor = grid[y][x] if (currentColor !== targetColor) return grid[y][x] = replacementColor floodFill(layerIndex, x + 1, y, targetColor, replacementColor) floodFill(layerIndex, x - 1, y, targetColor, replacementColor) floodFill(layerIndex, x, y + 1, targetColor, replacementColor) floodFill(layerIndex, x, y - 1, targetColor, replacementColor) setLayers(newLayers) } const handleDraw = (x: number, y: number, isClick = false) => { if (x < 0 || x >= gridSize || y < 0 || y >= gridSize) return const layerIndex = layers.findIndex((l) => l.id === activeLayerId) if (layerIndex === -1 || !layers[layerIndex].visible) return const currentLayer = layers[layerIndex] // For picker tool if (tool === "picker") { // Find the top-most visible color at this pixel for (let i = layers.length - 1; i >= 0; i--) { if (layers[i].visible && layers[i].grid[y][x]) { setSelectedColor(layers[i].grid[y][x]) setTool("pencil") return } } return } // Clone layers for mutation const newLayers = [...layers] newLayers[layerIndex] = { ...currentLayer, grid: currentLayer.grid.map((row) => [...row]) } if (tool === "bucket" && isClick) { const targetColor = newLayers[layerIndex].grid[y][x] floodFill(layerIndex, x, y, targetColor, selectedColor) addToHistory(newLayers, gridSize) } else if (tool === "pencil" || tool === "eraser") { const color = tool === "eraser" ? "" : selectedColor if (newLayers[layerIndex].grid[y][x] !== color) { newLayers[layerIndex].grid[y][x] = color setLayers(newLayers) } } } const handlePointerDown = (e: React.MouseEvent | React.TouchEvent) => { setIsDrawing(true) const coords = getCoordinates(e) if (coords) handleDraw(coords.x, coords.y, true) } const handlePointerMove = (e: React.MouseEvent | React.TouchEvent) => { if (!isDrawing) return const coords = getCoordinates(e) if (coords) handleDraw(coords.x, coords.y) } const handlePointerUp = () => { if (isDrawing) { setIsDrawing(false) addToHistory(layers, gridSize) } } // --- Layer Management --- const addLayer = () => { const newLayer: Layer = { id: generateId(), name: `Layer ${layers.length + 1}`, visible: true, opacity: 100, grid: createEmptyGrid(gridSize), } const newLayers = [...layers, newLayer] setLayers(newLayers) setActiveLayerId(newLayer.id) addToHistory(newLayers, gridSize) } const deleteLayer = (id: string) => { if (layers.length <= 1) return const newLayers = layers.filter((l) => l.id !== id) setLayers(newLayers) if (activeLayerId === id) { setActiveLayerId(newLayers[newLayers.length - 1].id) } addToHistory(newLayers, gridSize) } const toggleLayerVisibility = (id: string) => { const newLayers = layers.map((l) => (l.id === id ? { ...l, visible: !l.visible } : l)) setLayers(newLayers) addToHistory(newLayers, gridSize) } const updateLayerOpacity = (id: string, opacity: number) => { const newLayers = layers.map((l) => (l.id === id ? { ...l, opacity } : l)) setLayers(newLayers) // Don't add to history on every slide event, maybe debounce or onMouseUp } const changeGridSize = (size: number) => { if (size === gridSize) return // Create new grids with new size, preserving data if possible (top-left aligned) const newLayers = layers.map((layer) => { const newGrid = createEmptyGrid(size) for (let y = 0; y < Math.min(size, gridSize); y++) { for (let x = 0; x < Math.min(size, gridSize); x++) { newGrid[y][x] = layer.grid[y][x] } } return { ...layer, grid: newGrid } }) setGridSize(size) setLayers(newLayers) addToHistory(newLayers, size) } // --- Export --- const handleExport = () => { const canvas = document.createElement("canvas") const scale = 20 // Scale up for export canvas.width = gridSize * scale canvas.height = gridSize * scale const ctx = canvas.getContext("2d") if (!ctx) return // Draw checkerboard background ctx.fillStyle = "#ffffff" ctx.fillRect(0, 0, canvas.width, canvas.height) // Draw layers layers.forEach((layer) => { if (!layer.visible) return ctx.globalAlpha = layer.opacity / 100 layer.grid.forEach((row, y) => { row.forEach((color, x) => { if (color) { ctx.fillStyle = color ctx.fillRect(x * scale, y * scale, scale, scale) } }) }) }) const link = document.createElement("a") link.download = "pixel-art.png" link.href = canvas.toDataURL("image/png") link.click() } const handleZoomIn = () => setZoom((prev) => Math.min(prev + 0.25, 3)) const handleZoomOut = () => setZoom((prev) => Math.max(prev - 0.25, 0.5)) // --- Rendering --- // Render the canvas useEffect(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return // Clear canvas ctx.clearRect(0, 0, canvas.width, canvas.height) // Draw checkerboard background for transparency const cellSize = canvas.width / gridSize // Draw layers layers.forEach((layer) => { if (!layer.visible) return ctx.globalAlpha = layer.opacity / 100 layer.grid.forEach((row, y) => { row.forEach((color, x) => { if (color) { ctx.fillStyle = color ctx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize) } }) }) }) // Draw grid lines if (showGridLines) { ctx.globalAlpha = 0.1 ctx.strokeStyle = "#ffffff" ctx.lineWidth = 1 ctx.beginPath() for (let i = 0; i <= gridSize; i++) { ctx.moveTo(i * cellSize, 0) ctx.lineTo(i * cellSize, canvas.height) ctx.moveTo(0, i * cellSize) ctx.lineTo(canvas.width, i * cellSize) } ctx.stroke() } // Reset alpha ctx.globalAlpha = 1.0 }, [layers, gridSize, showGridLines]) return (

{/* Left Sidebar - Layers & Info */}

{/* Header */}

Pixel Studio

Untitled Project

{/* Layers Panel */}

Layers

{layers .slice() .reverse() .map((layer) => (

setActiveLayerId(layer.id)} className={cn( "group flex flex-col gap-2 p-3 rounded-xl cursor-pointer transition-all border border-transparent", activeLayerId === layer.id ? "bg-[#2a2d36] border-white/5 shadow-lg" : "hover:bg-white/5", )} >

{layer.name}

{layers.length > 1 && ( )}

{/* Opacity Slider */} {activeLayerId === layer.id && (

Opac updateLayerOpacity(layer.id, Number.parseInt(e.target.value))} className="flex-1 h-1 bg-zinc-700 rounded-full appearance-none [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-orange-500" /> {layer.opacity}%

)}

))}

{/* Color Stats Panel */}

Color Stats {sortedColors.length} colors

{sortedColors.length === 0 ? (

No colors used yet

) : (

{sortedColors.map(([color, count]) => (

setSelectedColor(color)} className="flex items-center gap-3 p-2 rounded-lg hover:bg-white/5 cursor-pointer transition-colors group" >

{color.toUpperCase()} {count}

))}

)}

{/* Main Canvas Area */}

{/* Top Bar */}

{Math.round(zoom * 100)}%

Grid

{/* Canvas Container */}

{/* Checkerboard Background for transparency */}

{/* Floating Toolbar */}

{[ { id: "pencil", icon: Pencil, label: "Pencil" }, { id: "eraser", icon: Eraser, label: "Eraser" }, { id: "bucket", icon: PaintBucket, label: "Fill" }, { id: "picker", icon: Pipette, label: "Picker" }, ].map((t) => ( ))}

{/* Color Picker */}

setSelectedColor(e.target.value)} className="w-8 h-8 rounded-full overflow-hidden cursor-pointer border-2 border-white/20 p-0 bg-transparent" />

{sortedColors.slice(0, 8).map(([color]) => (

{/* Right Sidebar - Properties */}

Properties

Adjust tool settings

{/* Color Picker */}

Color

{sortedColors.map(([color]) => (

{/* Tool Info */}

Active Tool

{tool === "pencil" && } {tool === "eraser" && } {tool === "bucket" && } {tool === "picker" && }

{tool}

{tool === "pencil" && "Click and drag to draw pixels"} {tool === "eraser" && "Click and drag to remove pixels"} {tool === "bucket" && "Fill connected area with color"} {tool === "picker" && "Pick color from canvas"}

{/* Canvas Info */}

Canvas Info

Dimensions {gridSize} x {gridSize} px

Layers {layers.length}

Total Pixels {gridSize * gridSize}

) }

About

Tags

Share

About

Tags

Share

More from juandadev

More Templates Like This

About

Tags

Share

About

Tags

Share

More from juandadev

More Templates Like This