squares

Render input text as a div-based square grid with adjustable controls.

Updated Oct 24, 2025

Search Tags:#javascript #pixel-art #squares #text-grid #div-based #pure-html

Ready to run

npx skills add https://github.com/thruthesky/skills --skill squares

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: squares
Source: https://github.com/thruthesky/skills/tree/main/skills/squares
Command: npx skills add https://github.com/thruthesky/skills --skill squares

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides a pure HTML+JavaScript approach to render text by drawing it as a grid of small square divs instead of using canvas, enabling a pixel-art style with live text updates.

Core Features & Use Cases

Pure HTML+JavaScript rendering: no canvas, div-based pixel grid to display text.
Interactive UI: a central text area showing the message and sliders to adjust grid cell size, square size, font size, and threshold, with automatic re-rendering on change.
Real-world use: create retro-styled headings or messages on personal pages or demos with adjustable aesthetics.

Quick Start

Create a pure HTML+JavaScript page that renders the input text as a grid of div-based squares with adjustable CELL, SQUARE, FONT_SIZE, and THRESHOLD controls.

Frequently Asked Questions about squares

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I render text as a pixel grid using pure HTML and JavaScript without canvas?▼

You can render text as a pixel grid by mapping characters to a grid of div-based squares using pure HTML and JavaScript, completely avoiding the canvas element for a live, interactive display.

Can I create retro-style text art on a web page with adjustable pixel sizes?▼

Yes, you can create retro-style text art by adjusting grid cell size, square size, font size, and threshold via interactive sliders to control the pixel aesthetics in real time.

Does this div-based pixel grid approach support live updates as I type?▼

The div-based pixel grid supports live updates, automatically re-rendering the text art on the web page in real time whenever the user input or slider values change.

What is the best way to display text as squares for a UI demo without using canvas?▼

The best way to display text as squares without canvas is using a pure HTML and JavaScript div-based pixel grid, which maps characters to small square elements for interactive UI demonstrations.

Are there limitations to rendering text as a grid of div squares for high-density displays?▼

Rendering text as a grid of div squares creates individual DOM elements for each pixel, which may introduce performance limitations and DOM overhead for very large or high-density text displays.