A text box that feels like a real code editor
A student types code into a plain box. We made it a small code editor, so that Visual Studio Code or any other editor is not new when they get there.
3 min read
Every exercise in Shapi-Lumda has a box where you type code. It could have been a plain text box. It is a small code editor instead, just the text part, with the look and the helpers that professional editors give.
Key points
- The reason: a student who meets the look and the helpers of a real editor here will not be surprised when they move to Visual Studio Code, a JetBrains editor or any other.
- It is only the part where you type.
- It has line numbers, colours for the parts of code, brackets that close themselves, warnings in Hebrew or English, and suggestions for JavaScript.
- The suggestions come from TypeScript, working in a background helper (a worker), and were added on 19 July 2026.
Why not a plain box
A student has enough to learn. The first time they open a real editor, we would like the colours, the line numbers and the little pop-up suggestions to look like old friends. So the box the student types in already has them.
What is in the box
The editor is built with CodeMirror (opens in a new tab), and it has:
- line numbers and colours that show what each part of the code is;
- dark colours like those of many professional editors;
- matching brackets that light up, and brackets that close themselves;
- long sections of code that can be collapsed to one line, and search;
- for HTML and CSS, Emmet (opens in a new tab) shortcuts, which expand a few characters into a whole piece of code, with a help dialog that explains them;
- for JavaScript, suggestions as you type (autocomplete), which come from TypeScript working in a background helper (a worker).
What is TypeScript?
TypeScript is a programming language built on top of JavaScript that adds a few extra rules. Editors can use those rules to guess what you are about to type and to spot mistakes early.
What is a worker?
A worker, which we also call a background helper, is a small program that the browser runs separately from the page you are looking at, so that heavy work does not freeze the page. It cannot touch the page itself.
Warnings in the student’s language
For JavaScript the editor underlines a few things as you type, and explains them in Hebrew or in English. It flags three things: a typing mistake that breaks the code (a syntax error), a variable that was never declared, and the old var keyword, which gets a warning because the course teaches const and let first.
What is a variable?
A variable is a name for a value the program wants to remember, like a labelled jar on a shelf. Declaring a variable means telling the program the jar exists before using it. A “variable that was never declared” is a jar the code reaches for without ever putting it on the shelf.
What we left out
A real editor also has files, folders, menus and a terminal, the window where you type commands. We left all of that out. The box is only the part where you write the code, because that is the part a student spends the time in.
One more thing the course teaches
The JavaScript track has a chapter about tools, with a lesson on editors that names Visual Studio Code and suggests an extension that points out style problems before you run the code. So the box and the lesson say the same thing from two sides.
What is a linter?
A linter is a helper that reads your code without running it and points out mistakes and untidy habits, the way a spell checker underlines words. An extension is a small add-on you install in an editor to give it a new ability, and the one the lesson suggests is a linter for style.
Nothing in this story matches your search.
Read next
From video calls to a course you can do on your ownWe started teaching our first student on video calls. The format did not fit, so we built something you read, try, check and move on from, at your own pace.
Checking the answer on the student's own deviceWhen you press the button, your browser checks your code in its own isolated space. We saw it could be done, built our own test engine, and rebuilt it when we found it marked right answers wrong.