Live preview of Django templates
Available only in PyCharm Professional: download to try or compare editions
PyCharm lets you preview Django templates while editing them. The preview is shown automatically when you open a template in the editor.
note
The preview is available only if the template is located in a directory marked as a template folder.
Open the template in the editor. If the template is associated with an URL pattern, the preview will be displayed automatically.
You can toggle the preview mode by using the selector in the top-right corner of the editor.
Select one the following modes:
Editor - to show only the editor
Editor and Preview - to show the editor the editor and the preview
Preview - to show only the preview
Depending on the URLs defined in
urlpatterns
, you may need to specify URL parameters to preview the template.You can specify an arbitrary URL in the address bar. If it matches any URL pattern, the preview of the corresponding template will be shown.
When doing so, provide the URL without the
address:port
part (for example, do not includehttp://localhost:8000/
).A template may be associated with several URL patterns. To view the template as rendered for a specific URL, expand the address bar and select the desired pattern.
note
To see the changes in templates after editing Python files in your Django project (for example, urls.py or views.py), restart the Django server by clicking
Rerun in the run widget at the top of the PyCharm window.
By default, the editor and the preview are split vertically (side by side), which is convenient for wide monitors. You can also split it horizontally, so that the preview is displayed in the lower part of the editor, which is more convenient for portrait displays.
In the top-right corner of the editor, click
to open the Editor Preview pane.
Click
to split the editor and the preview horizontally.

Thanks for your feedback!