An Ember addon for creating interactive component explorers to showcase and test UI components.
Ember Freestyle is an Ember addon that enables developers to quickly build a component explorer within their Ember applications. It provides a dedicated space to interactively display, test, and document UI components, which is invaluable for design systems, component libraries, and team collaboration.
Ember developers building design systems, component libraries, or applications with reusable UI components who need a tool for interactive documentation and testing.
Developers choose Ember Freestyle for its opinionated, quick-start setup that gets a component guide running immediately, while remaining flexible enough to integrate into various project structures and styling needs, with the ability to exclude it from production builds.
Create a component explorer for your Ember app
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Running `ember install` automatically generates a freestyle template and controller, providing a live component guide within minutes without manual scaffolding.
The `freestyle-usage` component renders components alongside their source code, enabling real-time interaction and testing during development.
Freestyle guides can be embedded anywhere in the app or split into multiple guides, allowing customization beyond a single route.
Easy configuration to exclude Freestyle from production builds via `addons.exclude` in ember-cli-build.js, preventing bundle bloat.
Includes TypeScript types and a Glint-compatible template registry, ensuring type safety in Ember projects using TypeScript.
Using Freestyle within Ember V2 addons requires manual babel configuration for AST transforms, an error-prone step not needed for regular apps.
The README is intentionally lightweight, forcing users to visit an external site for complete documentation, which can disrupt workflow.
It cannot be used outside Ember, making it unsuitable for multi-framework projects or teams considering a future migration.
While theming via Sass is supported, excluding default styles requires build configuration, and custom CSS must be written from scratch if styles are disabled.