teXt0wnz

Your browser is the canvas

A retro text art editor rebooted for the modern web. Draw, edit, and collaborate on ANSI, ASCII, NFO, and XBIN files. Offline-first with auto-save/restore via local storage, plus an optional self-hosted server component enabling real-time, multi-user sessions. Crafted for keyboard-centric artists and creators using mouse or touch, on any device. Built with modern tools and automated testing for a seamless experience for text artists and developers.

Draw in your browser now!

Domain	Status
https://text.0w.nz	The main domain. Collab server may be available
https://xero.github.io/text0wnz	Github Pages version of the site. No collab server

,-'2_,-'2_,-'2_,-'2_,-'2_,-'2_,-'2_,-'2_,-'2_,-'2_,-'2_,-'2_

Table o' Contents

• Features
• File Types
• Browser Support
• Documentation
• Drawing & Editing Tools
• Key-bindings & Mouse/Touch Controls
• Tips & Workflow
• Build & Development
• Collaborative Server
• Docker Containerization
• Testing Suite
• Troubleshooting
• Project History
• License & Greetz

"7_/"7_/"7_/"7_/"7_/"7_/"7_/"7_/"7_/"7_/"7_/"7_/"7_/"7_/"

Features

• Web-based text art drawing, also works offline as a PWA
  • No install required!
  • But easily installed as a Progressive Web Application to your device
• Comprehensive keyboard shortcuts and mouse controls
  • Draw using the keyboard, mouse, or touch screen
• Classic and modern fonts
  • Over 100 fonts from IBM PCs, Amiga, C64, and many more vintage/custom
• Full suite of drawing tools:
  • Keyboard, freehand brushes, fills, shapes, selection, and mirror mode
• Advanced color management
  • 16-color ANSI, iCE colors, real-time preview, color conflict resolution
  • Custom XBIN color palette support and selection
• Supported file types:
  • Import: ANSI, BIN, XBIN, NFO, DIZ, UTF-8 TXT
  • Export: all of the above and PNG
• Multi-platform file opening
  • Desktop: OS "Open with" integration (Chrome/Edge)
  • Android: Share sheet integration
  • iPad+iOS: Enhanced file picker
  • Drag-and-drop support for everyone!
• Canvas operations:
  • Undo/redo, canvas resizing, font selection, and full SAUCE metadata support
• Editor options:
  • Canvas zoom, light/dark mode, and grid overlay
• Auto Save/Restore
  • Editor Setting saved to local storage for a consistent drawing sessions
  • Artwork and undo history saved to IndexedDB as you draw, auto-reloads when the app is opened
  • Optimized binary data storage packing for efficient canvas persistence
• Collaborative server mode
  • For real-time multi-user editing
  • Optional and opt-in by users. See: Privacy
• Build tools:
  • Bun, Vite, PostCSS
• Automated tests:
  • Playwright, Vitest, Testing Library
• Robust linting and formatting:
  • Eslint and Prettier

Supported File Types

Extension	Description	Import	Export	Sauce
.ans	ANSI art	░▒▒░	░▒▒░	░▒▒░
.utf8.ans	UTF-8 ANSI for modern terminals	░▒▒░	░▒▒░
.bin	DOS-era binary format	░▒▒░	░▒▒░	░▒▒░
.xb	XBIN format	░▒▒░	░▒▒░	░▒▒░
.nfo	Scene release format	░▒▒░	░▒▒░	░▒▒░
.diz	FILE_ID.DIZ archive metadata files	░▒▒░		░▒▒░
.txt	ASCII or other plain text	░▒▒░	░▒▒░
.png	Artwork rendered as an image		░▒▒░

Browser Support

Browser	Chrome	Firefox	Safari	Edge	Opera	iOS	iPadOS	Android
Last Updated 2025-11-20
Supported	95.0+	93.0+	15.0+	95.0+	81.0+	15.0+	15.0+	95.0+
Latest Dev	Canary	Nightly	Preview	Dev	-	-	-	-
Unsupported	< 94.x	< 92.x	< 14.x	< 94.x	< 80.x	< 14.x	< 14.x	< 94.x

Documentation

The docs folder contains raw markdown documentation files

The wiki renders these files into easier to read webpages

Application Guides

• Editor Manual - Visual guide to the Frontend application ↵
  • Key bindings - Hot keys reference guide ↵
