grych/drab
47.0
Weak · 23 September 2026
7.5k
lines of production code
Elixir
with JavaScript
5
measurements over time
What this system is
Drab is a framework for building interactive, real-time web applications within the Phoenix ecosystem. It enables server-side Elixir code to directly manipulate the browser's DOM, manage live-updating templates, and handle user events without requiring custom JavaScript. The system provides a comprehensive suite of tools for state management, presence tracking, and template rendering, supported by an automated installation process and extensive test infrastructure.
How it got here
2016 — Drab architecture and tooling overhaul
9 changes.
This period focused on modernizing the Drab framework by introducing a modular architecture with dedicated modules for browser state, data encoding, and user presence tracking. The team standardized development workflows through comprehensive linting, formatting, and CI configurations, while simultaneously refactoring the internal state structure and adding Mix tasks for easier integration.
2017 — test infrastructure and live template engine
18 changes.
This period focused on establishing a robust testing infrastructure for Drab, introducing a comprehensive suite of integration and unit tests for core modules. Simultaneously, the project introduced the Drab.Live template engine and supporting modules to enable live-updating UIs with EEx syntax.
2018 — Template and test infrastructure
4 changes.
This period focused on expanding the test suite and customizing the user interface. Developers added helper scripts and template files to support testing for template renaming and shared commander scenarios, while also introducing custom error handling and modal templates for the application.
Features
Added Drab Mix tasks for installation and code generation
The Drab library now includes new Mix tasks to streamline integration with Phoenix applications. The \mix drab.install\ task automates the setup process by injecting necessary code into existing project files, including updating \config.exs\ with Drab configuration, modifying \user\_socket.ex\ to use Drab's socket, and updating \app.html.eex\ to run the Drab client. Additionally, the \mix drab.gen.commander\ task has been introduced to generate Commander modules, with logic that adapts to different Phoenix versions (1.2 vs 1.3/1.4) to ensure compatibility. These changes provide a more automated and version-aware installation experience for developers.
lib/mix · high confidence
Added custom Drab templates for error handling and modals
New custom templates have been added to the priv/custom\_templates directory to allow for more control over the user interface. Specifically, a JavaScript file (drab.error\_handler.js) has been introduced to handle error messages via an alert, and an EEx template (modal.alert.button.additional.html.eex) has been added to render an additional button within a modal dialog.
_priv/custom\templates · high confidence
Added project configuration files for linting, formatting, and CI
Added configuration files for the Credo linter, Elixir code formatter, ESLint, and Travis CI, along with updated Brunch build configuration and gitignore rules. These changes standardize code quality checks, automate continuous integration, and update the build output paths.
(repo-wide) · high confidence
Initial release of Drab client-side JavaScript and templates
The Drab library's client-side JavaScript and EEx templates are introduced, providing the core runtime for interactive web applications. This includes the main \drab.js\ for socket and channel management, \drab.core.js\ for connection and event handling, \drab.element.js\ for querying and modifying DOM elements, and \drab.events.js\ for handling user interactions. Additionally, support for modals, waiters, and store management (local, session, memory) is added, along with a generator template for command modules.
priv/templates · high confidence
Introduce Drab.Browser, Drab.Coder, and Drab.Presence modules
Added Drab.Browser to retrieve client-side information such as the browser's unique ID, local datetime, UTC offset, user agent, and language. Added Drab.Coder with pluggable encoders (Base64, Cipher, String, URL) for serializing and deserializing data, with the Cipher encoder as the default for encrypted storage. Added Drab.Presence to integrate with Phoenix.Presence for tracking connected users or browsers, configurable to use browser IDs, session data, or store data as presence IDs.
lib/drab · high confidence
Introduce configuration struct for Drab.Commander
A new configuration struct, Drab.Commander.Config, has been added to manage default modules and other settings for the Commander. This struct defines fields for controller, view, and various event handlers, allowing for centralized configuration of default modules and broadcasting behavior.
lib/drab/commander · high confidence
Introduce live template engine and supporting modules
Added a new live template engine (\Drab.Live.Engine\) that compiles \.drab\ HTML templates into Elixir modules, enabling live-updating UIs. This change introduces several supporting modules: \Drab.Live.EExEngine\ for parsing templates and injecting Drab markers; \Drab.Live.Partial\ to manage template metadata and assign tracking; \Drab.Live.Ampere\ to represent bound attributes and properties; \Drab.Live.Assign\ to handle and filter assigns; \Drab.Live.Crypto\ for encoding/decoding and encrypting data; \Drab.Live.Safe\ for safe template representation; and \Drab.Live.HTML\ for tokenizing HTML. This allows developers to use EEx syntax within HTML templates to bind data to the live view.
lib/drab/live · high confidence
Behavioural changes
Refactored Drab module structure and added comprehensive documentation
The Drab module was refactored to include a comprehensive @moduledoc explaining the library's architecture, including the concept of 'commanders' and the modular nature of Drab (Core, Live, Element, Modal, Waiter, Query, Browser). The internal state structure was expanded to include fields for commander, commanders, controller, socket, topics, and priv. The start\_link function was updated to initialize the GenServer with this new state structure, and the init and terminate callbacks were added to handle process lifecycle, including calling the ondisconnect callback.
lib · high confidence
Removed legacy Drab JavaScript client
The file web/static/js/drab.js, which previously handled Phoenix Socket connections and DOM event binding for the Drab framework, has been deleted. This removes the client-side JavaScript responsible for managing WebSocket channels and pushing events like clicks and keyups to the server.
web · high confidence
Structured environment-specific configuration for Drab and Phoenix
The project now uses explicit configuration files for each environment (dev, test, docs) alongside a central config.exs that sets up Drab and Phoenix defaults. Users will see new Drab-specific settings including custom template paths, event shorthand mappings (click, keyup, etc.), live connection pass-through rules, and session access configurations. The central config also enables live scripts by default and configures presence with a current\_user\_id store. Environment files override these with environment-specific settings like ports, logging levels, and browser driver configurations for testing.
config · high confidence
Test coverage
Added empty template for nodrab index; Added integration test infrastructure for Drab; Added layout template for the test application; Added live template fixtures for testing Drab.Live features; Added test commander fixtures for Drab features; Added test helper scripts for template file renaming; Added test infrastructure and unit tests for configuration and helpers; Added test socket implementation for Drab integration; Added test support modules for Phoenix web layer; Added test support view modules for Drab testing; Added test template for Drab commander and argument handling; Added test template for Drab.Element; Added test template for broadcast functionality; Added test template for shared commander scenarios; Added test templates for Drab integration testing; Added test templates for broadcast3 and broadcast4; Added test templates for modal and query interactions; Added unit tests for Drab core modules; Added unit tests for Drab.Live components; Expanded integration test coverage for Drab features.
Dependencies
Update Elixir and Phoenix dependencies
The project's Elixir dependencies have been updated, including Phoenix 1.4.0, Phoenix HTML 2.13.1, and Phoenix PubSub 1.1.1. The minimum required Elixir version has been raised to 1.6. Additionally, the JavaScript dependencies for the project have been updated, with jQuery upgraded to version 3.1.1 and Bootstrap added as a new dependency.
(dependencies) · high confidence
Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.
How this codebase got here
Score
- CAI 48 → 47 (-1.3)
- Rubric changed (rubric-2026.08.19 → rubric-2026.09.15) — scores are not directly comparable.
Lenses
- Code Health 41 → 44 (+2.8)
- Architecture 98 → 97 (-1.5)
- Maturity 57 → 57 (+0.0)
- Readiness 41 → 43 (+1.8)
- Security 74 → 49 (-24.6)
- Accessibility 60 (new)
Resolved (62)
- Coverage not included — suite not readable by the collector
- Critical CVE: [GHSA redacted] (package-lock.json)
- Critical CVE: [GHSA redacted] (package-lock.json)
- Critical CVE: [GHSA redacted] (package-lock.json)
- Critical CVE: [GHSA redacted] (package-lock.json)
- Critical CVE: [GHSA redacted] (package-lock.json)
- Critical CVE: [GHSA redacted] (package-lock.json)
- Critical CVE: [GHSA redacted] (package-lock.json)
- Critical CVE: [GHSA redacted] (package-lock.json)
- Critical CVE: [GHSA redacted] (package-lock.json)
- Critical vulnerability: [GHSA redacted] (package-lock.json)
- Dependency hygiene not measured — dependency manifest found but not parsed for hygiene
- Duplicated block (7 lines × 2) (lib/drab/config.ex)
- FileTooLong: drab/live.ex (lib/drab/live.ex)
- FileTooLong: drab/query.ex (lib/drab/query.ex)
- FileTooLong: lib/drab.ex (lib/drab.ex)
- FileTooLong: live/html.ex (lib/drab/live/html.ex)
- High CVE: [GHSA redacted] (package-lock.json)
- High CVE: [GHSA redacted] (mix.lock)
- High CVE: [GHSA redacted] (package-lock.json)
- …and 42 more
New (77)
- (anonymous) (cognitive 25) (priv/templates/drab/drab.js)
- (anonymous) (cyclomatic 22) (priv/templates/drab/drab.js)
- Critical CVE: [GHSA redacted] (package-lock.json)
- Critical CVE: [GHSA redacted] (package-lock.json)
- Critical CVE: [GHSA redacted] (package-lock.json)
- Critical CVE: [GHSA redacted] (package-lock.json)
- Critical CVE: [GHSA redacted] (package-lock.json)
- Critical CVE: [GHSA redacted] (package-lock.json)
- Critical CVE: [GHSA redacted] (package-lock.json)
- Critical CVE: [GHSA redacted] (package-lock.json)
- Critical CVE: [GHSA redacted] (package-lock.json)
- Critical vulnerability: [GHSA redacted] (package-lock.json)
- Documentation: no contributor guidance (README.md)
- Documentation: no installation or build instructions (README.md)
- Documentation: no usage examples (README.md)
- Duplicated block (7 lines × 2) (lib/drab/config.ex)
- High CVE: [GHSA redacted] (package-lock.json)
- High CVE: [GHSA redacted] (mix.lock)
- High CVE: [GHSA redacted] (package-lock.json)
- High CVE: [GHSA redacted] (package-lock.json)
- …and 57 more
Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.
Survey your own repository
grych/drab was measured the same way every project in this corpus was: the same rubric, at a pinned commit, with the result published in full. Point a surveyor at a repository you know and see whether you agree with it.
About this page
- The score is its most recent published measurement, taken on 23 September 2026 at a pinned commit. It is not a live figure and does not change until the project is measured again.
- Measured at commit 27132d9be7b9755359af5b8c9022073441ea2009 — the exact code this score is about.
- Scored under rubric-2026.09.15 — the same rubric and the same method as every other entry in this index.
- Measured by watchdog.canine.dev using codehealth-analyzer preprod-955b9cee9818.