[English] | 简体中文

ASCII Canvas

"The native visual interface for the LLM era: An infinite, multi-byte ASCII canvas designed to be the shared whiteboard for Humans and AI."

---

🛠 Core Features

ASCII Canvas is a high-performance, collaborative ASCII art creation engine. Unlike traditional whiteboards that output pixels (opaque to LLMs), this engine renders structured, semantic Unicode grids.

1. High-Performance Rendering

• Multi-layer Architecture: Utilizes three distinct layers (Background, Scratch, and UI) to maintain 60FPS.
• Infinite Viewport: Integrated screen-to-grid mapping for seamless panning and zooming.

2. Intelligent Layout Engine

• Setback Inheritance: Smart newline logic automatically detects and maintains indentation.
• Wide-Character Support: Native support for CJK characters, Nerd Fonts, and Emojis.
• Modular Indentation: Professional Tab system shifting cursor by 2 grid units.

3. Distributed Collaboration

• Yjs CRDT Integration: Real-time, low-latency collaborative editing.
• Robust Persistence: High-granularity undo/redo management with local storage sync.

4. Precision Editing Tools

• Anchor Zoning: Shift + Click for rapid rectangular selection.
• Mass Fill: Instantly fill active selections with any character.
• Context Hub: Professional menu for Copy, Cut, Paste, and Demolish operations.

---

Showcase

---

Tech Stack

• Frontend: React 18, TypeScript
• State Management: Zustand (Slice Pattern)
• Synchronization: Yjs / Y-IndexedDB
• Gestures: @use-gesture/react
• UI Components: Tailwind CSS, Shadcn UI, Radix UI

---

🚀 Getting Started

Installation

git clone https://github.com/Sayhi-bzb/ascii-canvas.git
cd ascii-canvas
npm install

Development

npm run dev

Build

npm run build

---

⌨️ Shortcuts Reference

Action	Shortcut	Description
Zoning	Drag	Traditional rectangular area selection
Anchor Zoning	Shift + Click	Create selection between anchor and current point
Mass Fill	Char Key	Fill active selection with the pressed character
Smart Newline	Enter	New line with inherited indentation
Pave Space	Tab	Shift cursor right by 2 grid units
Context Menu	Right Click	Access Copy, Cut, Paste, and Delete commands

---

🗺 Roadmap

• Multi-layer Canvas rendering engine.
• Real-time collaboration via Yjs.
• Intelligent Indentation & Tab system.
• Context Menu & Clipboard integration.
• NES (Next Edit Suggestion): Predictive character placement based on layout patterns.
• AI Chat Integration: Natural language interface for generating canvas components.
• ANSI Sequence & SVG Export support.

---

📄 License

This project is licensed under the MIT License. See the LICENSE file for details.