Text Toolbox
All Text Tools

Reference Template Tool

A reference blueprint and self-documenting template tool showing layout, spacing rules, styles, and architecture.

🛠️ Developer & AI Agent Reference Guide

1. Tech Stack & Libraries

  • Astro 6: MPA framework using static build output.
  • Tailwind CSS v4: Utility-first styling.
  • DaisyUI v5: Custom styling layer (lofi theme default).
  • Astro Icon: Rendered via <Icon name="lucide:..." />.
  • Fontsource Inter: Main typography.

2. Core Color Tokens (CSS Variables)

--color-brand: #10b982
--brand-hover: #076f4c
--brand-light: #e6f7f2
--color-border: #e5e5e5

3. Class-List Standards

  • Input Textarea: w-full min-h-[200px] p-4 text-sm bg-base-200 border border-[var(--color-border)] rounded-lg resize-y font-mono placeholder-[var(--color-text-muted)]/40 focus:border-[var(--color-brand)] focus:ring-2 focus:ring-[var(--color-brand)]/20 transition-all duration-150
  • Output Textarea (readonly): w-full min-h-[200px] p-4 text-sm bg-[var(--color-brand-light)] border border-[var(--color-border)] rounded-lg resize-y font-mono
  • Inactive Mode Button: url-btn btn-mode px-4 py-2 text-sm font-medium rounded-lg transition-all duration-150
  • Active Mode Button: url-btn btn-mode btn-mode-active px-4 py-2 text-sm font-medium rounded-lg transition-all duration-150
  • Checkbox Wrapper: flex items-center gap-2 text-sm cursor-pointer select-none
  • Checkbox Element: checkbox checkbox-sm border-[var(--color-border)] rounded [--chkbg:var(--color-brand)] [--chkfg:white]
  • Radio Wrapper: flex items-center gap-2 text-sm cursor-pointer select-none
  • Radio Element: radio radio-sm
  • Section Header Label: text-xs font-medium text-[var(--color-text-muted)] mb-1 block uppercase tracking-wide

4. Built-in Data Attributes (No custom JS required)

  • data-counts="id" on input textarea + data-counts-for="id" on count container: Automatically updates character, word, line counts.
  • data-clear="#id": Click clears target input or textarea, triggering input update event.
  • data-copy="#id": Click copies target value/text to clipboard with toast notification.
  • data-download="#id" data-download-name="name.txt": Click downloads target content as text file.
  • data-share="#id": Click triggers browser Share sheet or Facebook share.
Chars: 0 Words: 0 Lines: 0

About This Free Online Reference Template Tool

This reference template page contains all rules, CSS configurations, available libraries, HTML structures, and JavaScript event bindings. It provides a blueprint for creating new tools easily and consistently.

Features of Our Reference Template Tool

  • Shows standard layout and padding rules
  • Demonstrates checkboxes, radio buttons, and textareas
  • Includes the standard Action Bar and Tool Counts wrappers
  • Self-documenting page with detailed development guide

How to Use the Reference Template Tool

Using this tool is simple and requires no signup or registration. Follow these steps:

  1. Check the source code of this file to understand the architecture.
  2. Follow the spacing and styling class lists exactly.
  3. Verify the tool layout and script bindings locally.

Why Choose Text Toolbox?

Text Toolbox provides free, private, and instant online text tools. Unlike other text utility websites that require signup accounts or send your data to servers, all our tools process your text entirely in your browser. This means your content never leaves your device — we cannot see it, store it, or share it. Our tools are fast, lightweight, and work on any device with a modern web browser.