Code

The code editor is the editor your users know from their own tools: colouring for twenty-six languages, several cursors, find and replace with regular expressions, folding, matching brackets, comments, moving lines, suggestions as they type and problems underlined. JSON is checked as it is typed and formatted on request. It is a form field, so the text goes into a <form> like any other.

The code diff shows two versions side by side or as one column, with the changed words marked inside each changed line. Revert a change, or take it into the original, one block at a time; give it the output of git diff and it shows every file. Neither element loads anything from anywhere, and both stay quick at a million lines.

Settings, changed and reviewed

An application's settings as JSON. Edit them: a missing comma or quote is underlined as you type, and Format tidies the indentation. The diff underneath compares your text with the saved version as you go; revert any block you did not mean, then Save (or Ctrl+S).

Save

Format

Back to the saved version

Keyboard: Ctrl+D selects the next match of a word (and adds a cursor), Alt+click adds one anywhere, Alt+Up and Down move lines, Ctrl+/ comments, Ctrl+F finds, Ctrl+G goes to a line and F8 to the next problem. In the diff, F7 and Shift+F7 move between changes.

Get the code

<script src="/assets/bmx-components.min.js"></script>

<bmx-code-editor id="cd-settings" language="json" label="Settings" status-bar style="inline-size: 100%; --bmx-code-editor-height: 20rem"></bmx-code-editor>
<bmx-code-diff id="cd-review" language="json" original-label="Saved" modified-label="Your changes" actions="revert" view="auto" style="inline-size: 100%; --bmx-code-diff-height: 18rem"></bmx-code-diff>

Twenty-six languages

JavaScript and TypeScript, JSON, HTML with its scripts and styles, CSS, SCSS and Less, SQL, Python, C#, Java, Kotlin, Swift, C and C++, Go, Rust, PHP, Ruby, shell and PowerShell, YAML, TOML and INI, Markdown with code inside it, XML, Dockerfiles and diffs. Pick one, then try folding, finding and wrapping.

TypeScript

Python

SQL

HTML

YAML

Markdown

Find "total"

Fold everything

Get the code

<script src="/assets/bmx-components.min.js"></script>

<bmx-select id="cd-lang" value="typescript" style="inline-size: 12rem" label="Language">
  <bmx-option value="typescript">TypeScript</bmx-option>
  <bmx-option value="python">Python</bmx-option>
  <bmx-option value="csharp">C#</bmx-option>
  <bmx-option value="sql">SQL</bmx-option>
  <bmx-option value="html">HTML</bmx-option>
  <bmx-option value="yaml">YAML</bmx-option>
  <bmx-option value="markdown">Markdown</bmx-option>
</bmx-select>
<bmx-code-editor id="cd-code" language="typescript" label="Code sample" style="inline-size: 100%; --bmx-code-editor-height: 22rem"></bmx-code-editor>

Your linter, your suggestions

The editor shows problems from any checker you have as diagnostics, and asks a function of yours for suggestions. Here a query against a customers table: the misspelt column is flagged, and Ctrl+Space offers the table's columns. It grows with its text, up to ten lines.

Get the code

<script src="/assets/bmx-components.min.js"></script>

<bmx-code-editor id="cd-sql" language="sql" min-lines="5" max-lines="10" label="Query" style="inline-size: 100%"></bmx-code-editor>

A million lines

A server log of a million lines, opened in the editor. Only the lines on screen are drawn and coloured, so it scrolls, finds and edits as a short file does. Press Ctrl+End to go to the last line.

Open a million lines

Find every "ERROR"

Get the code

<script src="/assets/bmx-components.min.js"></script>

<bmx-code-editor id="cd-large" language="plain" readonly label="Server log" style="inline-size: 100%; --bmx-code-editor-height: 18rem"></bmx-code-editor>

A patch from git

Give the diff a unified diff, as git diff writes it, and it shows each file and each hunk with its line numbers. No files are needed; the patch is enough.

Get the code

<script src="/assets/bmx-components.min.js"></script>

<bmx-code-diff id="cd-patch" view="unified" label="Pull request" style="inline-size: 100%; --bmx-code-diff-height: 22rem"></bmx-code-diff>