HTML, CSS, JavaScript, and React PSI Samples for free tier IntelliJ IDEA 2026.1

Announcements
1

JetBrains recently announced that IntelliJ IDEA 2026.1 makes core JavaScript, TypeScript, HTML, CSS, and basic React support available in the free tier of the IDE. That is a notable change for plugin developers as well as end users. Specifically, PSI elements for these languages and technologies can be used by third-party plugins.

To make that more concrete, we have published a GitHub repository, html-js-react-css-psi-showcase, with a set standalone plugin samples focused on PSI-based extension patterns for frontend languages.

Sample Plugin Overview

HTML support (available automatically)

  • HTML Heading Hierarchy Inspection
    An HTML annotator that uses HTML and XML PSI to warn about orphaned headings and skipped heading levels. This sample depends only on com.intellij.modules.platform.

com.intellij.css plugin

  • CSS in HTML Action
    An action that works in HTML files, finds <style> blocks, resolves the embedded CSS PSI, and lists the CSS selectors it finds there.

  • CSS PSI Action
    A minimal action that traverses the PSI of the current CSS file and collects CssSelector elements.

JavaScript plugin

Taken together, these samples cover several useful plugin patterns:

A practical note about source availability

One caveat: some CSS and JavaScript PSI implementation sources are not available in the IntelliJ IDEA Community Edition source tree. The APIs remain usable, but navigation from classes such as CssStylesheet, CssSelector, JSFunction, or JSXmlLiteralExpression may not always resolve to open-source implementation code.

When that happens, use the built-in PSI Viewer to inspect the actual PSI structure produced by the IDE, as described in the PSI Viewer documentation.

In summary

If you are looking for a starting point, pick the sample that matches the extension point you need most closely, run it, inspect the PSI with the built-in viewer, and adapt the traversal to your own use case.

1 Like