teavm-react

Write React 18 applications in Java and Kotlin, compiled to JavaScript via TeaVM.

teavm-react provides fully-typed React bindings -- components, hooks, context, refs, events, and memoization -- with complete type safety and IDE support. No JavaScript required.

• Full React 18 API: functional components, hooks (useState, useEffect, useContext, useRef, useMemo, useCallback, useReducer), context, and refs
• Fluent HTML DSL for building elements in Java
• Optional Kotlin wrapper with delegated properties, coroutine-based effects, and lambda-with-receiver DSL
• Class-based components via ReactView
• Type-safe event handling (click, keyboard, change, focus, submit)
• Compiles to efficient JavaScript via TeaVM

• JDK 21
• Maven 3.8+

mvn clean install

./run.sh
# Open http://localhost:8080

Or manually:

mvn clean install -N
mvn install -pl teavm-react-core -q
mvn -f teavm-react-demo/pom.xml process-classes -q
python3 -m http.server 8080 --directory teavm-react-demo/target/webapp

import static ca.weblite.teavmreact.html.Html.*;
import ca.weblite.teavmreact.hooks.Hooks;
import ca.weblite.teavmreact.hooks.StateHandle;

// Define a functional component
RenderFunction counter = props -> {
    StateHandle<Integer> count = Hooks.useState(0);

    return div(
        h1("Count: " + count.get()),
        button("Increment")
            .onClick(e -> count.set(count.get() + 1))
            .build()
    );
};

// Render to the DOM
ReactRoot root = ReactDOM.createRoot(document.getElementById("root"));
root.render(React.createElement(React.wrapComponent(counter)));

import ca.weblite.teavmreact.kotlin.*

val counter = component {
    var count by state(0)

    div {
        h1 { +"Count: $count" }
        button {
            +"Increment"
            onClick { count++ }
        }
    }
}

For an interactive development workflow with automatic recompilation and browser refresh:

./dev.sh
# Open http://localhost:8080

Edit any source file in your preferred editor and save — the browser reloads automatically. The dev server optimizes rebuild times by:

• Incremental TeaVM compilation — only re-analyzes changed classes
• Smart module detection — skips rebuilding core/kotlin when only demo source changed
• Static fast-path — HTML/CSS-only changes bypass Maven entirely (~instant)
• Maven Daemon support — uses mvnd if available to eliminate JVM startup cost

See the Developer Guide for details on the dev server architecture and optimization options.

teavm-react ships AI assistant skills as a -skills.jar artifact alongside the library JARs. If you use an AI coding tool (Claude Code, Cursor, etc.), you can install version-pinned skill guidance for teavm-react and all your project's dependencies:

mvn ca.weblite:skills-jar-plugin:install

This downloads any available *-skills.jar artifacts from your dependency tree and unpacks them into .claude/skills/. To see what's available without installing:

mvn ca.weblite:skills-jar-plugin:list

# Unit tests
mvn test -pl teavm-react-core,teavm-react-kotlin

# Integration tests (TeaVM compilation verification)
mvn install -N && \
mvn install -pl teavm-react-core,teavm-react-kotlin -DskipTests && \
mvn process-classes test -pl teavm-react-demo

• Developer Guide -- comprehensive API reference and examples
• Kotlin DSL Design -- design specification for the Kotlin wrapper

See LICENSE for details.