p5.nvim

Better editor support for p5.js in Neovim.

Warning

This plugin is still experimental but should work fine for most cases, I developed this on Linux so behaviour may not be uniform for certain edge cases. Any patches would be greatly appreciated 💚

Features ✨

• 🚀 Create new p5.js projects
• 🌐 Download and install p5.js libraries (core and contributor libraries)
• 🖥️ Cross-platform browser preview w/ live reload
• 🛠️ TypeScript support
• 📝 Comprehensive error reporting

📋 Requirements

• Neovim 0.10.0+

• plenary.nvim - Required for testing and utilities

• curl or wget - For downloading p5.js libraries

• One of the following for browser opening:

• Linux: xdg-open

• macOS: open

• Windows: start command

Installation 🚀

Using lazy.nvim (Recommended)

{
'prjctimg/p5.nvim',
dependencies = { 'nvim-lua/plenary.nvim' },
config = function()
require('p5.nvim').setup({
-- Optional configuration
auto_open_browser = true,
network_timeout = 30,
max_retries = 3,
})
end
}

Using packer.nvim

use {
'prjctimg/p5.nvim',
requires = { 'nvim-lua/plenary.nvim' },
config = function()
require('p5.nvim').setup()
end

}

⚙️ Configuration

p5.nvim can be customized with the following options:

require('p5.nvim').setup({
-- Directory where project templates are stored
-- Default: vim.fn.stdpath("config") .. "/p5.nvim/template"
template_dir = "~/.config/nvim/p5.nvim/template",

-- Version of p5.js to download from CDN
-- Default: "1.9.0"
p5_version = "1.9.0",

-- Automatically open browser when creating projects
-- Default: false
auto_open_browser = true,

-- Network timeout in seconds for downloads
-- Default: 30
network_timeout = 60,

-- Number of retry attempts for failed downloads
-- Default: 3
max_retries = 5,
})

🎮 Usage

Creating p5.js project (sketchspace✏️)

:P5CreateProject

This will:

1. Prompt you to select a directory for the project
2. Create the project with validated templates
3. Download p5.js libraries with retry logic
4. Generate jsconfig.json for TypeScript support
5. Ask if you want to open the project

Installing contributor libraries

:P5InstallLibrary

Provides:

• Interactive library selection with descriptions
• Automatic HTML script tag insertion
• Error recovery and retry logic

Health check

:P5Health

Checks:

• plenary.nvim installation
• Network tool availability (curl/wget)
• Template directory status

Manual Setup

:P5Setup template_dir=/custom/path p5_version=2.0.0

Project Structure 📁

When you create a new project, it will have the following structure:

p5_sketch/
├── index.html          # Main HTML file with p5.js includes
├── sketch.js           # Your main sketch code
├── style.css           # Basic styling for centered canvas
├── jsconfig.json       # TypeScript configuration
└── libraries/          # Downloaded p5.js libraries
├── p5.min.js      # Core p5.js library
└── p5.sound.min.js  # Sound addon library

Available Libraries

p5.nvim supports installing any contributor libraries, (currently at the time of writing):

Library	Description	Author
p5.accessibility	Canvas accessibility for visually impaired	Processing Foundation
p5.asciiart	Image-to-ASCII art converter	Pawel Janicki
grafica.js	2D plotting and graphs	Javier Graciá Carpio
mappa	Maps and geospatial data	Cristóbal Valenzuela
ml5.js	Machine learning in the browser	NYU ITP/IMA
p5.collide2D	2D collision detection	Ben Moren
p5.play	Game development tools	Paolo Pedercini
p5.speech	Speech recognition and synthesis	R. Luke DuBois
rita.js	Natural language processing	Daniel C. Howe

🐛 Troubleshooting

Common Issues

Downloads keep failing

• Check internet connection
• Try increasing network_timeout in configuration
• Verify p5_version is correct and available

Browser won’t open

• Ensure browser command is available (xdg-open, open, or start)
• Manually open: file:///path/to/your/project/index.html

Permission denied errors

• Check write permissions in target directory
• Verify template directory is accessible
• Run :P5Health for detailed diagnosis

🤝 Contributing

Contributions are welcome! Please see our Contributing Guide for details.

Development Setup

1. Clone the repository
2. Install dependencies: make install
3. Run tests: make test
4. Format code: make format
5. Check dependencies: make check-deps

🙏 Acknowledgments

• p5.vscode extension
• plenary.nvim
• Processing.org

---

License 📄

©️ 2025 - Present Dean Tarisai

Released under the GNU GPL-3.0 License