An IDE in the Browser for Your Backend Code: Go to Definition, Search, Git Blame

Intro

0:00 The IDE of the admin panel. Every file of your code in one editor : tabs, search, go to definition in every language, the debugger, and who wrote each line.

Code, one page at a time

0:12 Changing the code of a backend usually means a clone of the repository on each laptop, with the toolchain of each language, a web editor which shows one file at a time, a search which stops at the page you are on, and no way to jump from a call to the code it calls. With API Maker, every code editor of the panel opens an IDE, with every file of your account, in tabs, search, and go to definition in every language, and the debugger and the history of git, in the same window.

0:44 In this video : the IDE around a page, go to definition, back and forward, go to file, and search, a save and a run, the debugger, who wrote each line, and the IDE page of the dashboard.

The IDE around a page

0:57 API Testing, Custom APIs, Order Quote : the quote of a cart, in TypeScript. Its code. Every code editor of the panel has three buttons now : Types loads its types again, IDE opens the IDE, and the zoom fills the page. IDE. The code of the page is the first tab, pinned : the page still saves it. Around it, the files of your repository, as git keeps them : a folder for each kind of item, custom APIs, utility classes, schemas, migrations, and at the root, the projects of each language.

1:36 The other files of the page's item are read only here : its page saves them. And below, the tabs of API Testing.

Go to definition

1:46 Order Quote calls the utility class Tax. A click on add, F12 : the class opens in a tab of its own, at its method, and the explorer shows where it lives. Back goes to the code of the page, and forward again. Back and forward walk through every place you went, across files.

Go to file, and search

2:05 Command P : go to file. A few letters of a name, in order, and Order Status opens : a custom API in Python. It rounds with cents, and F12 opens the utility class Rounding, in Python too. Go to definition works in all eight languages : a name of the same file, a utility class, or the declarations of API Maker. Command Shift F searches every file at once.

2:33 The word round : the lines of the class in TypeScript, of the class in Python, and of the API which uses it, with match case, whole word and regular expressions. A click opens the file, at its line.

A save and a run

2:46 Now a change. In the explorer, utility classes, pricing, Tax. The tax of home goods drops to twelve percent. The dot on the tab : not saved yet. Command S saves it into the utility class, with the checks of its page, and every editor gets its new types. Back to Order Quote. Send, in the bar of the IDE : the answer arrives in the panel below the editor, with the new tax.

3:15 The panel holds the tabs of API Testing : the response, the logs, the docs, and Index Maker, with the database calls of the run. Command J folds it away.

The debugger

3:27 With debugging on, the IDE is a debugger too. A click in the margin sets a breakpoint. Send : the code stops on the line. The bar of the IDE holds Continue and the steps, the values sit at the ends of the lines, and the Debug tab shows the variables, the call stack and the console. Step over : the shipping. Step into : the debugger follows the code into the utility class Tax, in a tab of its own, at the line it runs, with its amount.

3:59 Continue, and the answer.

Who wrote each line

4:03 The account keeps its code in git. Option A annotates the file with git blame : each line says its day and its author, the colour its age. The lines of today say not committed yet. The mouse on Arjun's line : his commit, and its message. A click opens the history of the file at his commit : what it changed, the shipping fee. Nisha's first version, compared with the database : everything which changed since.

4:31 Revert writes a version back into the database, for you to review, and to commit. Close.

The IDE page

4:39 The IDE has a page of its own too. The tile IDE of the dashboard opens it on the whole repository, with no page around it. No file is open yet : go to file, tax, and it opens. Dashboard, in its bar, goes back where you came from.

Keys and saves

4:56 No key of the IDE is a key of the browser. Command P goes to a file, Command Shift F searches, Command B shows the side, Command J the panel, Option W closes a tab, Option A annotates, Command S saves, and Command Option S saves them all. On Windows and Linux : Control and Alt. Every save of the IDE goes through the checks of the page of its item : settings are checked, code is compiled.

5:23 A file saved somewhere else since you opened it asks what to keep, so nobody overwrites anybody by accident. And the code an AI assistant wrote is reviewed where it lives : with go to definition, the debugger, and who wrote each line.

Recap

5:39 To sum up. Every code editor opens an IDE around the code of its page. Go to definition, back and forward, in every language. Go to file, and search in every file. Saves into the items, runs in its panel, and the debugger. Who wrote each line, and the history of every file. Next : your own editor, in sync with API Maker. API Maker. Build faster, spend smarter, deliver better.