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.

!preview

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 |

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

• Comprehensive keyboard shortcuts and mouse controls

• Classic and modern fonts

• Full suite of drawing tools:

• Advanced color management

• Supported file types:

• Multi-platform file opening

• Canvas operations:

• Editor options:

• Auto Save/Restore

• Collaborative server mode

• Build tools:

• Automated tests:

• Robust linting and formatting:

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 ↵

• 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 ↵

• 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 ↵

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

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

[!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.22.2+)

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:

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

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 | SSL certificate directory | /etc/ssl/private | | --save-interval | Auto-save interval in minutes | 30 (minutes) | | --session-name | 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

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