Frameworks & Editor

Web components, or custom elements, are a web standard that should work everywhere. They do, but the DX is not always great. Pyro fixes that.

Editors

VSCode

To get documentation support on hover and autocomplete, you need to let VSCode know where the pyro definitions are. Just insert the following two lines in editor configuration, typically in .vscode/settings.json.

{
  // other config
  "html.customData": ["./node_modules/pyro/dist/vscode.html-custom-data.json"],
  "css.customData": ["./node_modules/pyro/dist/vscode.css-custom-data.json"]
}

Frameworks

Web / No framework

Works seamlessly, since it's just custom elements.

Preact

No configuration needed, Preact will automatically detect Typescript support and docs.

Vue

Custom elements need to be registered for Vue to recognize them properly. This is done by listing pyro elements under the isCustomElement option in your build configuration. Read more on the Vue documentation.

export default defineConfig({
  // other config
  vue: {
    template: {
      compilerOptions: {
        isCustomElement: (tag) => tag.startsWith('pyro-'), 
      },
    },
  },
});

Svelte

No configuration needed, Svelte will automatically detect Typescript support and docs.

React

WIP

Solid

WIP