Skip to main content

Code Editor

At the heart of the Tutor IDE platform is a professional code editor that runs directly in the browser. Students don't need to install anything — they open the page, log in, and can start writing code right away.

A professional-grade editor​

The editor in Tutor IDE uses the same engine that powers Visual Studio Code — the most popular tool among professional developers worldwide. Students work in a real, professional environment, adapted for learning.

Syntax highlighting​

Code is displayed in colors that help distinguish HTML tags, CSS properties, and JavaScript statements. This makes it easier to spot errors and understand code structure.

Suggestions and autocomplete​

The editor suggests HTML tag names, CSS properties, and JavaScript functions as you type. It automatically closes brackets, quotes, and tags — fewer typos, more creating.

Emmet — fast HTML writing​

The editor supports Emmet — a shortcut system that speeds up writing HTML code. For example, typing div.container>h1+p and pressing Tab automatically expands into a full HTML structure with the appropriate tags and classes. This is a tool that professional developers use every day.

Keyboard shortcuts​

The editor supports a rich set of keyboard shortcuts that speed up your workflow:

  • Ctrl+S / Cmd+S — save file
  • Ctrl+Enter / Cmd+Enter — run code
  • Ctrl+Z / Cmd+Z — undo changes
  • Ctrl+C / Ctrl+V — copy and paste

A full list of shortcuts can be displayed by pressing Cmd+? (Mac) or Ctrl+? (Windows).

Project types​

Tutor IDE supports three distinct project types, each with a tailored working environment:

HTML — websites​

Build websites using HTML, CSS, and JavaScript. The editor displays a live preview of the page alongside the code — every change is visible instantly after saving the file.

Python — general programming​

Python projects run directly in the browser thanks to Pyodide — a full Python interpreter compiled to WebAssembly. Students can write scripts, work with loops, conditionals, functions, and data structures — without installing anything on their computer.

Python Turtle — turtle graphics​

A special mode for projects using the Turtle library. The editor automatically detects turtle code and displays a dynamic graphics canvas alongside the code. Students can draw shapes, patterns, and animations using simple commands — an excellent way to learn programming visually.

Python terminal (REPL)​

Tutor IDE includes a built-in Python terminal powered by Pyodide. Students can type Python commands and see results immediately — a perfect way to experiment with code, test expressions, and learn step by step. The terminal runs entirely in the browser, with no need to connect to a server.

Live preview​

A page preview is displayed next to the editor. The student writes code on the left and immediately sees the result on the right — every change in HTML or CSS appears instantly in the preview after saving the file.

This allows students to experiment and learn by trial and error — "I'll change the color to red and see what happens."

Device frame previewer​

The editor offers project previews in frames that simulate different devices — desktop, tablet, and mobile. This lets students check how their page looks on different screens without leaving the platform. It's a practical way to learn responsive web design.

Console​

The console panel captures and displays messages from JavaScript code (e.g., results from console.log). This lets the student test their scripts and track what their code does — without needing to open the browser's developer tools.

File tree​

Each project has a clear file and folder structure visible in the side panel:

  • File icons — HTML, CSS, JavaScript, Python, images, and other file types have their own icons for easy identification
  • Folders — students can organize files into folders, just like in a real project
  • Drag and drop — files can be moved between folders using the mouse
  • Main file — index.html is marked as the project's entry point

File management​

  • Creating files and folders — students add new HTML, CSS, JS, or Python files with a single click
  • Binary file uploads — images, fonts, PDFs, videos, and audio files can be uploaded directly to the project
  • Drag-and-drop upload — files can be dropped directly onto the file tree to upload them to the project
  • Deleting — unneeded files and folders can be easily removed

Search within files​

The editor includes a built-in code search feature that lets you quickly find code snippets, variable names, CSS selectors, or HTML tags across the entire project. This is an invaluable tool for larger projects where manually browsing through files would take too much time.

Resizable panels​

The editor interface is made up of resizable panels — students can drag the separator between the editor and preview to adjust proportions to their needs. Those who need more space for code can widen the editor; those who want a bigger preview can expand the preview panel. Panel sizes are powered by the react-resizable-panels library.

Mobile editor​

Tutor IDE also works on mobile devices. On screens smaller than 768px, the editor switches to a single-pane layout with a bottom tab bar:

  • Code — code editor view
  • Preview — page preview or Python output
  • Console — JavaScript console panel

The file tree opens as a slide-out side drawer. This allows students to work on projects even on a phone or tablet.

On the dashboard, students can quickly find their projects using the search bar and tag filtering. This is especially useful as the number of projects grows.

Storage space​

Each student has allocated storage space for their projects. The amount depends on the organization's plan — from 25 MB on the free plan to 100 MB on the school plan. Current storage usage is visible on the dashboard.

Project export​

Students can download an entire project as a ZIP file to their computer. The file contains all project files with the folder structure preserved — ready to open in any editor or upload to another hosting service.