Plain HTML
Show genko.me entry lists and details in plain HTML with the framework-free @genko-me/wc custom elements, and understand their limitations.
You can show genko.me content with just an .html file and <script type="module">; no build tool or UI framework is required. @genko-me/wc provides display components as standard custom elements such as genko-list and genko-view. They use the same underlying logic (@genko-me/core) as @genko-me/react, @genko-me/vue, and @genko-me/svelte, so the generated DOM and screen-reader output match the framework versions.
If you already use React, Vue, Svelte, or Astro, their dedicated guides will likely be easier: React, Vue, Svelte, and Astro. This guide is for sites that do not use those frameworks.
Packages
| Package | Purpose |
|---|---|
@genko-me/wc | Display components as custom elements. Register them with defineGenkoElements() or import @genko-me/wc/define |
@genko-me/sdk | Fetch data. The custom elements do not fetch it; pass the results as JavaScript properties |
A limitation: client-side rendering only
These elements render their contents only after browser JavaScript runs. They are empty in the initial HTML and do not support SSR through declarative shadow DOM. If a search engine or social crawler does not run JavaScript, it will not receive the body content or OGP data.
Anyone who opens the page can read a delivery API key in its HTML or JavaScript. It remains visible in developer tools whether embedded in the bundle or sent in a fetch header. Scope the key to “Selected APIs only” and keep its lifetime short. The JavaScript guide explains when a browser-visible API key is acceptable.
Good fit
- Announcements or help content in a dashboard or internal tool that does not depend on search traffic.
- An entry list or announcements section in part of an existing site without adding a framework.
- A reusable embed snippet across sites, without committing to React, Vue, or Svelte.
Limitations
- Public pages that depend on search engines or social previews. Astro, Next.js, Nuxt, and SvelteKit can return HTML with the entry body from the server.
- Sites where the API key must stay private.
- Receiving webhooks. You need a separate server; the tutorial assumes you have one.
Next steps
- Get started: install the packages and show a list and a single entry
- Tutorial: pagination, previewing drafts, and reflecting content updates
- Delivery API: fetch over HTTP without the SDK
Last updated: October 6, 2026