Scale, crop, and tile images onto sheets of paper for easy printing.
Planar is a modern, lightweight, serverless browser utility built for designers, paper-crafters, and creators. It allows you to arrange, calibrate, crop, scale, and tile images across multiple physical print pages locally on your device.
🔗 Live Website: planar.masn.studio
- Real-World Physical Calibration: Calibrate exact real-world dimensions (mm, cm, in) by selecting two points on your image and entering their actual measurement.
- Intuitive Direct Cropping: Crop images by dragging borders and handles directly on the canvas preview, complete with real-time guides, an uncropped dimmed background, and a canvas-level cancellation history.
- Tiled Grid & Poster Layouts: Split and tile large images dynamically across multi-page print sheets. The grid automatically manages layout dimensions.
- Grid Expansion Tool: Add rows or columns to the canvas paper sheets with one-click
+buttons on the pasteboard, or remove sheets on hover. - Snapping Rotation Tool: Rotate images on the canvas, or use the sidebar rotation slider and buttons that snap strongly to 45° increments.
- Drag-and-Drop URL Imports: Drag images directly from local folders or other browser tabs over the canvas to import them instantly.
- Local Background Removal (RemBG): Remove backgrounds locally in your browser using high-performance, client-side ONNX Runtime WebAssembly models. All processing is 100% private.
- Smooth Gesture Canvas: Premium canvas workspace supporting trackpad pinching/zooming, physical mouse wheel zoom, middle-click panning, Space + drag, and mobile touch gestures.
- Modern Minimalism: Polished dark and light modes, zero bloat, and elegant micro-interactions.
Make sure you have Node.js installed on your system.
-
Clone this repository:
git clone https://github.com/Mason363/Planar.git cd Planar -
Install dependencies:
npm install
-
Run the development server:
npm run dev
-
Open your browser and navigate to: http://localhost:3000
- Framework: Next.js (React 19)
- Language: TypeScript
- Styling: Pure Vanilla CSS (custom variables, responsive layout system)
- WASM Engine:
@imgly/background-removalfor local background removal - Icons: Lucide React & inline SVGs
Planar is fully serverless. All image scaling, cropping, background removal, and layout calculation happen strictly in your browser's local memory. No data or image files are uploaded to any external server.