openElement

English | 简体中文

JSX-first, DSD-first Web Components application framework (v0.31.0). openElement builds static-first applications with Declarative Shadow DOM, JSX/VNode rendering, progressive islands, Hono routes, and release gates that prove the package graph before publishing.

Quick Start

deno run -A jsr:@openelement/create my-app
cd my-app
deno task dev

Why openElement

openElement renders Web Components on the server through Declarative Shadow DOM. Static content ships as HTML first. Interactive pieces are islands that upgrade only when their client:* strategy says they should.

import { definePage } from '@openelement/app';

export default definePage(() => {
  return <main>Hello openElement</main>;
});

For browser-upgraded UI:

import { defineIsland } from '@openelement/app';
import { signal } from '@openelement/runtime';

const count = signal(0);

export default defineIsland(
  'my-counter',
  () => <button onClick={() => count.value++}>Count: {count.value}</button>,
);

The v0.31.0 public contract is intentionally layered:

• application authoring: definePage(), defineIsland(), defineElement(), defineLayout();
• build configuration: openElement() from @openelement/app/vite;
• renderer model: JSX -> VNode -> RenderNode -> DSD HTML or DOM;
• metadata field: openElement;
• UI naming line: open-*;
• trust boundary: trustedHtml for pre-sanitized, non-interactive content.

Packages

All 19 packages are versioned together at v0.31.0 under @openelement.

Package	Role
@openelement/app	JSX-first application authoring API
@openelement/app/vite	openElement() Vite configuration facade
@openelement/core	DSD renderer, DsdElement, JSX runtime
@openelement/adapter-vite	Vite adapter, SSG pipeline, island builds
@openelement/runtime	runtime convenience facade
@openelement/ui	open-* DSD component library
@openelement/content	Markdown, MDX, nav, blog, sitemap
@openelement/i18n	locale data and static path helpers
@openelement/hub	registry metadata and validation

Documentation

Section	Link
Guide	openelement.org/guide/getting-started
API Reference	openelement.org/apilist
Architecture	openelement.org/architecture/architecture

Current Line

v0.31.0 moves the default mental model from "extend a runtime class" to "write JSX pages and islands". DsdElement remains the runtime primitive, but app authors start from @openelement/app.

The next minors focus on streaming/ISR, server routes, data integration, and UI Shell product surfaces without reopening the cleaned v0.30 renderer contract. The v1.0 target is a stable application engine after this v0.31-v0.36 line is implementation-proven.

Contributing

See CONTRIBUTING.md. Architecture decisions live in docs/adr/, release execution lives in docs/sop/, and current status lives in docs/status/STATUS.md.

License

MIT