Example Projects

The cem repository includes several example projects that demonstrate different approaches and complexity levels. Each example is a complete, working project you can explore, copy, and adapt to your needs. Don’t overthink which one to start with—pick one that sounds interesting, run npm install && npm run serve, and start experimenting.

Available Examples

minimal — The simplest possible custom element with one property, one slot, and basic JSDoc. Perfect for your first cem project or when you just want to see how the manifest workflow works. If you’re brand new to cem, start here.

intermediate — Multiple components that work together, showing realistic patterns like component composition and custom events. Use this as a template when building actual component libraries.

kitchen-sink — A production-ready button component demonstrating every cem feature: properties, slots, events, CSS parts, CSS custom properties, design tokens, form integration, and comprehensive documentation. Reference this when you need to see how a specific feature is documented.

ai-friendly-docs — Comprehensive JSDoc documentation patterns for AI-friendly component descriptions, demonstrating RFC 2119 keywords, detailed event documentation, slot descriptions, and CSS property guidance. Use this as a reference for writing effective component documentation that works well with AI assistants.

vanilla — Pure Web Components without Lit or any framework, using only native browser APIs. Choose this if you prefer framework-free development or want to understand how cem works with vanilla JavaScript.

typescript-paths — Demonstrates TypeScript path aliases and complex compiler configurations. Use this if your project has custom import resolution or monorepo setup.

Quick Start

Clone the repository and run any example:

git clone https://github.com/bennypowers/cem.git
cd cem/examples/minimal  # or any other example
npm install
npm run serve            # Start dev server

Each example includes its own README with details about what it demonstrates and how to use it.

Which One Should I Use?

Start with minimal if you’re learning cem. Use intermediate as a template for real projects. Check kitchen-sink to see specific features in action. Refer to ai-friendly-docs for comprehensive JSDoc patterns. Try vanilla if you prefer framework-free code. See typescript-paths for complex TypeScript setups.

The examples are meant to be copied and modified. Take what works, remove what doesn’t, and adapt them to your project’s needs.

See Also

• Getting Started - Complete walkthrough for your first project
• Development Workflow - Understanding the write-generate-serve-test cycle
• Configuration Reference - All config options explained