wraplet is a small JavaScript/TypeScript framework for projects that work directly with the actual DOM (server-rendered apps, jQuery legacy, multipage sites, plain HTML, libraries shipping DOM components, etc.).
Real DOM, not a virtual layer
Work directly with the interface you already have.
Wraplet organizes code around real DOM elements, making it a natural fit for server-rendered pages, existing markup, and gradual frontend evolution.
Predictable lifecycle and dependencies
Turn DOM elements into structured components.
Give components clear initialization, cleanup, and typed relationships, so larger interfaces stay understandable and easier to maintain.
Progressive modernization
Add architecture without rewriting everything.
Wraplet helps teams introduce order into legacy or growing frontends step by step, without committing to a full SPA migration.
Small footprint
Just ~5 KB gzipped.
Wraplet stays out of your way and your bundle. It adds structure to your frontend without dragging in a heavy runtime, making it a safe choice for libraries, widgets, and performance-sensitive pages.
Readable code
Components that read like the UI they describe.
Wraplets map directly to DOM elements and declare their children and dependencies explicitly, so each class tells a clear story of what it owns, what it needs, and what it does.
Easy to understand by AI
A small, explicit API that LLMs can reason about.
Clear lifecycle hooks, typed dependency maps, and conventional patterns give AI assistants enough context to navigate, extend, and refactor your code with confidence — not guesswork.
Live demos
You can freely edit all examples and see the results instantly.
Explore the type-hints in the editor.
And don't miss the option to reload an example with extensive comments!