Preact Example

This example shows how to use Preact with Preact-Router and HTM in packup.

We recommend for loading Preact, HTM and their related modules.


    <title>with-simple-assets document</title>
    <link rel="stylesheet" href="css/style.css" />
    <div id="main"></div>
    <script src="js/script.js"></script>


import { Router } from ''
import { Link } from ''
import { render } from ''
import { html } from ''

function App() {
    return html`
            <${Link} activeClassName=active href="/">Home<//>${" "}
            <${Link} activeClassName=active href="/about">About<//>${" "}
            <${Link} activeClassName=active href="/users">Users<//>

            <${Home} default />
            <${About} path="/about" />
            <${Users} path="/users" />

function Home() {
  return html`<h2>Home</h2>`

function About() {
  return html`<h2>About</h2>`

function Users() {
  return html`<h2>Users</h2>`

render(html`<${App} />`, document.getElementById('main'))

tsconfig.json is not absolutely required for bundling frontend assets, and actually packup doesn't use it internally, but it's recommend for better development experience with editors.

Edit this page in GitHub