Building a simple Notepad clone with PyQt5

Notepad doesn't need much introduction. It's a plaintext editor that's been part of Windows since the beginning, and similar applications exist in every GUI desktop ever created.

Here we reimplement Notepad in Python using PyQt, a task that is made particularly easy by Qt providing a text editor widget. A few signal-hookups is all that is needed to implement a fully working app.

The Editor

The full source code for No2Pads is available in the 15 minute apps repository. You can download/clone to get a working copy, then install requirements using:

python

pip3 install -r requirements.txt

You can then run No2Pads with:

python

python3 notepad.py

Read on for a walkthrough of how the code works.

Editor

Qt provides a complete plain text editor component widget in the form of QPlainTextEdit. This widget displays an editing area in which you can type, click around and select text.

To add the widget to our window, we just create it as normal and then set it in the central widget position for the window. We don't need a layout, since we won't be adding any other widgets.

Over 10,000 developers have bought Create GUI Applications with Python & Qt!

[[ discount.discount_pc ]]% OFF for the next [[ discount.duration ]] [[discount.description ]] with the code [[ discount.coupon_code ]]

Purchasing Power Parity

Developers in [[ country ]] get [[ discount.discount_pc ]]% OFF on all books & courses with code [[ discount.coupon_code ]]

We also setup the editor to use the system fixed width font QFontDatabase.FixedFont at pointsize 12.

python

from PyQt5.QtGui import *
from PyQt5.QtWidgets import *
from PyQt5.QtCore import *
from PyQt5.QtPrintSupport import *

import os
import sys


class MainWindow(QMainWindow):

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)

        self.editor = QPlainTextEdit()  # Could also use a QTextEdit and set self.editor.setAcceptRichText(False)
        self.setCentralWidget(self.editor)

        # Setup the QTextEdit editor configuration
        fixedfont = QFontDatabase.systemFont(QFontDatabase.FixedFont)
        fixedfont.setPointSize(12)
        self.editor.setFont(fixedfont)

        # self.path holds the path of the currently open file.
        # If none, we haven't got a file open yet (or creating new).
        self.path = None

Edit commands

To be useful an editor needs to be able to perform a lot of standard operations — copy, paste, cut, insert, clear. Implementing all these operations on the text buffer directly would take some work. However, the QPlainTextEdit widget actually provides support for all of this through Qt slots.

Triggering any of these operations is simply a case of calling one the slot at the appropriate time. Below we add a set of toolbar buttons for editing, each defined as a QAction. Connecting the .triggered signal from the QAction to the relevant slot enables the behaviour.

python

cut_action = QAction(QIcon(os.path.join('images', 'scissors.png')), "Cut", self)
        cut_action.setStatusTip("Cut selected text")
        cut_action.triggered.connect(self.editor.cut)
        edit_toolbar.addAction(cut_action)
        edit_menu.addAction(cut_action)

        copy_action = QAction(QIcon(os.path.join('images', 'document-copy.png')), "Copy", self)
        copy_action.setStatusTip("Copy selected text")
        copy_action.triggered.connect(self.editor.copy)
        edit_toolbar.addAction(copy_action)
        edit_menu.addAction(copy_action)

        paste_action = QAction(QIcon(os.path.join('images', 'clipboard-paste-document-text.png')), "Paste", self)
        paste_action.setStatusTip("Paste from clipboard")
        paste_action.triggered.connect(self.editor.paste)
        edit_toolbar.addAction(paste_action)
        edit_menu.addAction(paste_action)

        select_action = QAction(QIcon(os.path.join('images', 'selection-input.png')), "Select all", self)
        select_action.setStatusTip("Select all text")
        select_action.triggered.connect(self.editor.selectAll)
        edit_menu.addAction(select_action)

The complete list of slots available on a QPlainTextEdit are —

Slot	Operation
`.clear()`	Clear selected text
`.cut()`	Cut selected text to clipboard
`.copy()`	Copy selected text to clipboard
`.paste()`	Paste clipboard at cursor
`.undo()`	Undo last action
`.redo()`	Redo last undo'd action
`.insertPlainText(text)`	Insert plain text at cursor
`.selectAll()`	Select all text in document

There are also a set of signals available, such as `.copyAvailable` to update the UI when these operations are possible. You can use these to enable and disable buttons when they can't be used.

File operations

To complete a working text editor we need to be able to open and save files we're working on. There are no built-in handlers for doing this, but we can construct a simple slots ourselves, and trigger then using menubar actions as before.

