The Designer

The project list shows the workspace projects and those opened from other folders. At the top you see the Python found (Python and Tk versions) and the button to Look for Python again.

It is shown as a list with columns (Name, Type, Components, Modified and Folder) sorted by clicking their title, or as Cards. It has Search projects and is split into pages (Per page: 10, 15, 25 or 50). Double-click opens a project. Right-clicking a project offers Open, Run, Show the folder, GitHub…, AI budget, Duplicate and Delete; right-clicking the background, Add new › Desktop project (Python), Web project (Flask) or Open folder….

• New project: asks for the name and the target, Desktop (Python) or Web (Flask). The target cannot be changed later.
• Open folder…: opens a project stored in any other folder; it stays on the list as a recent one.
• Workspace: Show opens it in Finder or Explorer and Change… picks another folder.
• On each card: Run, Show the folder and, under More actions, GitHub…, AI budget, Duplicate and Delete (moves the project to the workspace trash).
• Tabs: each open project has its tab at the top, with a dot when there are unsaved changes. Several can be open at once; the Projects tab goes back to the list without closing anything. Close them with the ✕ or a middle click; they ask whether to save.

• Toolbar: back to the projects, application name (click to rename it), Save, Undo, Run (F9) in green, Stop in red, Open in browser (web), Show the project folder, Export the .py file, GitHub, AI budget, Ask the AI, Chat with Claude Code, alignment and centering, Snap to grid and Show output.
• Output console: at the bottom; drag its top edge to resize it, minimize it with the arrow, and Copy the output copies every message.
• Palette: a bar of icons; hovering shows the component's name. Drag it onto the form or add it with a double click.
• Tree: the window and its components, with those inside a frame or a page indented.
• Inspector: Properties and Events of the selected component or, if none, of the window.
• Center: Design, Code and Generated Python tabs. F12 switches between design and code.

Every component has a Name, a position and a size. Almost all accept Background color, Text color and font (Font, Font size, Bold, Italic), and the mouse events (Click, Double click, Right click, Mouse enter, Mouse leave). Typing components add the keyboard ones (Focus in, Focus out, Key down, Key up, Enter key).

• Click selects; dragging moves; the handles resize. With Snap to grid on, everything fits the grid.
• The arrow keys move the selection one grid step; with Alt (Option), one pixel; with Shift, they resize.
• With two or more components selected, Align left, Center horizontally, Align right, Align top, Center vertically, Align bottom, Same width and Same height become available (relative to the first one selected).
• With one or more selected, Center in the window (horizontally) and Center in the window (vertically) center them as a block in the window or in their frame.
• Right-click offers Cut, Copy, Paste, Delete, Bring to front and Send to back.
• Copy between projects: copied items go to the system clipboard, with their children and the code of their events. Paste them into another project (or after restarting the studio): components get free names and their methods are renamed with them, never overwriting an existing one. Helper methods called by those events must be copied by hand.
• Undo (⌘Z / Ctrl+Z) reverts each design change. If the code was edited by hand after a step, that step restores the design but not the code, and you are told so.

The window's Position property decides where it opens: Centered on screen (new projects), Default (the system decides) or Manual, with Left and Top.

The window's code is a Python class named after the form that inherits from FormDesign, the class the studio generates. self.root is the window and each component is self.<Name>.

• Double-clicking a component opens its main event (Button1_click, Listbox1_select…) and creates it if needed.
• On the inspector's Events tab you type or choose the method for each event; Go to code jumps to it.
• Renaming a component renames its default methods and the references in the code.
• The window has its own events: On open (form_create), On close, Key down and On resize, and its properties Title, Background color, Resizable and Always on top.

class Form1(FormDesign):
    def form_create(self):
        self.total = 0
        self.StatusBar1.config(text="Ready")

    def Button1_click(self):
        self.total += 1
        self.Label1.config(text=f"Clicked {self.total} times")

The Generated Python tab shows, read-only, the complete file that runs: the design turned into code plus your class. When you run, it is written to build/<project>.py inside the project folder.

Export the .py file saves that file wherever you want. It works with any Python 3 with tkinter (or Flask, for web apps) without the studio.

• Run (F9) saves the project and launches the window in its own system window, with your user's permissions.
• Stop closes the running window or server.
• Show output opens the panel with what the app writes (print, Python errors) and the Python used.
• For a web app, the studio starts the Flask server on this computer and opens the browser; Open in browser opens it again. It can only be reached from this computer.
• If a Python package is missing (Flask, the Anthropic SDK, a database driver or pystray), the studio says so before running and offers Install: it installs it with the pip of the same Python that runs the project and then carries on. You can also Copy the command to do it by hand.

They all keep their data in the project folder and work without any setup. Those marked (web) also exist as a Flask app.

1. Save the database in the Databases module (SQLite, PostgreSQL or MySQL/MariaDB).
2. Add a Data connection to the form and choose that connection in its Connection property.
3. Add a Data table, choose the connection in Data source and write the SQL query and the Columns (field|title|width).
4. To edit the selected row, link a Text field with Linked table and Linked field.

From code, self.Connection1.query(sql, params) returns rows and self.Connection1.execute(sql, params) changes data (always with ? parameters, never by joining text). self.Treeview1_refresh() reloads the table.

The HTML view shows HTML written by your code. With Full page (web) switched on, the whole page is that view: no form frame, its own CSS, like a normal website. The Web blog and Web shop examples are made this way.

• self.Site.set_html(html, top=True) changes the content (top goes back to the top of the page).
• A link or button with data-action="post" data-arg="7" calls the On clicking a link or sending a form event with an HtmlAction: action.name is post and action.arg is 7.
• A <form data-action="search"> sends its fields: read them with action.get("q") or in action.form.
• On the desktop, the view shows simple HTML (headings, paragraphs, lists, links and forms) in a text box; CSS styles only apply on the web.

import html

class Form1(FormDesign):
    def form_create(self):
        self.Site.set_html('<h1>Hello</h1><a href="#" data-action="greet">Greet</a>')

    def Site_action(self, action):
        if action.name == "greet":
            name = html.escape(action.get("name", "world"))
            self.Site.set_html("<h1>Hello, %s</h1>" % name, top=True)

The Web blog and Web shop come with user accounts: Sign up, Log in and Log out. Passwords are stored with PBKDF2 and a salt, never in clear text, and after five failed attempts you have to wait a minute. The first account to sign up is the administrator and sees the Dashboard: in the blog, posts, comments and user roles; in the shop, sales by category, orders and stock. In the shop, every customer sees their orders in My account.