Run preact standalone in the browser.
- no transpiler necessary
- no build chain
- just import one tiny ~12kB file
Supports
- Writing
htmlandcssTemplate literals - Custom Components. Generate and register a custom element from a preact component.
- css rendering using CSSStyleSheet
Based on
- preact and preact hooks
- HTM (Hyperscript Tagged Markup) and html/preact
- preact-custom-element
- preact-signals
- wouter
- renderToString, renderToStringAsync
Readings
- preact and Web Components: https://preactjs.com/guide/v10/web-components (npm)
- preact and PWA: https://preactjs.com/guide/v10/progressive-web-apps
- Using Preact with HTM and ImportMaps: https://preactjs.com/guide/v10/getting-started#using-preact-with-htm-and-importmaps
- Syntax highlighting and language support via the inline-html extension.
npm:
npm i --save-dev @kruemelo/preacts
cp node-modules/@kruemelo/preacts/dist/preacts.js <your/web/path/here/>preacts.jsReplace <your/web/path/here/> with your desired target location.
<!DOCTYPE html>
<html lang="en">
<head>
<script type="importmap">
{
"imports": {
"preacts": "<your/web/path/here/>/preacts.js"
}
}
</script>
</head>
<script type="module">
import { html, render, signal, renderToString } from "preacts";
import { Greeting } from "./Greeting.js";
const count = signal(0);
function App() {
return html`
<div>
<${Greeting} count=${count.value} />
<button onClick=${() => (count.value += 1)}>
Increment with signal
</button>
<p>Counter: ${count}</p>
<p>Greeting rendered to string:
<pre>${renderToString(html`<${Greeting} count=${count.value} />`)}</pre>
</p>
</div>
`;
}
render(html`<${App} />`, document.body);
</script>
</html>You need to adjust importmap: Replace <your/web/path/here/> with the path the preacts.js file is accessible for the browser.
import { html, css } from "preacts";
export const Greeting = ({ name = 'world', count }) => {
return html`
<h1 class="Greeting">
Hello, ${count === 0 ? name : "again"}!
</h1>
`;
};
// css
const backgroundColor = "lightgreen";
const style = css`
.Greeting {
background-color: ${backgroundColor};
}
`;
css.render(style);npm run build# prerequisites
npm install http-server -g
npm i
# startup the server open test in browser
http-server -o /test