For anyone reading the context of this exact post : - The method and code patterns in this post doesn’t work. I wrote them as a initial version only. It turns out the method & code wouldn’t work; most of the code is unnecessary. (as my understanding).
Thanks. 
.
------------------------------------------------
------------------------------------------------
“Google Summer of Code Project Proposal 2025: Adding a Command Palette to the Django Admin Interface”
Table of content
1.Abstract
- 1.1 Overview
- 1.2 Goals
- 1.3 Benefits
-
The solution
- 2.1 Create
command_palette.html.
- 2.2 Create a CSS file
command_palette.css.
- 2.3 Create a JavaScript file
command_palette.js
- 2.4 Link
command_palette.css and command_palette.js to the command_palette.html
- 2.5 Create a view in the admin app’s
views.py.
- 2.6 Adding the URL pattern in
urls.py.
- 2.7 Adopt the relevant code from django-admin-keyboard-shortcuts.
-
Schedule and milestones
-
About me
1.Abstract
1.1 Overview
The Django Admin interface is a powerful tool for managing application data, but its reliance on manual navigation can slow down power users.
In the current state of the Django admin, it becomes harder and harder to manage a database when the number of admin-registered models and apps goes higher.
A Command palette is the best battle-tested solution to improve the existing functionality and add more functionality.
This project proposes the implementation of a Command Palette, a centralized, keyboard-driven interface for quick access to common admin actions (navigation, object creation, search, etc.).
and
It can save time by reducing clicks, reducing the complexity, and making admin more user-friendly while not making any major changes to the existing UI.
Already, there is some initial work has been done in the django-admin-keyboard-shortcuts repository. But not implemented in the Django core.
So, this project aims to implement a full command palette to the Django admin core.
1.2 Goals
- Create a new template
command_palette.html in templates/admin directory.
- Create a CSS file
command_palette.css at static/admin/css/ styling the UI of the Command palette.
- Create a JavaScript file
command_palette.js at static/admin/js/ containing key bindings and Ajax.
- Link
command_palette.css and command_palette.js to the command_palette.html.
- Create a view in the admin app’s
views.py for command execution.
- Add the URL pattern in
urls.py for the command execution view.
- Adopt the code from django-admin-keyboard-shortcuts in relevant development steps.
- Users can set up custom key combinations or override.
1.3 Benefits
- Reduced scrolling / Reduced Manual page navigation
- Quick create, edit, and delete queries for single objects
- Quick create, update, and delete queries for multiple objects with patterns
- Custom key combination for existing functionality
- Custom key combination for custom queries/page navigation
2.The Solution
-
Frist we need to create a new template command_palette.html in templates/admin directory and add relevant html UI interface.
-
At the same time, we need to create a CSS file command_palette.css at static/admin/css/ and add it to the command_palette.html. Then make sure the default UI interface is in proper style for easy recognition in expected visual shape by adding relevant CSS code to the command_palette.css.
-
After the expected visual shape is achieved, we need to create a JavaScript file command_palette.js at static/admin/js/ containing key bindings and Ajax.
This command_palette.js should include the code for key binding triggering the UI, key bindings for the specific commands, and Ajax for accessing the view that will be created in the next steps, showing the results received from the server.
-
Then we need to link command_palette.css and command_palette.js to the command_palette.html.
-
Then we need to create a view in the admin app’s views.py for actual command execution. This view should include the code for the execution of specific queries, response to relevant results, relevant permissions checks, and relevant logic for proper code execution.
-
Then we need to link the view by Adding the URL pattern in urls.py for the command execution view.
-
Create a template tag command_palette_commands that will generate a list of all the required commands.
2.1 Create command_palette.html
We need to create a new template command_palette.html in templates/admin directory and add the relevant HTML UI interface.
{% extends "admin/base_site.html" %}
{% load static %}
{% block extrahead %}
{{ block.super }}
{% endblock %}
{% block content %}
{{ block.super }}
<div id="command-palette" class="command-palette">
<div class="command-palette-header">
<input type="text" id="command-search" placeholder="Search commands...">
</div>
<div class="command-list">
<!-- Commands will be populated here via JavaScript -->
</div>
</div>
{% endblock %}
{% block footer %}
{{ block.super }}
{% endblock %}
Note: Need to use the command_palette_commands template tag to make a list of commands as a javascript list.
2.2 Create a CSS file command_palette.css
Create a CSS file command_palette.css at static/admin/css/ styling the UI of the Command palette.
.command-palette {
display: none;
position: fixed;
top: 20%;
left: 50%;
transform: translateX(-50%);
width: 600px;
max-width: 90%;
background: white;
border: 1px solid #ddd;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
z-index: 10000;
}
.command-palette-header {
padding: 15px;
border-bottom: 1px solid #eee;
}
#command-search {
width: 100%;
padding: 10px;
font-size: 16px;
}
.command-list {
max-height: 400px;
overflow-y: auto;
}
.command-item {
padding: 10px 15px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}
.command-item:hover {
background-color: #f5f5f5;
}
.command-shortcut {
color: #666;
font-size: 0.9em;
}
Note: Initially, the command palette is hidden.
2.3 Create a JavaScript file command_palette.js
Create a JavaScript file command_palette.js at static/admin/js/ containing key bindings and Ajax.
document.addEventListener('DOMContentLoaded', function() {
const palette = document.getElementById('command-palette');
const searchInput = document.getElementById('command-search');
const commandList = document.querySelector('.command-list');
function renderCommands() {
...
...
});
});
}
// Toggle command palette
document.addEventListener('keydown', (e) => {
if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
e.preventDefault();
palette.style.display = 'block';
searchInput.focus();
}
});
// Close palette on ESC
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
palette.style.display = 'none';
}
});
// Search functionality
searchInput.addEventListener('input', (e) => {
const searchTerm = e.target.value.toLowerCase();
...
...
});
});
Note: Need to use the commands list generated inside command_palette.html and config the ajax requests accordingly.
2.4 Link command_palette.css and command_palette.js to the command_palette.html
{% extends "admin/base_site.html" %}
{% load static %}
{% block extrahead %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'admin/css/command_palette.css' %}">
{% endblock %}
...
...
{% block footer %}
{{ block.super }}
<script src="{% static 'admin/js/command_palette.js' %}"></script>
{% endblock %}
2.5 Create a view in admin app’s views.py
We need to create a view in the admin app’s views.py for the command execution.
from django.contrib.admin.sites import site
from django.http import JsonResponse
from django.contrib.auth.decorators import staff_member_required
@staff_member_required
def command_palette(request,command):
results=Run(command)
return JsonResponse({results})
2.6 Adding the URL pattern in urls.py
We are adding the URL pattern in urls.py to link the view to requests.
from django.urls import path
from .views import command_palette
urlpatterns = [
path('admin/command_palette/<path:command>', command_palette, name='command_palette'),
# ... other URLs
]
2.7 Allow Custom key combinations & override
Users can set up custom key combinations or override existing combinations with config dictionary from the settings.py.
3.Schedule and milestones
3.1 Discuss & Research(1-2 week)
- Discuss the methodology and procedures with senior developers or Mentors.
- Research and identify existing browser key combinations for all modern browsers.
- Research and recognize the most user-friendly key combinations.
- Recognise the most useful functionalities.
- Map key combinations to suitable functionalities.
- Write basic HTML,CSS,JS(1st versions of
command_palette.html , command_palette.css & command_palette.js).
- Create
command_palette_commands template tag.(1st version)
- Create the
views.py & URL pattern in urls.py(1st versions).
3.2 1st generation command run – first milestone
3.2.1 Modify the views.py & command_palette.html and command_palette_commands template tag. (1-2 week)
- Modify
command_palette_commands to generate 1st generation commands(without any db changes).
- Modify the
views.py for the 1st generation commands execution, redirects, and queries.
- Modify
command_palette.html to respond to app-specific, navigational, search commands.
3.3 2nd generation command run – second milestone
3.3.1 2nd generation commands and custom key combinations(2-4 weeks)
- Modify the
command_palette_commands to generate 2nd generation commands.
- Modify
command_palette.html to show command execution results in a result container.
- Let users define a list of key combinations and let them activate and deactivate the global availability of any key combination.
3.4 User guide, Testing and documentation
3.4.1 User guide(1 week)
- Modify
command_palette.html and add a user guide on how to use the command palette.
3.4.2 Testing and documentation(1.5-2 weeks)
- Testing for correct command generation, and correct command execution is needed to be done.
- Documentation for key combinations and use of command selection patterns is done.
4.About me
My name is Chathura and I am a self-taught Django developer. Studied 2 years in the Colombo University, Sir Lanka. I started my coding journey 6 years ago with Python, JavaScript, HTML, and CSS. I have been using Django for 5 years in various projects.
4.1 Personal Details
- Email : mcchathuer216@gmail.com
- Timezone : Indian Standard Time (UTC + 5:30)
- Primary Language : English
- Country of Residence : Sir Lanka
- Github Profile : ChathuraGH
- Stack Profile : Pycm
. I will post the proposal here.
