@alltuner/vibetuner

Blessed JavaScript/frontend build dependencies for Vibetuner projects

This package bundles all the essential frontend build tools and libraries needed for Vibetuner-based web applications. It provides a curated, version-locked set of dependencies for building modern, reactive web interfaces.

What is Vibetuner?

Vibetuner is a production-ready scaffolding tool for FastAPI + MongoDB + HTMX web applications. This package (@alltuner/vibetuner) is the JavaScript component that provides:

• Tailwind CSS 4: Utility-first CSS framework
• DaisyUI: Beautiful component library for Tailwind
• HTMX 4: Dynamic HTML without complex JavaScript
• Build tools: CLI tools for asset compilation

This package is designed to be used within projects generated by the Vibetuner scaffolding tool. It ensures consistent frontend tooling across all Vibetuner projects.

Installation

# In a Vibetuner-generated project (automatic)
bun install

# Add to an existing project
bun add @alltuner/vibetuner
# or
npm install @alltuner/vibetuner

Quick Start

The recommended way to use Vibetuner is via the scaffolding tool:

# Create a new project with all frontend tools configured
uvx vibetuner scaffold new my-project
cd my-project
bun dev  # Start frontend asset building with hot reload

Included Dependencies

Core Frontend Libraries

• Tailwind CSS (4.1+): Modern utility-first CSS framework
• @tailwindcss/cli: Command-line tool for Tailwind
• @tailwindcss/typography: Beautiful typographic defaults
• DaisyUI (5.4+): Tailwind CSS component library

Interactivity

• HTMX (4.0+): High-power tools for HTML with native SSE support

Usage in Generated Projects

In a Vibetuner-generated project, the package is automatically configured. The frontend asset pipeline is preconfigured for:

• Tailwind CSS compilation with DaisyUI
• HTMX integration
• Hot reload during development
• Production builds with minification

Frontend Stack

HTMX-First Approach

Vibetuner uses HTMX for dynamic, reactive interfaces without complex JavaScript:

<!-- Reactive forms -->
<form hx-post="/api/submit" hx-target="#result">
  <input type="text" name="data">
  <button type="submit">Submit</button>
</form>

<!-- Real-time updates (native SSE in htmx v4) -->
<div sse-connect="/events" sse-swap="message">
  Updates will appear here
</div>

Styling with Tailwind + DaisyUI

<!-- Utility classes + Components -->
<button class="btn btn-primary">
  Click Me
</button>

<div class="card bg-base-100 shadow-xl">
  <div class="card-body">
    <h2 class="card-title">Card Title</h2>
    <p>Card content</p>
  </div>
</div>

Documentation

For complete documentation, guides, and examples, see the main Vibetuner repository:

📖 Vibetuner Documentation

Package Ecosystem

Vibetuner consists of three packages that work together:

1. vibetuner: Python framework and dependencies
2. @alltuner/vibetuner (this package): JavaScript/CSS build dependencies
3. Scaffolding template: Copier template for project generation

All three are version-locked and tested together to ensure compatibility.

Contributing

Contributions welcome! See the main repository for contribution guidelines:

🤝 Contributing to Vibetuner

License

MIT License - Copyright (c) 2025 All Tuner Labs, S.L.

See LICENSE for details.

Links

• Main Repository: https://github.com/alltuner/vibetuner
• Documentation: https://vibetuner.alltuner.com/
• Issues: https://github.com/alltuner/vibetuner/issues
• npm: https://www.npmjs.com/package/@alltuner/vibetuner
• Python Package: https://pypi.org/project/vibetuner/