Code, preview and ship in one tab

A browser playground with a real editor, a live preview and a console, plus an AI agent that edits your files and checks every change before you see it. Deploy to a URL, or publish it for others to remix.

Get started Browse Playgrounds

The builder is on paid plans. See pricing

index.htmlstyles.cssmain.js

1const root = document.documentElement;

2const toggle = document.querySelector("#theme");

3+const saved = localStorage.getItem("theme");

4+if (saved) root.dataset.theme = saved;

5+toggle.addEventListener("click", () => {

6+ const dark = root.dataset.theme !== "dark";

7+ root.dataset.theme = dark ? "dark" : "light";

8+});

Checked after the edit

JavaScript syntax
HTML tags balanced
No duplicate ids
Every file it links exists

0 errors · 0 warnings

Console

logtheme: dark

infosession started · 25 min

›root.dataset.theme"dark"

A playground that does the busywork.

You decide what to build. The agent writes it, checks it, and keeps every version.

Editor Monaco, file tabs, a live preview and a console. Checked edits Every change is validated before the agent stops. Any model Jomoq 1, Jomoq Pro, or your own key for 0 credits. Ship Deploy to a URL, publish, and let people remix it.

Everything a playground needs, in the browser.

Files, a live preview, a console and an agent that reads your code before it touches it. Nothing to install.

Tide timer Chat Layout Run Tidy Palette Pick Text Deploy Publish

Add a dark mode toggle to the header and remember the choice.

Read index.html

Edited main.js+9−1

Edited styles.css+12

Added a toggle to the header. The choice is saved in localStorage, so the page opens the way you left it.

UndoExplainPolish

Describe a change…Jomoq Pro

index.htmlstyles.cssmain.js

1const root = document.documentElement;

2const toggle = document.querySelector("#theme");

3+const saved = localStorage.getItem("theme");

4+if (saved) root.dataset.theme = saved;

6+toggle.addEventListener("click", () => {

7+ const dark = root.dataset.theme !== "dark";

8+ root.dataset.theme = dark ? "dark" : "light";

9+ localStorage.setItem("theme", root.dataset.theme);

10+});

12// One focus session at a time.

13function start(minutes) {

14 let left = minutes * 60;

− tick(left)

15+ tick(left);

16 timer = setInterval(() => tick(--left), 1000);

17}

Preview520 × 380

Tide timer

19:42

PauseReset

3 of 4 today

ConsoleAllLogsInfoWarningsErrors

logtheme: dark

infosession started · 25 min

warnsound waits for the first click

›root.dataset.theme"dark"

Edits that check themselves

The agent edits with all-or-nothing diffs that still land when the indentation has drifted. After every change it checks the whole playground, and it doesn't stop while an error is outstanding.

Open a playground

Agent2 steps

write_filemain.js1 warning

main.js looks up #task-list but no HTML file declares id="task-list".main.js:14

diff_applyindex.html+1−1

− <ul class="tasks">

22+ <ul class="tasks" id="task-list">

UndoExplainPolish

Your models, your keys

Jomoq 1 answers in about a second and Jomoq Pro runs the builder. Or add your own key for Claude, GPT, Gemini and five more providers. Those calls cost no credits.

How credits work →

Split the timer into its own moduleJomoq Pro

Ship it, then watch where it goes

Deploy to a public URL in one click, or publish to Playgrounds, where people play it, like it and remix it with credit back to you. Your page shows the views, time on page and remixes.

Browse Playgrounds →

jomoq.com/p/3f9c…e21a/Copy

Published to Playgroundsjomoq.com/x/tide-timer MIT License

Views1,284903 unique visitors

Time on page48smedian

Remixes120.9% of views

Views per day · last 14 days

Tide timer, with soundsRemixed from Tide timer by @you

Six apps. Six sentences.

Each one was built by Jomoq Pro from the prompt under it, exactly as written. Pick one to try it yourself.

Snake game

“Build a playable Snake game on a canvas with arrow-key controls, a score, speed that increases as you eat, and a restart button.”

Data dashboard

“Build a dashboard comparing the five largest economies on GDP, growth, and inflation: stat cards, one bar chart, and a sortable table. Use realistic sample data. Vanilla HTML, CSS, and JS only.”

Weather dashboard

“Build a weather dashboard for Lisbon: current conditions, a 7-day forecast row, an hourly strip, and a wind and UV panel. Realistic sample data; draw the icons as inline SVG.”

Mortgage calculator

“Build a mortgage calculator with sliders for home price, down payment, interest rate, and term, a live monthly payment, and a short amortization summary.”

Habit tracker

“Build a habit tracker for the current week: add habits, tick off days in a grid, show a streak per habit, and save to localStorage.”

Interactive timeline

“Build an interactive timeline of the Apollo program from 1961 to 1972 with clickable milestones that expand into short descriptions.”

The small things, done properly

Keyboard first, tidy by default, and nothing lost.

Cmd+K for everything

Run, tidy, switch layouts, export a ZIP or deploy without leaving the keyboard. Cmd+S saves.

Tidy with Prettier

Format the current file or every file, or tidy on save. Shift+Alt+F.

Every edit is a version

Agent edits, your typing and inline text changes all land in history, with a diff and a way back.

Set it up your way

Theme, font, tab size, wrap, minimap and line numbers. Turn auto-run off and run with Cmd+Enter.

Questions

Plans, the validator, your keys, and what happens when someone remixes your work.

See pricing →

Is the builder on the free plan?

No. The builder, deploys and publishing to Playgrounds are on paid plans. Chat, cited research, file uploads and the planner come with every account, so you can try the models before you upgrade.

What does the validator check?

JavaScript syntax (inline scripts too), HTML tag balance, duplicate ids, CSS braces, references to files that don't exist, and lookups of ids that no element has. It runs after every edit, and the report goes back to the agent, which isn't allowed to finish while an error is outstanding.

Can I use my own API key?

Yes. Add a key for Claude, GPT, Gemini, Groq, DeepSeek, Cerebras, OpenRouter or NVIDIA in Settings and pick that model from the same menu. Calls on your own key cost no credits.

What happens when someone remixes my playground?

They get a copy in their own account. When they publish it, the page links back to yours, and the chain of credit is kept even if an earlier version is deleted. You choose per project whether to publish under the MIT License; it's on by default.

Open a playground.

The builder is on paid plans. Chat, research and the planner come with every account.

Get started