🚀 Go Fiber + Jet + HTMX + Tailwind CSS Template

A modern, lightweight web application template combining the speed of Go Fiber, the simplicity of HTMX, and the utility-first approach of Tailwind CSS. Perfect for building fast, interactive web applications with minimal JavaScript.

✨ Features

• ⚡ Fast Backend: Built with Go Fiber - Express-inspired web framework for Go
• 🎯 Interactive Frontend: HTMX for seamless AJAX, CSS transitions, and WebSocket support
• 🎨 Modern Styling: Tailwind CSS for rapid UI development
• 📄 Template Engine: Jet Templates for powerful, Django-like templating
• 🛠️ Development Tools: Mise for task automation and tool management
• 📦 Zero Build Complexity: Simple setup with minimal configuration

🛠️ Tech Stack

Technology	Purpose	Version
Go	Backend Language	1.24.4+
Fiber	Web Framework	v2.52.8+
HTMX	Frontend Interactivity	2.0.4
Tailwind CSS	CSS Framework	Latest
Jet Templates	Template Engine	v6.3.1+
Mise	Task Runner & Tool Management	Latest

🚀 Quick Start

Prerequisites

• Go 1.24.4 or later
• Mise (recommended) or manual tool installation

Installation

1. Clone the repository

   git clone https://github.com/Drache93/go-fiber-template.git
   cd go-fiber-template

2. Install dependencies

   # If using Mise (recommended)
   mise install
   mise run dep
   mise run tidy
   
   # Or manually
   go mod tidy
   mkdir -p static/dist/js
   curl -o static/dist/js/htmx.min.js https://unpkg.com/htmx.org@2.0.4/dist/htmx.min.js

3. Build CSS

   # If using Mise
   mise run build:css
   
   # Or manually
   npx @tailwindcss/cli -i ./static/css/app.css -o ./static/dist/css/styles.css

4. Run the development server

   # If using Mise
   mise run dev
   
   # Or manually
   go run cmd/app/main.go

5. Open your browser Navigate to http://localhost:3000

📁 Project Structure

├── cmd/
│   └── app/
│       └── main.go          # Application entry point
├── views/
│   ├── layouts/
│   │   └── application.jet  # Base HTML layout
│   └── index.jet           # Home page template
├── static/
│   ├── css/
│   │   └── app.css         # Tailwind CSS input file
│   └── dist/               # Built assets (auto-generated)
│       ├── css/
│       │   └── styles.css  # Compiled Tailwind CSS
│       └── js/
│           └── htmx.min.js # HTMX library
├── mise.toml               # Task definitions and tool versions
├── go.mod                  # Go module dependencies
└── README.md              # This file

🎯 Available Tasks (Mise)

Task	Description	Command
dep	Download JavaScript dependencies	mise run dep
tidy	Clean up Go modules	mise run tidy
build:css	Compile Tailwind CSS	mise run build:css
dev	Start development server	mise run dev
build	Build production binary	mise run build

🔧 Development

Adding New Routes

Add routes in cmd/app/main.go:

app.Get("/your-route", func(c *fiber.Ctx) error {
    // Your handler logic
    return c.SendString("Hello World!")
})

Creating Templates

1. Create a new .jet file in the views/ directory

2. Extend the base layout:

   {{ extends "./layouts/application.jet" }} {{ block documentBody() }}
   <div class="p-4">
     <h1 class="text-2xl font-bold">Your Content</h1>
   </div>
   {{ end }}

HTMX Integration

Use HTMX attributes for dynamic behavior:

<button
  hx-get="/api/data"
  hx-target="#result"
  class="bg-blue-500 text-white px-4 py-2 rounded"
>
  Load Data
</button>
<div id="result"></div>

Styling with Tailwind

The project includes Tailwind CSS with automatic compilation. Add classes directly to your HTML:

<div
  class="bg-gradient-to-r from-blue-500 to-purple-600 text-white p-8 rounded-lg shadow-lg"
>
  Beautiful gradient background!
</div>

🏗️ Production Build

# Build the application
mise run build

# The binary will be created at ./bin/app
./bin/app

📚 Learn More

• Go Fiber Documentation - Learn about the web framework
• HTMX Documentation - Master hypermedia-driven applications
• Tailwind CSS Documentation - Explore utility-first CSS
• Jet Template Documentation - Template engine guide
• Mise Documentation - Task runner and tool management

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is free and open-source. Feel free to use it as a template for your own projects!

🙏 Acknowledgments

• Fiber Team for the amazing Go web framework
• HTMX Team for revolutionizing frontend development
• Tailwind Labs for the utility-first CSS framework
• CloudyKit for the powerful template engine

---

Happy coding! 🎉

If you find this template helpful, please consider giving it a ⭐ on GitHub!