PyCharm 2024.1 Help

Live preview of Django templates

Enable the Django plugin

This functionality relies on the Django plugin, which is bundled and enabled in PyCharm by default. If the relevant features aren't available, make sure that you didn't disable the plugin.

  1. Press Ctrl+Alt+S to open settings and then select Plugins.

  2. Open the Installed tab, find the Django plugin, and select the checkbox next to the plugin name.

PyCharm lets you preview Django templates while editing them. The preview is shown automatically when you open a template in the editor.

Preview a Django template

  1. Open the template in the editor. If the template is associated with an URL pattern, the preview will be displayed automatically.

  2. You can toggle the preview mode by using the selector in the top-right corner of the editor.

    Django template preview

    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

  3. Depending on the URLs defined in urlpatterns, you may need to specify URL parameters to preview the template.

    Specifying URL parameters for Django template preview
  4. 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 include http://localhost:8000/).

  5. 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.

    Selecting the URL in the address bar

Split editor and preview horizontally

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.

  1. In the top-right corner of the editor, click the Open Editor Preview button to open the Editor Preview pane.

  2. Click the Open Editor Preview button to split the editor and the preview horizontally.

Horizontal preview of a Django template
Last modified: 29 March 2024