Editor support / auto-complete

When working with PodOS elements, it is best to use an IDE like IntelliJ IDEA or Visual Studio Code. These tools make it a lot easier to write valid HTML and can also autocomplete PodOS elements and show their documentation.

Auto-componete — Auto-complete suggesting various PodOS elements

Property documentation — Pop-Ups show useful help, e.g. for properties

This is supported by any editor that understands Custom Elements Manifests, e.g. by installing the Web Components Toolkit.

Install Web Components Toolkit

We recommend using the Web Components Toolkit, which is available as a plugin for several editors, like VS Code, JetBrains IDEs, Neovim and Zed.

When installing PodOS via npm, auto-completion and documentation work out of the box. When using it from CDN, you must either download the custom-elements.json to your working directory or configure WC Toolkit to point to the remote file.

Either download the manifest file:

wget https://cdn.jsdelivr.net/npm/@pod-os/elements/dist/custom-elements.json

or configure WC Toolkit to load it from CDN:

// wc.config.js
export default {
  manifestSrc: "https://cdn.jsdelivr.net/npm/@pod-os/elements/dist/custom-elements.json"
}

You might need to restart the editor afterwards.