Elements and VS Code

Markdown

Visual Studio Code is Microsoft's code editor, built in the open, and it is the editor much of the world writes code in. It handles nearly every language, with an integrated terminal, built-in Git and debugging, and a large catalog of extensions. It is also a home for coding agents: GitHub Copilot's chat, suggestions and agents are built in, and Claude and Codex run there too.

Elements and VS Code make each other better. You and your agents write the app in VS Code, and Elements, the integrated app environment, is where it gets built, checked and deployed, so it works on day one and keeps working after. Within milliseconds of a save, the build reports what it finds across type checking, tests, migrations and program analysis, and nothing reaches production until the build is clean and every test passes (build, deploy).

Elements makes the environment your editor and agents build in, not an editor, a model or an agent. Elements works well with agents because it has a manual baked into the binary. There is one license per machine and no metered usage (pricing).

VS Code Is Set Up When You Install Elements

Installing Elements sets up VS Code with nothing to configure, and reinstalling keeps it current (VS Code). There is no marketplace search and no settings file to edit, and it works whether you launch VS Code from the terminal or the dock. It applies only in an Elements project, so your other work in VS Code is untouched. Syntax highlighting for Elements HTML (.ehtml) and .jsoc files works everywhere, in a project or not.

The Editor and the Build Use the Same Checker

In an Elements project, TypeScript, JavaScript, Elements HTML templates, .jsoc config files and CSS get diagnostics, completion, hover, go-to-definition, references, rename and project-wide symbol search (editors). It is the same checker the build runs, so the editor and elements build report the same errors, and every definition and hover appears once.

Elements also brings Emmet to templates and adds two commands:

  • Elements: New Project creates a project, opens it as the workspace and opens a terminal in it.
  • Elements: Jump to Matching Tag moves between an opening and a closing tag in a template.

Agents in VS Code Check Their Work With One Command

Agents in VS Code check their work the way a developer does, by running something in the integrated terminal and reading what it prints. Usually that is three runs and three formats: types, tests and migrations.

In an Elements project the agent runs elements build -json and reads one structured reply listing every build error with its file, line and column, the same spots the editor underlines (build). Types, tests and migrations are checked by one build, so their failures arrive together. The reply always describes the code as saved, even when the agent asks the instant after a save.

The command is the same whichever agent runs it. Copilot, Claude and Codex in VS Code all read the same reply, and each of them can build in a new Elements project from its first task (start).

One Project Server for the Editor and Every Agent

The editor and the command both talk to a project server that runs while you work and stays running between commands. It holds the build graph and build state in memory, so on every save the build state is updated almost instantly; only the work a save affects is redone, and the running app hot reloads (build). It builds in milliseconds and answers agents and humans in microseconds.

The editor, the integrated terminal and every agent read that one build state. When several agents work on one project, each sees the others' edits in its next build (build).

Vim and Neovim Too

The same checker is not tied to VS Code. Installing Elements also sets up Vim and Neovim, with the same diagnostics, completion and navigation (Vim and Neovim). A team can split across editors and still see the same errors.

Questions

Is there a VS Code extension for Elements?

Yes, and installing Elements sets it up. VS Code gets diagnostics, completion, hover, go-to-definition, references and rename in TypeScript, Elements HTML templates, .jsoc config and CSS from the same checker the build runs, plus highlighting for .ehtml and .jsoc files.

Can I use GitHub Copilot with Elements?

Yes. Copilot writes the code and Elements is where that code is built, checked and deployed. An agent in VS Code runs elements build -json in the terminal to learn every build error in one answer, from type checking to tests and migrations.

Does Elements work in VS Code forks such as Cursor?

Cursor, yes: installing Elements sets up Cursor the same way it sets up VS Code. Elements also sets up Vim and Neovim, with the same checker behind them.