usefulweb.appDependable little tools for people and AI agents. Codeharbor
Theme: Auto

Theme

Coding IDE

Codeharbor

A coding IDE in your browser: edit, preview and run web projects safely, then share them.

Launch Codeharbor → Tutorials

Codeharbor is a small coding IDE that runs in your browser: a file tree, tabs and split view, an accessible editor with syntax highlighting for 15 languages, find and replace, a command palette and live problems for JSON, YAML, JavaScript and TypeScript. Web pages and scripts run in a sandbox on a separate address, with their console output shown in the IDE. Projects stay in your browser with snapshots, commits and ZIP export, or are shared in a Teamspaces workspace where teammates’ changes merge file by file.

Free · runs in your browser · no sign-up · Version 1.0.0

Codeharbor with a file tree, two tabs, highlighted HTML and a live preview of a list page beside the editor

Screenshots

Features

  • An editor you can use with any input

    A real text field under the colours: screen readers, mobile keyboards, input methods and spell-check-free typing all work. Tab indents, or moves focus after Ctrl+M.

  • Highlighting for 15 languages

    JavaScript, TypeScript, JSX, HTML, CSS, JSON, Markdown, Python, SQL, YAML and shell, plus basic Rust, Go and C.

  • File tree, tabs and split view

    Folders, new files, rename and move by drag or by keyboard, several open tabs and two editors side by side.

  • Find, replace and search everywhere

    Find and replace with regular expressions, go to line, and search or replace across all files with include patterns.

  • Command palette and shortcuts

    Every action in a searchable palette (Ctrl+Shift+P), a full shortcut list, bracket matching, auto-indent and comment toggling.

  • Problems while you type

    JSON and YAML parse errors, basic JavaScript and TypeScript syntax errors and HTML/CSS structure checks with line and column.

  • Run code in a sandbox

    Pages and scripts run on a separate address with no access to your accounts, cookies or our servers. Console output comes back to the IDE.

  • Stop runaway code

    Scripts run in a worker with a time limit and a Stop button; loops in pages are stopped after two seconds of spinning.

  • TypeScript without a build

    Types are stripped in the browser so TypeScript modules run directly. The limits are documented.

  • Markdown preview and formatters

    Live Markdown preview with outline, and formatters for JSON, CSS and HTML.

  • Snapshots, commits and diffs

    Save snapshots before you experiment, commit with messages, compare any two versions line by line and restore single files.

  • Six project templates

    Web page, TypeScript module, canvas sketch with its own helper library, Markdown docs, JSON/YAML config and a Python script.

  • ZIP import and export

    Open a folder as ZIP, keep its structure, and export the project as ZIP or as a Codeharbor project file.

  • Teamspaces with merging per file

    Share a project in a workspace; changes from teammates arrive live and are merged file by file. Viewers read along.

  • Light, dark and high contrast

    Three editor themes, adjustable tab size and line wrapping, and a layout that works down to phone width.

  • API and MCP tools

    Format and check code, diff two texts and render Markdown with the same engine from scripts and AI agents.

Templates

Start from a ready-made project and change it to fit.

Built-in tools

Codeharbor uses these tools. Each one also has its own page and works on its own, in the browser, through the JSON API and through MCP.

  • Codeharbor Format & Check Codeharbor engineFormat JSON, CSS and HTML and find syntax errors in JSON, YAML, JavaScript and TypeScript.
  • Codeharbor Diff Codeharbor engineCompare two texts line by line and get a unified diff with added and removed lines.
  • Codeharbor Markdown Preview Codeharbor engineRender Markdown to safe HTML with an outline, word count and heading checks.

For AI agents

Codeharbor runs on a deterministic engine. The same functions are available as tools with a JSON API and MCP, so scripts and AI agents get exactly the results the app shows.

  • Codeharbor Format & Check – Format JSON, CSS and HTML and find syntax errors in JSON, YAML, JavaScript and TypeScript.
    Tool page · POST https://codeharbor.usefulweb.app/api/v1/tools/codeharbor-format/calculate · MCP codeharbor_format
  • Codeharbor Diff – Compare two texts line by line and get a unified diff with added and removed lines.
    Tool page · POST https://codeharbor.usefulweb.app/api/v1/tools/codeharbor-diff/calculate · MCP codeharbor_diff
  • Codeharbor Markdown Preview – Render Markdown to safe HTML with an outline, word count and heading checks.
    Tool page · POST https://codeharbor.usefulweb.app/api/v1/tools/codeharbor-markdown-preview/calculate · MCP codeharbor_markdown_preview

Build a project through the API, then open it in the app with a link to https://codeharbor.usefulweb.app/app#project=<base64url JSON>.

