A lightweight, reactive web components framework for TypeScript and modern browser ESM.
Business logic stays in services. Components are pure presentation.

Spanish quick entry: README.es.md

Try the live playground: https://pick-components.github.io/pick-components/

Features

• Signal-based reactivity — Per-property signals; only bindings that depend on changed state re-run.
• Component intent signals — Typed one-shot actions like save, refresh, or mode change, kept separate from render state.
• No virtual DOM — Direct subscriptions update text nodes and attributes in place.
• Two authoring styles — Inline @Pick for compact components; class-based @PickRender for explicit structure.
• Built-in UI primitives — <pick-for>, <pick-select>, <pick-action>, <pick-link>, and <pick-router> cover lists, branching, actions, and navigation.
• Native slot projection — Named and default <slot> elements for composable layouts via Shadow DOM.
• Factory-first DI — Explicit dependency injection through factory functions; no hidden service construction.
• Security-first expression evaluator — Deterministic AST pipeline; no eval or new Function. Whitelisted read-only method calls only.
• SEO-friendly prerender adoption — HTML-first delivery with compatible prerendered markup adopted on the client.
• Tiny footprint — Zero runtime dependencies.
• Browser-ready ESM releases — GitHub release artifacts can be loaded directly with <script type="module">.

Why Pick Components Exists

The full origin story is now documented in docs/WHY-PICK-COMPONENTS.md.

Short version: this framework was created to keep native Web Components explicit, predictable, and maintainable, with strict template safety and a smaller runtime surface.

Installation

npm install pick-components

Quickstart (npm + bundler)

import { bootstrapFramework, Services, Pick } from "pick-components";

await bootstrapFramework(Services);

@Pick("hello-card", (ctx) => {
  ctx.state({ name: "world" });
  ctx.html(`<p>Hello {{name}}</p>`);
})
class HelloCard {}

This is the fastest path when using Vite, Rollup, Webpack, esbuild, or similar toolchains.

Quickstart (no decorators)

import {
  bootstrapFramework,
  Services,
  definePick,
} from "pick-components";

const helloDef = definePick<{ name: string }>("hello-card", (ctx) => {
  ctx.state({ name: "world" });
  ctx.html(`<p>Hello {{name}}</p>`);
});

await bootstrapFramework(Services, {}, {
  components: [helloDef],
});

You can register components without @Pick/@PickRender by using definePick and defineComponent descriptors through the components option.

Copilot AI Setup (Optional)

Want Copilot to follow Pick Components conventions for components, DI, tests, and templates?

See the full setup guide in docs/USAGE-GUIDE.md#copilot-ai-setup-optional.

Start Paths

• I want to build now (npm + bundler): stay in this README and use the Quickstart above.
• I want a step-by-step guide with Copilot: see docs/GETTING-STARTED.md.
• I want no decorators: see docs/USAGE-GUIDE.md#using-without-decorators-definecomponent-and-definepick.
• I want Copilot setup: see docs/USAGE-GUIDE.md#copilot-ai-setup-optional.
• I want plain browser ESM (no bundler): see docs/USAGE-GUIDE.md.
• I want architecture and DI details: see docs/DEPENDENCY-INJECTION.md and docs/RENDERING-ARCHITECTURE.md.
• I want framework comparisons (React, Vue, Lit, Angular, Svelte, Glimmer): see docs/PICK-VS-OTHERS.md.
• I want full usage, decorators, actions, templates, and playground workflow: see docs/USAGE-GUIDE.md.
• I prefer Spanish docs: see docs/README.es.md, docs/GETTING-STARTED.es.md, and docs/USAGE-GUIDE.es.md.

Run Locally

npm install
npm run build
npm run serve:dev

Playground: http://localhost:3000

Documentation

• docs/README.md - Main documentation index (English).
• docs/README.es.md - Índice principal de documentación (español).
• docs/USAGE-GUIDE.md - Full setup, usage, and playground workflow.
• docs/USAGE-GUIDE.es.md - Guía completa en español.
• docs/GETTING-STARTED.es.md - Guía paso a paso en español.
• CHANGELOG.md - Release history and notable changes.

License

MIT © janmbaco