JS Editor
The iwantcoding.com Tryit Editor is a split-pane sandbox: code on the left, live preview on the right, console below. The same UI works for every track.
What's in the editor
| Feature | How to use |
|---|---|
| HTML / CSS / JS tabs | Click a tab to switch panes — they all share one running document. |
| Run button | Top-right. Also fires on Ctrl/Cmd + Enter. |
| Reset | Restores the original example. |
| Theme switcher | Dracula / Monokai / GitHub Light, persisted per device. |
| Console panel | Captures console.log/info/warn/error from inside the iframe. |
| Share | Copies a URL with your code packed into the hash. |
| AI Debug / Review | Sends the current pane to the AI panel for a fix or critique. |
Open the editor
- Click Try it Yourself » on any lesson page.
- Or jump straight to the JS intro example.
- Or paste a
#p=…share URL from a friend.
Tips for fast iteration
- Ctrl+Enter to run without leaving the keyboard.
- Use the console panel —
console.logfrom inside the iframe surfaces here, not in your real DevTools. - Share buttons let you paste a working snippet into Slack/issues without setting up a CodePen.
Tip: Treat the editor as a scratchpad. Paste a snippet from elsewhere, tweak it until you understand it, then copy the working version back into your project.
Example
Example
<!DOCTYPE html>
<html>
<body>
<p id="out"></p>
<script>
document.getElementById("out").textContent = "Hello from JS Editor!";
</script>
</body>
</html>
Try it Yourself »
Exercise
Keyboard shortcut to run the code.
Press:
+ Enter
The standard modifier key.
Discussion
Loading…