🔰 Bit Space

A modern browser-based ASCII art studio built with Next.js, React, FIGlet, and a full-featured character canvas editor.

🟢 Overview

Bit Space is a creative ASCII art playground for drawing, editing, converting, and exporting character-based artwork directly in the browser. It opens with an animated ASCII-themed landing page and launches into a full paint workspace with a grid canvas, drawing tools, FIGlet text, image-to-ASCII conversion, history controls, character sets, export settings, and light/dark theme support.

The editor is entirely client-side. Canvas data, preferences, filters, export settings, brush choices, and custom characters are handled in React state and browser storage, making the project easy to run locally and deploy as a static-style Next.js app.

🟢 Demo

The project includes a demo video:

demo/video.mp4

🟢 Screenshots

Light Mode	Dark Mode

🟢 Features

• Animated ASCII art landing page with particle-style canvas background.
• Dedicated /paint workspace for ASCII drawing and editing.
• Grid-based character canvas with adjustable zoom.
• Canvas presets, including small, medium, large, wide, square, ultra-wide, portrait, banner, poster, mobile, and desktop.
• Extend canvas edges left, right, top, or bottom.
• Toggle grid visibility.
• Light and dark theme support with next-themes.
• Multiple drawing tools: select, pencil, eraser, fill, line, rectangle, circle, and text.
• Brush size control for drawing and erasing.
• Filled shape options for rectangles and circles.
• Smooth drawing option for pencil work.
• Symmetry drawing modes: vertical, horizontal, both, and radial.
• Character chooser with many built-in character sets.
• Custom character set editor.
• Selection tools with copy, paste, clear, and select-all support.
• Right-click context menu for selection and edit actions.
• Undo, redo, history panel, history clearing, and jump-to-history support.
• Find and replace tools for characters.
• Swap characters across the canvas.
• Replace characters inside the current selection.
• Add regular text to the canvas.
• Generate large ASCII text with FIGlet fonts.
• Large bundled FIGlet font collection in public/fonts/.
• Upload an image and convert it into ASCII art.
• Image conversion controls for output size, aspect ratio, character set, brightness, contrast, saturation, grayscale, invert, dithering, threshold, and color mode.
• Filter presets such as vintage, modern, dramatic, soft, noir, solarize, high contrast, dreamy, and cinematic.
• Export ASCII art as a .txt file.
• Export artwork as image formats, including PNG, JPEG, SVG, and WebP options from the UI.
• Export settings for size, quality, and transparent background.
• Persistent local preferences through localStorage.
• Keyboard shortcuts for common tools and actions.
• Toast notifications for completed actions.
• App metadata, manifest, favicon assets, Open Graph image route, sitemap, and custom error pages.

🟢 Tool Shortcuts

Shortcut	Tool or Action
B	Pencil
E	Eraser
F	Fill
L	Line
R	Rectangle
C	Circle
T	Text
S	Select
Space	Hand tool
Esc	Clear selection
Ctrl+Z	Undo
Ctrl+Shift+Z	Redo
Ctrl+Y	Redo
Ctrl+C	Copy selection
Ctrl+V	Paste selection
Ctrl+A	Select all
Ctrl+S	Export as text
Ctrl+H	Toggle history panel

🟢 Character Sets

Bit Space includes preset groups for ASCII, blocks, shapes, lines, math symbols, arrows, stars, hearts, music, chess, emoji, geometric symbols, box drawing, Greek, Japanese, general symbols, and custom characters.

🟢 Tech Stack

Area	Technology
Framework	Next.js 15 App Router
UI Library	React 19
Styling	Tailwind CSS 4
Theme Handling	next-themes
Icons	Lucide React
ASCII Text Rendering	figlet
Font Assets	Bundled .flf FIGlet fonts
State and Persistence	React hooks, localStorage
Export/Conversion	Browser Canvas APIs, Blob downloads

🟢 Project Structure

bit-space/
├── README.md
├── package.json
├── banner.png
├── demo/
│   └── video.mp4
├── public/
│   ├── favicon.ico
│   ├── site.webmanifest
│   ├── images/
│   │   └── button.png
│   └── fonts/
├── screenshots/
│   ├── dark/
│   └── light/
└── src/
    ├── app/
    │   ├── (main)/
    │   ├── paint/
    │   ├── layout.js
    │   ├── manifest.js
    │   ├── opengraph-image.js
    │   └── sitemap.js
    ├── components/
    │   ├── error/
    │   ├── home/
    │   └── paint/
    ├── hooks/
    │   └── useAsciiCanvas.js
    ├── styles/
    │   └── globals.css
    └── utils/
        ├── canvasUtils.js
        └── constants.js

🟢 Getting Started

Prerequisites

• Node.js 20 or newer
• npm

Installation

git clone <repository-url>
cd bit-space
npm install

Development

npm run dev

Open http://localhost:3000 in your browser.

Production Build

npm run build
npm run start

Linting

npm run lint

🟢 Available Scripts

Command	Description
npm run dev	Starts the Next.js development server with Turbopack.
npm run build	Creates a production build.
npm run start	Starts the production server.
npm run lint	Runs the configured Next.js lint command.

🟢 How To Use

1. Open the home page.
2. Click Launch to enter the paint workspace.
3. Choose a tool from the left toolbar.
4. Pick a brush character from the right sidebar.
5. Draw, fill, select, copy, paste, or add text on the canvas.
6. Use Open Image to convert an uploaded image into ASCII art.
7. Use Save as Text or Export to download the finished artwork.

🟢 Notes

• The app is client-side and does not upload artwork to a server.
• Preferences are stored in the browser under asciiArtPreferences.
• Exported text downloads as ascii-art.txt.
• Image export uses browser canvas rendering, so exact output depends on browser support for the selected format.
• Some README screenshots and demo assets are local repository files and should be committed with the project if publishing.

🟢 Deployment

This app can be deployed to Vercel or any platform that supports Next.js.

For Vercel:

1. Push the project to a Git repository.
2. Import the repository in Vercel.
3. Keep the default Next.js build settings.
4. Deploy.

🟢 License

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

🟢 Author

Ashish Kumar