Examples

The kitchen-sink app

examples/kitchen-sink is a real Tessera app that every milestone is dogfooded in: components with contracts and styles, the system's Button, a theme and density switcher, pages, a dynamic route, a 404 page and two layouts. Its source is the example; this page shows the parts.

The entry

import 'virtual:tessera/tokens.css'
import { createApp } from '@pixelscriptio/tessera/router/app'

createApp().mount('#app')

A page with a parameter

<page>
{ "title": "Post", "layout": "focus" }
</page>

<script>
import { posts } from '../../data/posts'

const route = useRoute()
const post = derived(() => posts.find((p) => p.slug === route.params.slug))
</script>

<template>
  <main>
    <article if="post">
      <h1>{post?.title}</h1>
      <p>{post?.body}</p>
    </article>
    <article else>
      <h1>No such post</h1>
      <p>There is no post called "{route.params.slug}".</p>
    </article>
  </main>
</template>

A layout

<template>
  <div class="root">
    <SiteNav />
    <slot />
  </div>
</template>

<style>
.root {
  display: flex;
  flex-direction: column;
  gap: $space.4;
}
</style>

A component that uses a system component

<contract>
{
  "name": "ConfirmBar",
  "role": "group",
  "description": "A destructive action with a way out.",
  "parts": ["root"],
  "events": {
    "confirm": "the user chose to go ahead",
    "cancel": "the user backed out"
  }
}
</contract>

<script>
function confirm() {
  emit('confirm')
}

function cancel() {
  emit('cancel')
}
</script>

<template>
  <div class="root">
    <Button tone="danger" @press="confirm">Delete</Button>
    <Button tone="neutral" emphasis="outline" @press="cancel">Cancel</Button>
  </div>
</template>

<style>
.root {
  display: flex;
  gap: $space.2;
}
</style>

Run it from the checkout:

pnpm --filter kitchen-sink dev

It serves on port 5290. Its tests (examples/kitchen-sink/app/*.browser.test.ts) show how components, the router and layouts are tested in a real browser, and examples/kitchen-sink/src/build.test.ts shows a production build putting every page in its own chunk.

A project from tessera init

The Quick start makes the smallest example: a theme, one Button, a layout and an index page.

Live demos

A live demo embedded in this site would run in an isolated frame so Tessera's runtime does not interfere with the site's own. That arrives with the playground, which is deferred.