• Collaboration Server - Backend real-time collaboration server ↵
• Architecture - System architecture and design overview ↵
• PWA Install - Guide to app installing and OS integration for multiple platforms ↵
• Privacy Policy - Privacy and data handling policy ↵
• Security Policy - Vulnerability reporting & threat modeling ↵

Development Guides

• Project Structure - File and module organization guide ↵
• Building and Developing - Development workflow and build process ↵
• Testing - Triple headed testing guide (unit, dom, & e2e) ↵
• CI/CD Pipeline - Continuous integration and deployment ↵
• WebServer Configuration - WebServer setup and configuration ↵
• Docker - Container deployment guide ↵
• Other Tools - Additional development and deployment tools ↵

Technical Specifications

• SAUCE Format - SAUCE metadata format specification ↵
• XBin Format - XBin file format specification ↵

Supplemental

• Fonts - Complete font reference and previews ↵
• Logos - ASCII art logos for the project ↵
• Examples - Sample artwork to view and edit
  • ANSI artwork by xeR0
  • XBin artwork by Hellbeard

Note

↵ links to the wiki version of a document

Drawing & Editing Tools

Tool Name	Description
Keyboard Mode	Type characters onto the canvas, using full keyboard navigation
Half Block Brush	Draw half-blocks with the mouse or touchscreen, pressure-sensitive
Shading Brush	Draw shading blocks with the mouse or touchscreen, 'reduce mode' with shift
Character Brush	Draw any ASCII/extended character in the font using a mouse, includes a picker
Fill Tool	Flood fill for color/text, smart attribute handling
Colorizer	Paint colors only, hold alt for background colors
Line Tool	Draw straight lines, with color conflict resolution
Square/Circle Tool	Draw rectangles/circles/ellipses, outline or filled, with a real-time preview
Selection Tool	Select, move, copy, flip, manipulate rectangular areas
Sample Tool	Color picker for quick selection from artwork

Key Bindings & Mouse/Touch Controls

Main Tool Shortcuts:

Key	Tool/Action
k	Keyboard Mode
f	Freestyle (half-block)
b	Character Brush
n	Fill Tool
a	Attribute Brush
g	Grid Toggle
i	iCE Colors Toggle
m	Mirror Mode

Color & Character:

Key	Action
d	Reset colors to default
q	Swap foreground/background
0–7	Select basic color
F1–F12	Insert block/character (see below)

File & Canvas:

Combo	Action
ctrl z / ctrl y	Undo / Redo
ctrl x/ctrl c/ctrl v/ctrl shift v	Cut/Copy/Paste/SystemPaste
ctrl delete	Delete selection

Navigation (Keyboard Mode):

Key	Action
arrow keys	Move cursor
home	Start of current row
end	End of current row
page up / page down	Move by viewport screen
cmd left / cmd right	Start/end of row

Advanced Editing (alt + key):

Combo	Action
alt up / alt down	Insert/Delete row
alt right / alt left	Insert/Delete column
alt e / alt shift e	Erase row/col
alt home / alt end	Erase to start/end
alt page up / alt page down	Erase to top/bottom

Selection Operations:

Key	Action
[ / ]	Flip selection
m	Move mode

Selection Navigation:

Key	Action
arrow keys	Move selection area by one cell
shift arrow keys	Expand/shrink selection
home / end	Expand selection to row start/end
page up / page down	Move selection by screen height
cmd left / cmd right	Expand selection to row start/end

Important

In Move Mode: arrow keys, page up, page down move the selected content in the same ways the default actions move the selection area.

Function Keys (F1–F12): Quick character insert from CP437 font (blocks, symbols, shapes, and more).

The Classic CP437 ANSI block shortcuts

Key	Character	Description
F1	░	Light shade block
F2	▒	Medium shade block
F3	▓	Dark shade block
F4	█	Full block
F5	▀	Upper half block
F6	▄	Lower half block
F7	▌	Left half block
F8	▐	Right half block
F9	■	Small solid square ‡
F10	○	Circle
F11	•	Bullet
F12	NULL	Blank/transparent

Cycling character sets:

Use the toolbar buttons or shortcuts ctrl [, ctrl ] to cycle predefined sets (blocks, box-drawing, symbols, accents, etc).

Mouse / Touch Controls

• Click/Touch: Draw
• Drag: Draw/Select/Shape
• Alt Click: Sample Color/Alternative Draw

