https://github.com/ryanlewis/spring-kotlin-htmx

A Spring Boot demo utilising kotlinx.html and htmx
https://github.com/ryanlewis/spring-kotlin-htmx

htmx htmx-template kotlin spring spring-boot springboot

Last synced: about 10 hours ago
JSON representation

A Spring Boot demo utilising kotlinx.html and htmx

• Host: GitHub
• URL: https://github.com/ryanlewis/spring-kotlin-htmx
• Owner: ryanlewis
• License: mit
• Created: 2023-09-06T20:54:43.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2023-09-06T21:13:59.000Z (almost 3 years ago)
• Last Synced: 2023-09-06T23:29:26.191Z (almost 3 years ago)
• Topics: htmx, htmx-template, kotlin, spring, spring-boot, springboot
• Language: Kotlin
• Homepage:
• Size: 65.4 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Spring Boot + kotlinx.html + HTMX Pattern Showcase

A showcase of common [HTMX](https://htmx.org/) patterns built with

[Spring Boot](https://spring.io/projects/spring-boot),

[Kotlin](https://kotlinlang.org/), and

[kotlinx.html](https://github.com/Kotlin/kotlinx.html).

- **No template engine** — kotlinx.html generates all markup in pure Kotlin

- **No JavaScript** — HTMX handles interactivity through HTML attributes

- **No database** — an in-memory data store keeps things simple

![Home page](docs/screenshots/home.png)

## Patterns Demonstrated

### Active Search

Real-time search-as-you-type with `hx-trigger` delay and loading indicators.

![Active Search](docs/screenshots/active-search.png)

### Click to Edit

Inline editing with `hx-get`/`hx-put` and `outerHTML` swaps between view and edit modes.

![Click to Edit](docs/screenshots/click-to-edit.png)

### Bulk Update

Select multiple contacts and toggle their status in batch using `hx-include` and targeted `hx-target`.

![Bulk Update](docs/screenshots/bulk-update.png)

### Infinite Scroll

Automatic pagination that loads more rows as you scroll, using `hx-trigger="revealed"`.

![Infinite Scroll](docs/screenshots/infinite-scroll.png)

### Delete Row

Confirmation dialogs with `hx-confirm` and smooth CSS fade-out transitions on `hx-delete`.

![Delete Row](docs/screenshots/delete-row.png)

### Lazy Loading

Deferred content loading with `hx-trigger="load"` and spinners for expensive operations.

![Lazy Loading](docs/screenshots/lazy-loading.png)

Each pattern page includes a "View source pattern" section showing the key HTMX attributes used.

## Running

```bash

# Linux / macOS

./gradlew bootRun

# Windows

gradlew.bat bootRun

```

Then visit http://localhost:8080/ in your browser.

## Tech Stack

- Spring Boot 3.5 with WebFlux

- Kotlin 2.0

- kotlinx.html 0.12 (type-safe HTML DSL)

- HTMX 2.0

- Pico CSS 2 (classless CSS framework)

## License

See [LICENSE](LICENSE).