fixie.js - React Component for Fixed-Width Font Scaling

About

fixie.js is a React component and vanilla JavaScript library that automatically scales fixed-width font content to fit a specified number of columns. Perfect for ASCII art, code snippets, terminal output, and any monospace text that needs to fit precisely within a given width.

Live Demo: React Component

Below are three examples of the Fixie React component demonstrating different column widths: 20 columns, 40 columns, and 80 columns. Each component automatically scales the text to fit exactly the specified number of columns, and responds dynamically to window resizing.

20 Columns

Perfect for narrow displays or compact layouts

╔══════════════════╗
║  fixie.js Demo  ║
║   20 Columns    ║
╚══════════════════╝

   ______________
  /             /|
 /  fixie.js  / |
/____________/  |
|            | /
|____________|/

40 Columns

Ideal for medium-width content and balanced layouts

┌──────────────────────────────────────┐
│        fixie.js - 40 Columns         │
│  Scales to fit exactly 40 chars/line │
└──────────────────────────────────────┘

     __  _      _        _     
    / _|(_)    (_)      (_)    
   | |_  _ __  ___  ___  _ ___ 
   |  _|| |\ \/ | |/ _ \| / __|
   | |  | | >  <| |  __/| \__ \
   |_|  |_|/_/\_|_|\___||_|___/

80 Columns

Classic terminal width - perfect for code and detailed ASCII art

╔══════════════════════════════════════════════════════════════════════════════╗
║                        fixie.js - React Component                            ║
║                                                                              ║
║           Automatically scales fixed-width fonts to fit 80 columns          ║
╚══════════════════════════════════════════════════════════════════════════════╝

 _____ _      _        _                                                        
|  ___(_)_  _(_) ___  (_)___                                                    
| |_  | \ \/ | |/ _ \ | / __|                                                   
|  _| | |>  <| |  __/_| \__ \                                                   
|_|   |_/_/\_|_|\___(_| |___/  Like FitText or BigText, but for monospace fonts
                     _/ |                                                       
                    |__/

Dynamic Content Example

All examples respond to window resizing

const fixie = {
  name: 'fixie.js',
  description: 'Automatic scaling for fixed-width fonts',
  features: [
    'React component and vanilla JS',
    'Responsive to window resizing',
    'Perfect for ASCII art and code',
    'Easy to use with minimal setup'
  ],
  columns: [20, 40, 80],
  license: 'MIT'
};

console.log('Try resizing your browser window!');

Installation & Usage

React Component

Import the Fixie component and use it with your desired column width:

import React from 'react';
import Fixie from './Fixie.jsx';
import './fixie.css';

function App() {
  return (
    <div>
      <Fixie columns={80}>
        Your fixed-width content here...
      </Fixie>
    </div>
  );
}

export default App;

Props

columns (number, required): Number of columns to fit the content to
children (ReactNode, required): The content to display
className (string, optional): Additional CSS classes
style (object, optional): Additional inline styles

Vanilla JavaScript

For non-React projects, include the script and add the appropriate class to your elements:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="fixie.css" />
</head>
<body>
    <pre class="fixie_80">Your content here...</pre>
    <script type="text/javascript" src="fixie.js"></script>
</body>
</html>

Features

✅ Automatic font scaling based on column width
✅ Responsive - adapts to window resizing
✅ Works with React and vanilla JavaScript
✅ Perfect for ASCII art, code snippets, and terminal output
✅ Lightweight and easy to use
✅ MIT licensed

License

fixie.js is provided under the MIT License. See the LICENSE file for details.