Use Preact with Jeasx
Preact lets you embed interactive islands into server-rendered pages. Components keep their own state, and signals let separate islands share state across the page.
How do I integrate Preact with Jeasx?
Install Preact, its signals and the server renderer:
npm install @preact/signals preact preact-render-to-string
Preact brings its own JSX runtime, so start every file that holds Preact JSX with a pragma comment:
/** @jsxImportSource preact */
Have a look at the source code of this page to see how the components are rendered on the server and mounted in the browser.
Palette generator
This island keeps its colors, locks and copy feedback in component state, and uses effects for the keyboard shortcut and the timer. The starting colors are props from the server, so the page shows a palette before any JavaScript runs.
World clocks
Each clock is a separate island, but all of them read the same signal, so they always tick together. Use this pattern whenever separate islands on a page need to share state.