larlet-fr-david-cache/cache/2024/2a1235215c277ebb8a0e9acb7ffd91e0/index.md

title: drab - A Headless Custom Element Library url: https://drab.robino.dev/ hash_url: 2a1235215c archive_date: 2024-02-03 og_image: description: A headless custom element library. favicon: https://drab.robino.dev/favicon.svg language: en_US

drab focuses on providing JavaScript functionality where it’s most useful. Many of the elements are helpful wrappers around browser APIs. Here are some of the features of the library.

• Each element is a custom element. So you can use them with a framework, without one, or even directly in a markdown file. These components will work regardless of your project’s architecture.
• drab does not use the shadow DOM, so you can style content within these elements as usual with CSS.
• Since you provide the HTML, these elements can take advantage of what JavaScript frameworks excel at—creating reusable markup that can be server side rendered.
• Each element can be imported, extended, named, and used however you see fit.

• drab has zero dependencies.

• Elements can be installed as a package (recommended), or utilized without writing any JavaScript by adding a script tag to your document.
• Each element can be configured through HTML attributes, making it possible to use an alternative language for your backend.

• Uses the web animations API for transitions.
• Transitions are disabled for users who prefer reduced motion.
• Extend the Animate element to build your own elements.

Find an bug or have an idea? Feel free to create an issue on GitHub.

Since this is an headless library, simple elements like a badge that can be easily created with HTML and CSS are not included. Elements such as a select, or a date picker are also not included in favor of the native HTML elements.

This library is built with Vite, domco, and TypeScript. The package contents are located in src/package.

1. Clone the repository
2. bun i
3. bun dev

1. Add or edit the element in src/package—each element should extend Base or Animate. Each element has a index.ts file with the source code, and then a define.ts file where it is imported and called for use with a CDN.
2. Add or edit the example in src/docs.
3. Export the element from src/package/index.ts.
4. Run bun doc to document your element with TypeDoc.
5. Add the element as an entry point to tsup.config.ts, then run bun package to build with tsup.