Read the MANUAL.

Four scenarios, each tied to the repository file that implements it and the command that builds it. These are honest, local examples: the repository has no hosted demo app, so no card pretends to be one.

Prepare once, from the repository root: clone https://github.com/open-element/openelement and install the workspace (pnpm install). Then run each card’s command from that same root — these are repository fixtures, not commands for an already-created app.

1. 01Static-first page

   A content or marketing page that ships complete HTML and needs no client JavaScript: docs pages, landing pages, article routes.

   Source

   router-static-only fixtureapp/routes/index.tsx

   Run (repo root)

   pnpm --dir tests/fixtures/router-static-only run build

   Related doc

   Getting started

   Limits

   Fixture only — no hosted preview. The build lands in the fixture’s gitignored dist/; the fixture consumes workspace sources, so it proves this checkout, not an npm release.

2. 02Reusable Custom Element

   A component reused across pages: a standard Custom Element authored as compiled TSX with @element / @property, optionally shadow-rooted as DSD.

   Source

   create starter · my-counterpackages/create/templates/app/islands/my-counter.tsx.tmpl

   Run (repo root)

   npm create @openelement my-app # then: npm run dev

   Related doc

   Core concepts

   Limits

   The starter counter is a demo, not a data contract; the file ships as a .tmpl and is written by the generator. No hosted preview — the quickstart is the run path.

3. 03SSR + island

   A server-rendered page that activates one interactive region: a notes app whose counter island hydrates on a request-time page.

   Source

   router-native-framework · note-counterapp/islands/note-counter.tsx

   Run (repo root)

   pnpm --dir tests/fixtures/router-native-framework run build

   Related doc

   Islands and SSR

   Limits

   Fixture only — no hosted preview. Request-time pages need a Node server: the fixture’s e2e harness serves the built app, and workspace sources (not a published package) are what get proven.

4. 04Form + routing

   A form that keeps validation and routing server-owned: native POST plus redirect, with optional client-side enhancement.

   Source

   router-request-time · page-formapp/components/page-form.tsx

   Run (repo root)

   pnpm --dir tests/fixtures/router-request-time run build

   Related doc

   Form actions end to end

   Limits

   Request-time server required — this is not a static-hosting example. Fixture only, no hosted preview; the recipe page walks the same mechanics step by step.

Every card is reproducible from a fresh checkout at the source line shown above. The run steps are the fixture’s own package scripts, not invented commands; request-time scenarios need a Node server, the static scenario does not.