@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 hx-sse:connect="/events" hx-swap="innerHTML">
  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 four packages that work together:

1. vibetuner: Python framework and dependencies
2. @alltuner/vibetuner (this package): JavaScript/CSS build dependencies (tailwind, daisyui, htmx, etc.)
3. @alltuner/vibetuner-jinja: npm-shipped mirror of vibetuner's frontend jinja templates, pulled in transitively by this package so tailwind can scan them at frontend build time without shelling out to Python (no direct install needed)
4. Scaffolding template: Copier template for project generation

All four 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/