Why Pencel?
The Problem
Section titled “The Problem”The component ecosystem has fragmented into isolated silos:
- Stencil – Enterprise tooling trapped in outdated compilation models
- Mitosis – Powerful multi-framework generation, but template-based and fragile
- Lit – Developer-friendly Web Components, but no framework integrations
- Framework-specific tools – React/Vue/Angular components don’t share code
You’re forced to choose: either rebuild components for each framework, or accept tight coupling to one ecosystem. Pencel solves this.
How Pencel Is Different
Section titled “How Pencel Is Different”Zero-VDOM Compilation (inspired by Svelte)
Pencel parses JSX into an AST and generates direct element creation code—no JSX runtimes, no virtual DOM overhead. Web Components have minimal performance impact, making them perfect for any framework without abstraction costs.
IR-Driven Architecture
Unlike template-driven tools (Mitosis), Pencel uses an Intermediate Representation system that enables powerful, fine-grained code generation. Your source code stays clean, and you’re not locked into predefined conventions.
Web Components First, Framework Bindings Second
Your components compile to standard Web Components, then optionally to React, Angular, or Vue wrappers. This means:
- Load your library once via CDN and use across multiple frameworks
- Share a unified component core in mixed-framework applications
- Reduced bundle size—components load once, not duplicated per island
- Future-proof with the Web Components standard
TypeScript Decorators You Know
Familiar API from Stencil (@Component, @Prop, @Event) with modern TypeScript 5+ features and zero magic.
✅ Pencel Is For You If
Section titled “✅ Pencel Is For You If”- Building design systems or component libraries used across multiple frameworks
- Islands architecture or multi-framework applications with shared components
- Want Web Components as your core with framework bindings as adapters
- Need compiler flexibility for custom enterprise pipelines
- Deploying across web, desktop (Tauri), or mobile with shared design systems at near-native performance
- Tired of rebuilding components for each framework you support
❌ Pencel May Not Be the Right Fit If
Section titled “❌ Pencel May Not Be the Right Fit If”- Building a single-framework application (React, Vue, or Angular only)
- No existing build tooling—Pencel requires Vite, Webpack, or esbuild
- Need highly framework-specific integrations beyond standardized patterns
- Early-stage prototyping without modern build infrastructure
Ready to Get Started?
Section titled “Ready to Get Started?”Check out the Getting Started guide to create your first Web Component in minutes.