Import & export

Import

  • Codeharbor project (.codeharbor.json)
  • ZIP archive of a folder (stored or deflated entries)
  • Single text files (any of the supported languages)
  • Project link (#project=)

Export

  • Codeharbor project (.codeharbor.json)
  • ZIP archive with folders
  • Single file download
  • Unified diff (.diff)
  • Rendered Markdown as HTML

Keyboard shortcuts

Keyboard shortcuts in Codeharbor
KeysAction
Ctrl + Shift + PCommand palette
Ctrl + PGo to file
Ctrl + EnterRun the current file (or the project entry)
Ctrl + FFind in the current file
Ctrl + HFind and replace
Ctrl + Shift + FSearch across all files
Ctrl + GGo to line
Ctrl + /Toggle line comment
Ctrl + ]Indent the selected lines
Ctrl + [Outdent the selected lines
Ctrl + Shift + \Jump to the matching bracket
Shift + Alt + FFormat the file (JSON, CSS, HTML)
Ctrl + MSwitch Tab between indenting and moving focus
Ctrl + SSave the project file
Ctrl + ZUndo
Ctrl + Shift + ZRedo
F2Rename the selected file in the tree
Alt + Up / Alt + DownMove the selected file or folder in the tree up or down a folder level

Frequently asked questions

Is it safe to run code from someone else’s project?

Code runs only inside a sandboxed frame on a separate address (the run host). It cannot read cookies, storage or accounts of usefulweb.site and cannot send requests to our servers or anywhere else. Still, run code you got from strangers with care: it can show you misleading content.

Which languages can I run?

HTML pages (with their CSS and JavaScript) in the preview, and JavaScript or TypeScript modules in the console. Python, shell, SQL, Rust, Go and C are highlighted and exported, but not run in the browser.

Can I use npm packages?

No. There is no package manager and the sandbox has no network. Put the code you need into the project as files and import them with relative paths.

How does the TypeScript support work?

Codeharbor removes the types (annotations, interfaces, generics, casts) and keeps the positions, like Node’s type stripping. It does not type-check. Enums, namespaces, decorators and parameter properties are reported as unsupported.

Where are my projects stored?

In this browser (IndexedDB). Save a project file or a ZIP to keep a copy, back up with Bundlekeep, or save the project to a Teamspaces workspace to work on it with others.

What happens when two people edit the same project?

Each save sends the changed project; Codeharbor merges the incoming version file by file. Edits to different files or different lines of a file combine; overlapping edits keep both versions with conflict markers, and the status bar says so.

How do I use the editor with a keyboard only?

Every action is in the command palette (Ctrl+Shift+P). Tab indents inside the editor; press Ctrl+M to make Tab move focus instead. The file tree works with the arrow keys, F2 renames and Alt+Up/Down moves an item between folders.

Limitations

What Codeharbor does not do (yet):

  • No npm packages, no terminal, no Git remote, no language server or code completion.
  • Python, shell, SQL, Rust, Go and C are not run in the browser; export the project and run it on your computer.
  • Syntax checks for JavaScript and TypeScript are basic (tokens, brackets, a few statement rules); there is no type checking.
  • TypeScript enums, namespaces, decorators and parameter properties are not supported by the type stripper; JSX is not transformed.
  • Projects are limited to 400 files, 1 MB per file and 8 MB in total.
  • Loops in previewed pages are stopped after about two seconds of continuous running; long synchronous computations belong in a script run.
  • Live collaboration merges whole saves file by file, not keystroke by keystroke.

Tutorials

Learn Codeharbor step by step.

  1. Your first project in CodeharborOpen a template, find your way around the file tree, tabs and panels, add files and folders, and learn where Codeharbor keeps your work.Beginner 6 min
  2. Editing faster — find, replace, palette and shortcutsFind and replace with regular expressions, jump to a line or file, use the command palette, split the editor, comment lines and choose what the Tab key does.Beginner 7 min
  3. Run pages and scripts safelyPreview web pages, run JavaScript and TypeScript in the console, stop endless loops, and understand why your code cannot reach your accounts.Beginner 7 min
  4. Problems, formatting and Markdown previewSee syntax errors while you type, format JSON, CSS and HTML, and write documentation with a live Markdown preview and outline.Beginner 6 min
  5. History — commits, diffs and snapshotsRecord versions of your project with commits, compare any change line by line, restore files or whole commits, and take quick snapshots before you experiment.Intermediate 7 min
  6. Export, import and teamworkBring a folder in as ZIP, export your project, save it as a file, and share it in a Teamspaces workspace where changes from teammates are merged file by file.Intermediate 8 min

Ready to try it?

Launch Codeharbor →

Other apps