Build a small web app from chat
Ask the Code agent for a one-page tool and watch its files arrive in the Code editor.
✦ Course · Intermediate
Build, run and debug code in the Code editor
Build a small web app from chat, edit and preview it, run scripts in an isolated sandbox, fix errors with auto-fix and step through a Node.js script.
Start courseYOUR OUTCOME
By the end you will have built and previewed a small web app, run a Python script that writes a file and used breakpoints, watches and program output to find a bug in a Node.js script.
Build and edit a web app from chat Preview, run and auto-fix your code Debug Node.js with breakpoints and watches
7 min
Work in the Files tab and editor
Move around the project tree and file tabs, and ask about code you didn't write.
Preview HTML, CSS and JavaScript
Check each change in Preview, where the page runs with its own stylesheet and scripts.
Run Python, JavaScript and other scripts
Press Run to execute a script in Terminal and download any file it writes.
Fix preview errors with auto-fix
Let auto-fix patch a runtime error in Preview, then check or undo what it changed.
Save, download and export the project
Save the files to your account, then download one file or the whole project as a zip.
Step through a Node.js script with breakpoints
Set breakpoints in a JavaScript file and move through a live Node.js session line by line.
Read variables, watches and program output
Read the paused frame's values and add watch expressions to find where a number goes wrong.
What each lesson covers
The course, lesson by lesson.
Build a small web app from chat
Ask the Code agent for a one-page tool and watch its files arrive in the Code editor.
This course uses the Code editor in the desktop workspace on a computer. The phone has its own Code Editor with a different set of tools, and this course doesn't cover it. Open the response mode menu in the composer and choose Code agent, the mode that builds web apps and multi-file projects. Then describe the page, the inputs it needs and the sums it should do. The agent writes the files, and they appear in the Code editor as it works. It picks the file names and wording itself, so read through what it made before anyone relies on it. When it finishes, the chat shows a Project ready card with the file count, Open in CodePane to load the files into the pane again, and Download zip. The editor starts on Preview, where the page runs. While the pane is open the composer carries an editing chip with the file's name, so your next message changes these files instead of starting a new project.
Practice. Choose Code agent and ask for a one-page tool from your own work, with its inputs and the sum it should do. When the files arrive, click Files to see them in the tree, then go back to Preview and try a few numbers.
Build a one-page catering order calculator for Harbour Street Bakery. Inputs for meat pies at $8.50, sausage rolls at $4.50 and lamingtons at $3.75, plus a discount percentage. Show the total including 10% GST, and keep the HTML, CSS and JavaScript in separate files.
Work in the Files tab and editor
Move around the project tree and file tabs, and ask about code you didn't write.
You edit code only in the Files tab. Click Files to see the project tree on the left and the selected file on the right, with its path, line count and language above the code. Open a file from the tree or from the tabs across the top of the pane. An amber dot on a tab marks a file you've changed, and the line under the pane counts the pending changes. Hover a row in the tree for Rename file and Delete file, and add a file with New file in More tools (the three-dot button). The × on a tab only closes the tab. The file stays in the project, and clicking it in the tree opens it again. With the cursor in the code, Ctrl+Shift+F searches every file. For code the agent wrote, Ask sends your question with the open file and prints the answer in Terminal. At dock width Ask sits in More tools as Ask a question about the open file.
Practice. Open app.js from the tree, close its tab with × and open it again from the tree. Change the starting discount in index.html from 10 to 15 and watch the amber dot appear, then search every file for GST_RATE with Ctrl+Shift+F.
Open app.js, choose Ask a question about the open file in More tools and type: Where does the discount come off the total?
Preview HTML, CSS and JavaScript
Check each change in Preview, where the page runs with its own stylesheet and scripts.
Preview runs your HTML, CSS and JavaScript in a frame inside the pane. For a project with several files it puts index.html together with its stylesheet and scripts, and the address pill shows the folder and file, such as harbour-catering/index.html · preview. A green ● live means the file can run here, and ● not runnable means Preview shows the source instead. Preview redraws each time you switch to it, so edit in Files and then click Preview, or press ⟳ in the preview bar to load it again. Links between your own HTML files work inside the frame, with ‹ and › to go back and forward. A stylesheet on its own previews against a sample page. A project with a package.json needs a cloud build, and Preview shows a card with Run for that instead of the page. Errors thrown by the page's JavaScript are collected for auto-fix, which lesson 5 covers.
Practice. Change the heading colour in styles.css, click Preview and check it. Then type new quantities into the page and watch the total follow.
In styles.css, change the h1 colour from #7a3e1d to #1f5f4a. Click Preview, then change Sausage roll to 60.
Run Python, JavaScript and other scripts
Press Run to execute a script in Terminal and download any file it writes.
Press Run or Ctrl+Enter and the pane switches to Terminal. Plain JavaScript runs in your browser, without require or other Node.js features. A script that uses require, module.exports or process, or ends in .cjs or .mjs, runs under Node.js in Oppermind's isolated sandbox instead, with the project files it requires. Python, TypeScript, C and C++ files run in the same sandbox when it has them installed, and the line under the pane reads Run · ● runs in the sandbox. For a language it lacks, such as Go, Terminal says so and lists what can run, and the line shows ● not runnable. Sandbox runs stop after 45 seconds and end with the exit code and run time. You can't type input, so a script that calls input() stops with an error. Any file a sandbox run writes comes back in Terminal with a download link, marked created, or changed if the program rewrote a project file. Images show there too. Nothing is written back to the project.
Practice. Start a new chat, open Code from the + at the end of the dock tabs, add weekly_orders.py with New file and paste Tom's script. Press Run, click the download link in Terminal and open the CSV. Then press Ctrl+Shift+Enter, which runs the same file in your browser, and notice that no file comes back that way.
Tom, who does the bakery's paperwork, saves this as weekly_orders.py and presses Run: import csv orders = [("Mon", "Tidewater Surf Club", 184.50), ("Wed", "Kellett Street Primary", 262.00), ("Fri", "Tidewater Surf Club", 390.56)] totals = {} for day, client, amount in orders: totals[client] = totals.get(client, 0) + amount with open("weekly_totals.csv", "w", newline="") as f: writer = csv.writer(f) writer.writerow(["client", "total"]) for client, amount in sorted(totals.items()): print(f"{client}: ${amount:.2f}") writer.writerow([client, f"{amount:.2f}"])
Fix preview errors with auto-fix
Let auto-fix patch a runtime error in Preview, then check or undo what it changed.
When the page in Preview throws an error, a red dot appears on the Preview tab and Terminal gains a Problems list. While Preview is open, the editor sends the error and the file open in the editor to the AI just over half a second later, applies the fix and runs the page again. Click the red dot, or Auto-fix in the Problems list, to open Auto-heal preview with the errors and the attempts used so far. Auto-fix only changes the file open in the editor, so open the file the error comes from first. Guards limit what it can do. After three attempts on the same error it stops and says a manual fix is needed, with Reset retries if you want more. It won't send a file over 200,000 characters. If the reply is less than half the length of a file over 2,000 characters, nothing is changed. Open Diff to see what a fix changed, and Revert to put the file back.
Practice. Rename the total's id in index.html so the script can't find it, open app.js, then click Preview. Let auto-fix run, or click the red dot and Auto-fix, then open Diff and read the change before you keep it.
Tom changes the total's id in index.html to order-total, opens app.js from its tab, then clicks Preview.
Save, download and export the project
Save the files to your account, then download one file or the whole project as a zip.
Press Ctrl+S, or choose Save in More tools, to save every open file to your Oppermind account so the project opens on your other devices. Read the message that pops up. Saved means the files reached your account. Saved locally means you're offline and the copy is in this browser only. If the upload fails while you're online, the save pill turns red and reads Saved on this device only, so your other devices won't see the change yet. Download in the same menu saves the open file. For the whole project, click Zip at the top of the file tree, or Download zip on the chat's Project ready card. For a project the agent built, Zip fetches the files from its workspace, images included, and leaves out the agent's own working files. A project with more than 500 files downloads cut short, with a note saying so. History checkpoints, breakpoints, watch expressions and marks stay in this browser and don't go in the zip.
Practice. Save with Ctrl+S and check the message says Saved, then click Zip and open the download on your computer to check every file is there. Then choose Save as App in More tools, name it Catering calculator and find it under + and Apps in the composer.
Press Ctrl+S, then click Zip at the top of the Files tree.
Step through a Node.js script with breakpoints
Set breakpoints in a JavaScript file and move through a live Node.js session line by line.
The Debug tab runs a JavaScript file in Node.js inside the isolated sandbox. Write it as CommonJS, since import and export lines fail there, and keep the file under 1 MB. The project's other files go with it, so require('./prices') works, but breakpoints only stop in the file you started from. Click a line number in Files, or put the cursor on the line and press F9, and a red dot marks a breakpoint. Press F5 or open the Debug tab to start. The session starts paused on line 1, with the status Debug session attached. Continue (Shift+F5) runs to the next breakpoint. Step over (F10) runs the current line, Step into (F11) goes inside a function call and Step out (Shift+F11) finishes it. Breakpoints you add or remove mid-session count straight away, but code edits don't, so after an edit press Detach and start again. In Files, the paused line shows yellow with a green arrow, and it stays marked when you switch tabs and come back.
Practice. In a new chat, add order-total.js with New file and paste Tom's script. Run it once and read the total. Set a breakpoint on line 12, press F5 and click Continue in the Debug tab. Then click Files, press F9 on line 13 and press Shift+F5 to run on to it.
Run order-total.js first. Terminal prints -3905.55, a negative total for a $394.50 order. Click line number 12, press F5, click Continue in the Debug tab, then click Files.
Read variables, watches and program output
Read the paused frame's values and add watch expressions to find where a number goes wrong.
While a session is paused, Variables lists the values in scope at the current line, headed frame · line 12, with each value's type in a small tag before its name. Watch holds expressions you want to follow. Click Add, type something like subtotal * discount, and it's worked out again at every step. Watch expressions can only read. Anything that would change the program, such as subtotal++ or a call that writes, comes back as an error instead of running. While the program is running rather than paused, each watch shows Program is not paused. Program output, under Variables, collects what the program prints, so a console.log line shows up there once the program reaches it. When the program ends, the status gives its exit code, such as Program exited with code 0., and the Breakpoints bar says Program finished. Press Detach when you're done. A session also ends by itself after 10 minutes without activity, and the next step then fails with Debug session not found.
Practice. With the session paused on line 12, add subtotal * discount and discount < 1 as watches. Step over once and compare the watches with Variables, then press Continue until the program ends and read Program output.
In Watch, click Add and enter subtotal * discount, then add discount < 1.
Keep going
Make the learning stick
Start with one real piece of work.
Open Oppermind beside the lesson, apply each step, and leave with something you can use.