First we define file_open method, which when run uses QFileDialog.getOpenFileName to display a platform file open dialog. The selected path is then used to open the file (using Python file context).

If that completes without throwing any errors, we set the contents to the text editor widget. Finally, we store the file path (so Save writes to the correct place) and update the window title.

python

def file_open(self):
        path, _ = QFileDialog.getOpenFileName(self, "Open file", "", "Text documents (*.txt);All files (*.*)")

        if path:
            try:
                with open(path, 'rU') as f:
                    text = f.read()

            except Exception as e:
                self.dialog_critical(str(e))

            else:
                self.path = path
                self.editor.setPlainText(text)
                self.update_title()

There are two blocks for saving files — save and save_as — the former for saving an open file, which already has a filename, the latter for saving a new file.

The save block checks whether we have a known path, stored in self.path. If not, it calls save_as itself to show a dialog to get a path. Opting to "Save As" will follow this same path.

In either case, the save itself is handled by _save_to_path() which accepts a target path. It gets the current plain text content of the editor, and then opening a file, writes it to disk.

Errors are displayed using a dialog box callback. If we saved successfully we store the path for future Save calls and update the window title.

python

def file_save(self):
        if self.path is None:
            # If we do not have a path, we need to use Save As.
            return self.file_saveas()

        self._save_to_path(self.path)

    def file_saveas(self):
        path, _ = QFileDialog.getSaveFileName(self, "Save file", "", "Text documents (*.txt);All files (*.*)")

        if not path:
            # If dialog is cancelled, will return ''
            return

        self._save_to_path(self.path)

    def _save_to_path(self, path):
        text = self.editor.toPlainText()
        try:
            with open(path, 'w') as f:
                f.write(text)

        except Exception as e:
            self.dialog_critical(str(e))

        else:
            self.path = path
            self.update_title()

Printing is fairly straightforward to set up for the QPlainTextEdit class. First we show a dialog box to allow the user to select the printer and options. If they click OK on this dialog, it exits with a True state and the selected printer is available via dlg.printer(). Pass this to the editor's print_() method to trigger the print.

python

def file_print(self):
        dlg = QPrintDialog()
        if dlg.exec_():
            self.editor.print_(dlg.printer())

The final step is to hook these all up to QAction.triggered signals in our menubar.

python

file_toolbar = QToolBar("File")
        file_toolbar.setIconSize(QSize(14, 14))
        self.addToolBar(file_toolbar)
        file_menu = self.menuBar().addMenu("&File")

        open_file_action = QAction(QIcon(os.path.join('images', 'blue-folder-open-document.png')), "Open file...", self)
        open_file_action.setStatusTip("Open file")
        open_file_action.triggered.connect(self.file_open)
        file_menu.addAction(open_file_action)
        file_toolbar.addAction(open_file_action)

        save_file_action = QAction(QIcon(os.path.join('images', 'disk.png')), "Save", self)
        save_file_action.setStatusTip("Save current page")
        save_file_action.triggered.connect(self.file_save)
        file_menu.addAction(save_file_action)
        file_toolbar.addAction(save_file_action)

        saveas_file_action = QAction(QIcon(os.path.join('images', 'disk--pencil.png')), "Save As...", self)
        saveas_file_action.setStatusTip("Save current page to specified file")
        saveas_file_action.triggered.connect(self.file_saveas)
        file_menu.addAction(saveas_file_action)
        file_toolbar.addAction(saveas_file_action)

        print_action = QAction(QIcon(os.path.join('images', 'printer.png')), "Print...", self)
        print_action.setStatusTip("Print current page")
        print_action.triggered.connect(self.file_print)
        file_menu.addAction(print_action)
        file_toolbar.addAction(print_action)

Future ideas

That's a basic functional text editor implemented. You could extend the No2Pads to support —

Implement clear and clear all from the edit slots
Add support for configurable display colours, styles, etc. Take a look at the Qt styles framework.
Add support for syntax or Markdown formatting.

For an example of a Rich Text Editor, check out Megasolid Idiom, a Rich Text Editor

Well done, you've finished this tutorial! Mark As Complete

[[ user.completed.length ]] completed [[ user.streak+1 ]] day streak

No2Pads, a simple Notepad clone

The Editor

Editor

Purchasing Power Parity

Edit commands

File operations

Future ideas

PyQt6 Crash Course — a new tutorial in your Inbox every day