Star History

[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.

It now supports three session modes:

Freeform: the original infinite ASCII canvas for exploratory drawing.
Animation: a fixed-size frame timeline for ASCII motion work.
Structured: an in-progress layout mode for semantic scene construction.

1. High-Performance Rendering

Multi-layer Architecture: Utilizes three distinct layers (Background, Scratch, and UI) to maintain 60FPS.
Mode-aware Viewports: Freeform uses an infinite viewport, while Animation uses a fixed camera and bounded canvas.

2. Intelligent Layout Engine

Setback Inheritance: Smart newline logic automatically detects and maintains indentation.
Grid-aware Unicode: Native support for CJK characters and Emojis as wide cells, with Nerd Font / PUA icons placed as single-grid symbols.
Modular Indentation: Professional Tab system shifting cursor by 2 grid units.
Character Library: Browse Unicode, Nerd Font, Emoji, and Box Drawing characters from a dense right sidebar with character names/tooltips.

3. Animation Workflow

Fixed Canvas Presets: Start animation sessions with common sizes like 80x25, 64x64, and 128x128, or enter custom dimensions.
Frame Sidebar: Add, duplicate, delete, reorder, and rename frames from a dedicated left sidebar with compact previews.
Onion Skin Playback: Toggle ghosted neighboring frames for frame-by-frame ASCII animation.
Export Ready: Export animations as lightweight JSON, GIF, asciinema .cast, or ANSI text for the current frame.

4. Distributed Collaboration

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

5. Precision Editing & Clipboard

Anchor Zoning: Shift + Click for rapid rectangular selection.
Mass Fill: Instantly fill active selections with any character.
Context Hub: Professional menu for Copy, Copy as ANSI, Cut, Paste, and Delete operations.
ANSI Clipboard: Copy/export SGR foreground, background, and text attributes, and paste standard ESC ANSI or ANSI-like text such as [38;2;190;24;93m....
Terminal Style Parsing: Paste supports 8-color, bright 16-color, 256-color, and truecolor SGR forms, plus text attributes like bold, dim, italic, underline, and strikethrough. Reset (0m) clears foreground, background, and attributes.

Showcase

Tech Stack

Frontend: React 18, TypeScript
State Management: Zustand (Slice Pattern)
Synchronization: Yjs / Y-IndexedDB
Gestures: @use-gesture/react
Animation Export: JSON exchange format, in-browser GIF generation, and simple asciinema .cast frame streams
Terminal Text: SGR foreground/background, text attributes, and ANSI/ANSI-like import/export
UI Components: Tailwind CSS, Shadcn UI, Radix UI

🚀 Getting Started

Installation

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

Development

bash
npm run dev

Build

bash
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, Copy as ANSI, Cut, Paste, and Delete

Paste accepts plain text, app-native rich clipboard data, and ANSI/ANSI-like styled terminal text. Animation sessions also expose timeline controls for frame stepping, playback, loop, ghost toggle, and JSON/GIF/asciinema .cast export from the animation bar/sidebar UI.