Tip

See: docs/manual.md for more info.

Tips & Workflow

1. Start with Keyboard Mode for layout
2. Use Grid for alignment
3. Freestyle for shading/art
4. Character Brush for textures
5. Fill Tool for color blocks
6. Selection Tool for moving/copying
7. Save often (Ctrl+S)
8. F-keys for quick block chars
9. Alt+Click to sample colors
10. Undo/Redo freely (up to 1000 ops)

Note

See the curated collection of ANSi Tutorials for tips on drawing styles.

Build & Development

Requirements:

• bun (recommended over npm)
• node.js (v22.19+)

Quick Start:

Install bun:

# From an existing npm installation:
npm i -g bun

# For UNIX systems like Linux, MacOS, and Open/FreeBSD:
curl -fsSL https://bun.sh/install | bash

# For Windows:
powershell -c "irm bun.sh/install.ps1 | iex"

Install dependencies, build, and serve the app:

bun i      # or npm install
bun bake   # or npm run bake
bun www    # or npm run www

Note

See: docs/building-and-developing for more info

Scripts:

Script	Purpose
bake	Build for production (Vite)
server	Start collaboration server
www	Serve the /dist folder for testing
fix	Auto-fix lint and format
lint:check/fix	Lint checking/fixing
format:check/fix	Formatting check/fix
test:unit	Run unit tests (Vitest)
test:e2e	Run end to end tests (Playwright)
test:install	Install playwright browsers

Tip

See: package.json for full commands definitions

Build Process:

• Uses Vite + plugins for static copy, sitemap, PWA/offline support
• Output: dist/
• Files are hashed for cache busting (e.g., editor-[hash].js, stylez-[hash].css)
• Customizable options via .env variables:
  • VITE_DOMAIN='https://text.0w.nz'
  • VITE_UI_DIR='ui/'
  • VITE_WORKER_FILE='websocket.js'

Important

VITE_DOMAIN is only used for robots.txt and sitemap.xml generation, all app urls are relative

Build Output Structure:

dist/
├── index.html                 # Main entry point
├── site.webmanifest           # PWA manifest
├── service.js                 # Service worker (injectManifest strategy)
├── robots.txt                 # Search engine directives
├── sitemap.xml                # SEO Site map
├── humans.txt                 # Credits
├── favicon.ico                # Application icon
├── ansi/                      # ANSI art tutorials (ANS files, PNG previews)
└── ui/                        # UI assets
    ├── stylez-[hash].css      # Minified CSS
    ├── icons-[hash].svg       # Icon sprite
    ├── topazplus_1200.woff2   # Interface font (Amiga style)
    ├── fonts/                 # Bitmap fonts (PNG format)
    ├── img/                   # PWA Images and app icons
    └── js/                    # JavaScript bundles
        ├── editor-[hash].js   # Main application entry point
        ├── core-[hash].js     # Core modules (state, storage, compression)
        ├── canvas-[hash].js   # Canvas rendering with lazy font loading
        ├── tools-[hash].js    # Drawing tools
        ├── fileops-[hash].js  # File operations
        ├── network-[hash].js  # Collaboration
        ├── palette-[hash].js  # Color palette
        └── websocket.js       # Web Worker (not hashed)

Code Standards & Style

• HTML 5: Semantic tagging
• CSS 4: Modern nesting
• ES6 JavaScript: Vanilla & framework free
• Sources use all lowercase or camelCase names

Collaborative Server

Enable real-time multi-user editing with the built-in server.

Features:

• Canvas/chat persistence
• SSL/HTTP support
• Custom session names, save intervals
• Minimal overhead for real-time editing

Starting the server:

bun server [port] [options]
# or
node src/js/server/main.js

Tip

The server starts on port 1337 by default. so elite

Command-Line Options

Option	Description	Default
[port]	Port to run the server on	1337
--ssl	Enable SSL (requires certificates in ssl-dir)	Disabled
--ssl-dir <path>	SSL certificate directory	/etc/ssl/private
--save-interval <n>	Auto-save interval in minutes	30 (minutes)
--session-name <str>	Session file prefix (for state and chat backups)	joint
--debug	Enable verbose logging	false
--help	Show help message and usage examples	-

Note

See: docs/collaboration-server for more info.

Docker Containerization

text0wnz is fully containerized, offering a streamlined deployment experience across different environments and architectures. Our containerization approach focuses on several key areas:

