starred/netbox
1
0
Fork 0
mirror of https://github.com/netbox-community/netbox.git synced 2026-01-11 21:10:29 +01:00
Code Issues 273 Packages Projects Releases 10 Wiki Activity

Use HTMX for general UI navigation #9064

New Issue
Closed
opened 2025-12-29 20:45:00 +01:00 by adam · 3 comments
adam commented 2025-12-29 20:45:00 +01:00
Owner
Copy Link

Originally created by @jeremystretch on GitHub (Jan 8, 2024).

Originally assigned to: @jeremystretch on GitHub.

NetBox version

v3.7.0

Feature type

New functionality

Proposed functionality

NetBox has employed HTMX in several areas of the UI for a while now, to improve responsiveness. These areas include:

  • Sorting/filtering lists of objects
  • Re-rendering object edit forms
  • Providing deletion confirmation dialogs

This proposal seeks to extend the use of HTMX across the entire application, leveraging it for nearly all views. For instance, clicking a navigation menu link would replace only the main portion of the page with new content, avoiding a full page refresh.

Use case

HTMX strikes a very natural balance between traditional full-page rendering and reactive SPA frameworks, returning only the portion of HTML content necessary to update the page. This provides a much more seamless user experience, and can significantly reduce page load times. These gains can be achieved with relatively little backend work, leveraging existing HTML templates.

Database changes

None

External dependencies

We'll use the django-htmx package per #14735.

Originally created by @jeremystretch on GitHub (Jan 8, 2024). Originally assigned to: @jeremystretch on GitHub. ### NetBox version v3.7.0 ### Feature type New functionality ### Proposed functionality NetBox has employed [HTMX](https://htmx.org/) in several areas of the UI for a while now, to improve responsiveness. These areas include: * Sorting/filtering lists of objects * Re-rendering object edit forms * Providing deletion confirmation dialogs This proposal seeks to extend the use of HTMX across the entire application, leveraging it for nearly all views. For instance, clicking a navigation menu link would replace only the main portion of the page with new content, avoiding a full page refresh. ### Use case HTMX strikes a very natural balance between traditional full-page rendering and reactive SPA frameworks, returning only the portion of HTML content necessary to update the page. This provides a much more seamless user experience, and can significantly reduce page load times. These gains can be achieved with relatively little backend work, leveraging existing HTML templates. ### Database changes None ### External dependencies We'll use the [`django-htmx` package](https://github.com/adamchainz/django-htmx) per #14735.
adam added the status: acceptedtype: feature labels 2025-12-29 20:45:00 +01:00
adam closed this issue 2025-12-29 20:45:00 +01:00
adam commented 2025-12-29 20:45:01 +01:00
Author
Owner
Copy Link

@jeremystretch commented on GitHub (Jan 8, 2024):

Marking this as blocked by #14735 for now.

@jeremystretch commented on GitHub (Jan 8, 2024): Marking this as blocked by #14735 for now.
adam commented 2025-12-29 20:45:01 +01:00
Author
Owner
Copy Link

@jeremystretch commented on GitHub (Feb 1, 2024):

I'm planning a phased approach to implementing HTMX.

Phase 1 (v4.0)

  • Minimally extend existing template structure to add HTMX-specific containers (e.g. for page content)
  • "Boost" links in nav menu & page (exclude footer)
  • Employ hx-select to swap in only the relevant HTML content from an HTTP response
  • Protect embedded tables from replacing the entire page content on load

Phase 2 (v4.1+)

  • Rearchitect views & templates to support true partial rendering

This approach should allow us to implement HTMX application-wide with a relatively light touch, while retaining full HTML rendering by default for backward compatibility.

@jeremystretch commented on GitHub (Feb 1, 2024): I'm planning a phased approach to implementing HTMX. #### Phase 1 (v4.0) - Minimally extend existing template structure to add HTMX-specific containers (e.g. for page content) - "[Boost](https://htmx.org/attributes/hx-boost/)" links in nav menu & page (exclude footer) - Employ [`hx-select`](https://htmx.org/attributes/hx-select/) to swap in only the relevant HTML content from an HTTP response - Protect embedded tables from replacing the entire page content on load #### Phase 2 (v4.1+) - Rearchitect views & templates to support true partial rendering This approach should allow us to implement HTMX application-wide with a relatively light touch, while retaining full HTML rendering by default for backward compatibility.
adam commented 2025-12-29 20:45:02 +01:00
Author
Owner
Copy Link

@jeremystretch commented on GitHub (Feb 23, 2024):

Here's a great, quick intro to HTMX for the uninitiated: https://youtu.be/r-GSGH2RxJs

@jeremystretch commented on GitHub (Feb 23, 2024): Here's a great, quick intro to HTMX for the uninitiated: https://youtu.be/r-GSGH2RxJs
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
beta
breaking change
complexity: high
complexity: low
complexity: medium
needs milestone
netbox
pending closure
plugin candidate
pull-request
Mirrored from GitHub Pull Request
 severity: high
severity: low
severity: medium
status: accepted
status: backlog
status: blocked
status: duplicate
status: needs owner
status: needs triage
status: revisions needed
status: under review
topic: GraphQL
topic: Internationalization
topic: OpenAPI
topic: UI/UX
topic: cabling
topic: event rules
topic: htmx navigation
topic: industrialization
topic: migrations
topic: plugins
topic: scripts
topic: templating
topic: testing
type: bug
type: deprecation
type: documentation
type: feature
type: housekeeping
type: translation
No Label status: accepted type: feature
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
adam
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/netbox#9064
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?