Skip to content
ParticleText.js

Installation

ParticleText.js is a standalone vanilla JavaScript library with no dependencies. You can install it in multiple ways depending on your project setup.

Section titled “CDN (Recommended for Quick Start)”

The fastest way to get started is to include ParticleText.js via CDN:

<!DOCTYPE html>
<html>
<head>
  <title>My ParticleText Project</title>
</head>
<body>
  <canvas id="particle-canvas" data-text="ParticleText.js"></canvas>


  <!-- Include ParticleText.js from CDN -->
  <script src="https://cdn.jsdelivr.net/gh/aayusharyan/particleText.js@main/src/particleText.js"></script>


  <script>
    initParticleJS('#particle-canvas', {
      colors: ['#695aa6'],
      fontSize: 100
    });
  </script>
</body>
</html>

NPM

Section titled “NPM”

Install via npm for use in bundled projects:

Terminal window
npm install particletext-js

Then import in your JavaScript:

import { initParticleJS } from 'particletext-js';


initParticleJS('#particle-canvas', {
  colors: ['#695aa6'],
  fontSize: 100
});

Direct Download

Section titled “Direct Download”
  1. Download particleText.js from the GitHub repository
  2. Place it in your project directory
  3. Include it in your HTML:
<script src="path/to/particleText.js"></script>

Requirements

Section titled “Requirements”

ParticleText.js has minimal requirements:

  • Browser Support: IE11+, Chrome, Firefox, Safari, Edge
  • Dependencies: None - Pure vanilla JavaScript
  • HTML5 Canvas: Required (supported by all modern browsers)

Verify Installation

Section titled “Verify Installation”

To verify ParticleText.js is loaded correctly, open your browser’s developer console and type:

console.log(typeof initParticleJS); // Should output: "function"

If you see "function", you’re ready to go!

Next Steps

Section titled “Next Steps”

Troubleshooting

Section titled “Troubleshooting”

Script Not Loading

Section titled “Script Not Loading”

If initParticleJS is undefined:

  1. Check that the script tag is before your initialization code
  2. Verify the CDN URL or file path is correct
  3. Check browser console for 404 errors

Canvas Not Found

Section titled “Canvas Not Found”

If you see “Canvas element not found”:

  1. Ensure your canvas has the correct id attribute
  2. Make sure the canvas element exists in the HTML before running the script
  3. Check that your selector (e.g., #particle-canvas) matches the canvas ID

For more help, visit the Troubleshooting Guide.