Getting Started
This guide will walk you through creating your first custom element project with
cem.
Prerequisites
- Node.js 24+ or Go 1.24+
- A code editor (VS Code, Neovim, etc.)
- Basic familiarity with custom elements / web components
Quick Start
- Install
cem- Get the tool installed - Write your component with JSDoc documentation
- Generate the manifest:
cem generate - Create a demo HTML file
- Serve and test:
cem serve
The Development Workflow guide provides detailed examples and explanations for each step.
Enhance Your Setup
Use cem’s LSP and MCP servers to enhance your development environment.
- LSP Integration - Get autocomplete and validation in your editor
- MCP Integration - Enable AI assistant access to your components
Choose Your Starting Point
cem provides several example projects to help you get started. Choose based on
your needs:
- minimal example with just a single, simple element,
- intermediate example with multiple elements & demos,
- “kitchen sink” example with automatic design token discovery, demos, etc.
See the full Examples Overview for all options.
The Development Workflow
cem uses a manifest-driven workflow: Write → Generate → Serve → Test → Edit.
You write custom elements with JSDoc documentation, generate a manifest file,
and use the dev server to view and test your components with live reload. The
manifest powers LSP features in your editor and enables the dev server’s
automatic documentation and interactive controls.
For a complete walkthrough of each phase, see the Development Workflow guide.
Features
The dev server provides:
- Live Reload - Changes automatically refresh your browser
- Buildless Development - Write TypeScript and import CSS without build steps
- Import Maps - Use npm packages without bundling
- Interactive Knobs - Automatically generated controls for testing component variations
- Error Overlay - Developer-friendly error messages with source maps
- Rendering Modes - Test in light DOM, shadow DOM, or chromeless mode
Next Steps
Reference Documentation
- Commands - CLI command reference
- Configuration - Complete config options
- Serve Command - Dev server options
Need help? See Troubleshooting for common issues and solutions.