import { Component, Prop, Event } from '@pencel/runtime';

@Component({ tag: 'my-button' })
export class MyButton extends HTMLButtonElement {
  @Prop() label = 'Click me';
  @Event() declare clicked: CustomEvent<void>;

  render() {
    return (
      <Host onClick={() => this.clicked.emit()}>
        {this.label}
      </Host>
    );
  }
}

• Framework Agnostic – One source, multiple outputs
• Full Native Control – Extend HTML elements directly
• Lean Runtime – ~4 kB gzipped
• TypeScript First – Decorators, JSX, type-safe
• Pure Web Components – Transpiler output, not vendor lock-in

Read the docs for setup, best practices, and internals.

Pencel is an ambitious project, and contributions and feedback are highly welcome! This is a significant undertaking for a single developer, so any help—whether it's bug reports, feature suggestions, documentation improvements, or code contributions—makes a real difference.

Built with TypeScript >5, Nx, Biome, Bun and tsdown. See Understanding Pencel for architecture details.

If you'd like to contribute, here are a few quick tips:

• Have feedback? Open an issue or discussion—all ideas are appreciated!
• Ready to contribute code? Fork the repo, make your changes, and submit a pull request.
• Check your work before pushing:
  • Run biome check . --write to auto-fix formatting issues
  • Run bun test to catch test failures locally
  • The CI pipeline will report all issues (tests, type checks, lint, format) on your PR

Thank you for helping make Pencel better! 🙏

Pencel couldn't move at this pace without AI assistance. However, disrespectful or unacknowledged use of AI ensures that problem volume and technical debt will rise.

AI is a "yes-sayer"—it can drastically improve velocity by shifting humans into a tutor and reviewer role, effectively handling scaffolding and boilerplate while humans focus on architecture and decision-making. But human work, knowledge, and judgment remain the most critical part of development.

AI code generation is not discouraged, but it must be handled with respect and rigor:

• Review thoroughly – Don't assume AI output is correct.
• Test extensively – AI can introduce subtle bugs.
• Be aware of prompt injection risks – Especially when processing external input.
• Acknowledge AI contributions – Transparency builds trust.
• Maintain ownership – The human is always responsible for the final code.

AI is a powerful tool, not a replacement for careful engineering.

MIT © Max Scopp