Skip to Content

Interactivity for You

drab is a JavaScript library of interactive primitives designed to work on any website.

Write JavaScript… or not

drab adds interactivity by enhancing your markup with custom elements. Each element is configured using HTML attributes, making it compatible with any backend or templating system.

For example, this button toggles fullscreen mode:

html
<drab-fullscreen>
	<button data-trigger type="button">Fullscreen</button>
</drab-fullscreen>

Features

  • Use drab with a framework, without one, or 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.
  • If you are writing JavaScript, each element can be extended or renamed to be used however you see fit.
  • The library is small, with zero dependencies.
  • drab is not built on top of a web component framework.
  • You can also build your own custom elements with the base mixin classes.

Get started