README.md

Spacing JS

A lightweight JavaScript utility for measuring spacing between elements on webpages during development. Perfect for designers and developers who need precise measurements. Try the demo.

🌍 Available in: English | 繁體中文 | 简体中文

Installation

Option 1: CDN

Add SpacingJS directly to your HTML:

<!-- Using UNPKG -->
<script src="//unpkg.com/spacingjs" defer></script>

<!-- Or using jsDelivr -->
<script src="//cdn.jsdelivr.net/npm/spacingjs" defer></script>

Option 2: NPM

npm install spacingjs

Then import and use it in your code:

import Spacing from 'spacingjs';

Spacing.start();

Usage

1. Hover over any element on your webpage
2. Press Alt (Windows) or ⌥ Option (Mac)
3. Move your cursor to another element to see the measurements

Pro Tips

• Hold Shift to keep measurements visible longer (great for taking screenshots)
• Use the Chrome Extension for permanent access on any website

Browser Extension

SpacingJS is available as a Chrome Extension:

• 🚀 Install from Chrome Web Store
• 🛠️ Build it yourself: Run npm run ext

Contributing

The dist folder is intentionally included in the Git repository to ensure CDN reliability. To contribute:

1. Make your changes in the src directory
2. Run npm run build to rebuild the distribution files
3. Commit both source changes and rebuilt dist files
4. Submit a pull request

Get Involved

• 🐛 Report bugs: GitHub Issues
• 💡 Share ideas: GitHub Discussions
• ⭐ Star the repo if you find it useful!

License

SpacingJS is released under the MIT License.