• Multi-Stage Build Architecture
• Security Hardening
• Performance Optimization
• Service Orchestration

Registry Support

Prebuilt images are available in linux/amd64 & linux/arm64 flavors from multiple repositories:

DockerHub:

docker pull xerostyle/text0wnz:latest

GitHub Container Registry:

docker pull ghcr.io/xero/text0wnz:latest

Building Locally

To build the container locally, you'll need Docker with Buildx support:

# Standard build for your local architecture
docker buildx build -t text0wnz:latest .

# Multi-architecture build (requires buildx setup)
docker buildx create --name mybuilder --use
docker buildx build --platform linux/amd64,linux/arm64 -t yourname/text0wnz:latest --push .

Running in Development Mode

Development mode provides hot-reloading and detailed logging for an optimized development experience:

docker run \
    --cap-add=NET_BIND_SERVICE \
    -e NODE_ENV=development \
    -p 80:80 \
    text0wnz:latest

The editor client will be available at http://localhost with WebSocket collaboration features enabled.

Running in Production Mode

For production deployments, use this configuration with your domain and a secure session key:

docker run \
    --cap-add=NET_BIND_SERVICE \
    -e DOMAIN=your.cool.domain.tld \
    -e SESSION_KEY=secure-production-key \
    -e NODE_ENV=production \
    -p 80:80 -p 443:443 \
    text0wnz:latest

This setup enables:

• Automatic HTTPS via Caddy's built-in certificate management
• Production-optimized performance settings
• Stricter security headers and content policies

Note

See: docs/docker for more info and advanced setup examples.

Testing Suite

Triple-Headed:

• Vitest: Unit/integration
• Testing Library: DOM/component
• Playwright: E2E/browser

Tip

View the latest unit coverage report & e2e testing report

bun test:unit  # Run unit tests
bun test:e2e   # Run end2end tests

All tests run automatically in CI/CD.

Note

See: docs/testing for more info on unit test frameworks and tools.

See: CI/CD Pipeline documentation for details on the automated testing, building, and deployment process.

Troubleshooting

Common Issues:

Client

• Build fails: Check Node.js version, reinstall deps
• e2e tests fail: Check you have the playwright browsers installed (bun test:install)
• Client can't connect to server: Check server, proxy, firewall settings
• WebSocket drops: Validate webServer headers, note trailing slash in proxy_pass

Still stuck? Review the wiki then open an issue with error logs and platform details.

Server:

• Port in use: Change server port or stop other process
• SSL fails: Check cert/key files and permissions
• Session not saving: Check write permissions, save interval
• Permissions: Confirm systemd user access
• Wrong port: Sync client/server configs

Tip

• Use a process manager (systemd, forever) for the server
• Lower save interval for busy sessions
• Use SSL in production (Let's Encrypt via Certbot, ACME-nginx, etc)
• WebSocket debugging: browser dev tools
• Restore session: rename backups in the sessions folder
• Run using the --debug flag and review logs for details

See: docs/trouble_shooting for more help.

Project History

The story of this project traces back to 2018, when AndyH joined Blocktronics—the legendary masters of the ANSI art scene. During his early days there, he created the original “ansiedit,” laying the groundwork for this application. However, his focus soon shifted to developing a desktop-only editor, which evolved into Moebius.

Around that time, xeR0 (then a member of Impure!ASCii and a devoted PabloDraw user) joined Blocktronics shortly after ansiedit’s release. xeR0 played the role of testing and debugging the app alongside Andy as he learned the dark arts of the blocks.

Fast forward a decade: xeR0 found himself sad he was still unable to use the new MoebiusXBIN fork to create text art on his iPad. With Andy’s blessing, xeR0 decided to revive the project—reimagining it from the ground up as a modern Progressive Web App. New features like optimized off-screen canvas', dirty pixel rendering, local storage sync, were added. But without Andy's core math this project would not be possible.

License & Greetz

Mad love & respect to ▒ Andy Herbert^67 - Moebius ░ grmmxi^imp! - MoebiusXBIN ░ Curtis Wensley - PabloDraw ░ Skull Leader^ACiD - ACiDDRAW ▒ & the art scene!

---

All files and scripts in this repo are released MIT / kopimi! In the spirit of freedom of information, I encourage you to fork, modify, change, share, or do whatever you like with this project! ^c^v