WaveSurfer Vue Documentation Site

This is the official documentation site for @meersagor/wavesurfer-vue - a modular Vue 3 package for wavesurfer.js with individual plugins.

🚀 Live Documentation

📖 View Live Documentation - Interactive documentation with playground

📦 Package Information

• Package: @meersagor/wavesurfer-vue
• Repository: GitHub Repository
• Documentation: Live Documentation
• Last Updated: Real-time data from NPM and GitHub APIs

🎯 Features

Documentation Site

• 📖 Interactive Documentation: Complete package documentation with syntax highlighting
• 🎮 Live Playground: Interactive playground to test configurations
• 📚 API Reference: Comprehensive API documentation
• 📱 Responsive Design: Works perfectly on desktop and mobile devices
• 🌙 Dark Mode: Full dark mode support
• ⚡ Server-Side Rendering: Fast loading with SSR

Package Features

• 🧩 Modular Architecture: Import only what you need
• 🎵 Audio Visualization: Waveform and spectrogram support
• 🔌 Plugin System: Individual plugins for different features
• 📝 TypeScript Support: Full type safety
• 🎨 Customizable: Extensive customization options
• 🚀 Vue 3 Ready: Built for Vue 3 Composition API

🛠️ Development

Prerequisites

• Node.js 18+
• npm, yarn, pnpm, or bun

Getting Started

1. Clone the repository

git clone https://github.com/meer-sagor/wavesurfer-vue-docs.git
cd wavesurfer-vue-docs

2. Install dependencies

npm install
# or
yarn install
# or
pnpm install

3. Run the development server

npm run dev
# or
yarn dev
# or
pnpm dev

4. Open your browser Navigate to http://localhost:3000 to see the documentation site.

📁 Project Structure

wavesurfer-vue-docs/
├── src/
│   ├── app/                    # Next.js app directory
│   │   ├── page.tsx           # Main landing page
│   │   ├── playground/        # Interactive playground
│   │   ├── api-references/    # API documentation
│   │   └── api/               # API routes
│   ├── components/            # React components
│   │   ├── ui/               # UI components
│   │   └── playground/       # Playground components
│   ├── @types/               # TypeScript types
│   ├── layouts/              # Layout components
│   ├── hooks/                # Custom React hooks
│   ├── lib/                  # Utility functions
│   └── assets/               # Static assets (CSS, images)
├── public/                    # Public static assets
└── config files              # Configuration files

🔄 Real-Time Data

The documentation site fetches real-time data from external APIs:

• Package Info: Live data from NPM registry
• GitHub Stats: Stars, forks, and repository information
• Download Stats: Monthly download statistics
• Version Info: Latest package version and metadata

🎨 Tech Stack

• Framework: Next.js 14 with App Router
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: Radix UI
• Icons: Lucide React
• Deployment: Vercel

📚 Documentation Sections

🏠 Main Landing Page

• Package overview and features
• Installation instructions
• Interactive playground preview
• Package information and statistics

🎮 Interactive Playground

• Live configuration testing
• Real-time code generation
• Plugin selection and customization
• Export configurations

📖 API Reference

• Complete WaveSurferPlayer props documentation
• Configuration options
• Event handlers
• TypeScript types

🤝 Contributing

We welcome contributions to both the documentation site and the package!

Documentation Site

1. Fork the documentation repository
2. Create a feature branch
3. Make your changes
4. Submit a pull request

Package

1. Fork the package repository
2. Create a feature branch
3. Make your changes
4. Submit a pull request

📄 License

This documentation site is licensed under the MIT License - see the LICENSE file for details.

The @meersagor/wavesurfer-vue package is also licensed under the MIT License.

🔗 Links

• Package: @meersagor/wavesurfer-vue
• Repository: GitHub Repository
• Documentation: Live Documentation
• Issues: GitHub Issues
• Discussions: GitHub Discussions

👨‍💻 Author

Meer Sagor - Lead developer and maintainer

• GitHub: @meer-sagor
• Website: meersagor.com
• Email: meersagor.contact@gmail.com

---

⭐ Star the repository if you find it helpful!