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

**URL:** <https://platform.jetbrains.com/t/html-css-javascript-and-react-psi-samples-for-free-tier-intellij-idea-2026-1/4240>\
**Category:** Announcements\
**Created:** [May 12, 2026, 8:49am UTC](https://platform.jetbrains.com/t/html-css-javascript-and-react-psi-samples-for-free-tier-intellij-idea-2026-1/4240 "2026-05-12T08:49:55Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![robert.novotny](https://sea1.discourse-cdn.com/flex001/user_avatar/platform.jetbrains.com/robert.novotny/32/2046_2.png) [@robert.novotny](https://platform.jetbrains.com/u/robert.novotny)\
**Post date:** [May 12, 2026, 8:49am UTC](https://platform.jetbrains.com/t/html-css-javascript-and-react-psi-samples-for-free-tier-intellij-idea-2026-1/4240/1 "2026-05-12T08:49:55Z")

</div>

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](https://blog.jetbrains.com/idea/2026/03/js-ts-free-support/). 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](https://github.com/novotnyr/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](https://github.com/novotnyr/html-js-react-css-psi-showcase/tree/main/html-code-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](https://github.com/novotnyr/html-js-react-css-psi-showcase/tree/main/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](https://github.com/novotnyr/html-js-react-css-psi-showcase/tree/main/css-psi-action)  
A minimal action that traverses the PSI of the current CSS file and collects `CssSelector` elements.

### `JavaScript` plugin

- [React JSX Structure](https://github.com/novotnyr/html-js-react-css-psi-showcase/tree/main/react-jsx-structure)  
A tool window sample that tracks the currently selected JSX file and lists JSX literal expression names.

- [JavaScript Top-Level Function Line Marker](https://github.com/novotnyr/html-js-react-css-psi-showcase/tree/main/js-function-line-marker)  
A line marker sample that adds gutter icons for top-level JavaScript functions.

Taken together, these samples cover several useful plugin patterns:

- PSI traversal across HTML, CSS, JavaScript, and JSX in two flavors
- [IDE actions](https://plugins.jetbrains.com/docs/intellij/action-system.html)
- [annotators](https://plugins.jetbrains.com/docs/intellij/annotator.html)
- [line marker providers](https://plugins.jetbrains.com/docs/intellij/line-marker-provider.html)
- [tool windows](https://plugins.jetbrains.com/docs/intellij/tool-windows.html)

## 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](https://www.jetbrains.com/help/idea/psi-viewer.html).

## 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.

---

<div class="post-metadata">

**Author:** ![robert.novotny](https://sea1.discourse-cdn.com/flex001/user_avatar/platform.jetbrains.com/robert.novotny/32/2046_2.png) [@robert.novotny](https://platform.jetbrains.com/u/robert.novotny)\
**Post date:** [July 16, 2026, 11:01am UTC](https://platform.jetbrains.com/t/html-css-javascript-and-react-psi-samples-for-free-tier-intellij-idea-2026-1/4240/2 "2026-07-16T11:01:08Z")

</div>

See the summary [YouTube Short overview](https://youtube.com/shorts/QYEdGMmWMUk), too.