« BackGitHub Logo

Preact in Jeasx with state & signals

Preact empowers you to enhance your server-rendered JSX application by embedding interactive islands of UI. With support for state management and reactive signals, your components can efficiently communicate and synchronize across the page, delivering a fast and dynamic user experience.

How to integrate Preact with Jeasx? First you have to install the required dependencies for Preact via npm:

npm install @preact/signals preact preact-render-to-string

As Preact requires a dedicated JSX runtime, you have to configure it via a tsconfig.json for the directories where you want to compile Preact to JavaScript:

{
  "extends": "jeasx/tsconfig.json",
  "compilerOptions": {
    "jsxImportSource": "preact"
  },
  "include": ["**/*"]
}

Please visit the source code at GitHub to see how to setup Preact in detail.

Jokes

The widget below handles reactivity via manipulating state.

Clocks

Both clocks are synchronized via a common signal. You can use this pattern to create interactive islands which share a common state.

en-US
de-DE