> For the complete documentation index, see [llms.txt](https://docs.realmacsoftware.com/elements-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.realmacsoftware.com/elements-docs/elements-language/dev-resources/build-tools.md). # Build Tools Streamline your workflow with Component Build Tools Build powerful, reusable web components for RapidWeaver without the complexity. This toolkit handles the heavy lifting so you can focus creating awesome components. {% embed url="" %} {% hint style="warning" %} For more detailed information about this package, including installation details and examples, please visit the [rw-elements-tools readme.md](https://www.npmjs.com/package/rw-elements-tools) {% endhint %} ## RW Elements Tools **Official NPM Toolkit for RapidWeaver Elements Development** [rw-elements-tools](https://www.npmjs.com/package/rw-elements-tools) is the official utility package for developers working with **RapidWeaver Elements**. It provides a set of helpful tools and build helpers that make creating, compiling, and maintaining Elements packs simpler and more efficient. Whether you’re just getting started with Elements development or building advanced component packs, RW Elements Tools helps streamline your workflow so you can focus on building great experiences. *** ### What is RW Elements Tools? RW Elements Tools is a developer toolkit published on NPM that supports the Elements development workflow. It includes utilities designed to help with: * Building and bundling Elements components * Running common development and build tasks * Standardising workflows across Elements projects * Preparing packs for production use The tools are designed to work out of the box with minimal setup and sensible defaults. **View the package on NPM**\ *** ### Why it exists Building Elements packs often involves repetitive setup and tooling work. RW Elements Tools exists to remove friction and provide a shared, reliable foundation for Elements development. Using this toolkit helps: * Reduce boilerplate configuration * Keep projects consistent across teams * Improve build reliability * Speed up development and iteration It’s the same tooling used and maintained alongside the Elements ecosystem. *** ### Who is it for? RW Elements Tools is ideal for: * **Developers** building custom Elements packs * **Teams** working on multiple Elements projects * **Open source contributors** supporting Elements tooling * Anyone creating, testing, or publishing Elements components If you’re writing code for Elements, this package is designed to fit naturally into your workflow. *** ### Installing and using RW Elements Tools Installation and usage instructions are maintained on the NPM package page. To learn how to install the toolkit, configure it for your project, and use the available utilities, visit: 👉 *** ### Contributing RW Elements Tools is open to contributions from the community. You can help by: * Reporting bugs or issues * Suggesting improvements or enhancements * Submitting pull requests * Helping improve documentation and examples Contribution links and repository details can be found via the NPM page. *** ### Links * **NPM Package**\ * **Installation & Usage**\ See the package page on NPM *** ## Installation ```bash npm install --save-dev rw-elements-tools ``` ## Usage Overview ### Controls in properties.config.json ```json { "globalControl": "Spacing" } ``` ### Properties in controls ```json { "select": { "use": "FontWeight" } } ``` ### Shared Hooks in hooks.source.js ```javascript function transformHook(rw) { const classes = classnames() .add(globalSpacing(rw)) .add(globalBackground(rw)) .toString(); return { classes }; } ``` For installation details and full documentation, visit [NPM](https://www.npmjs.com/package/rw-elements-tools). *** | Section | Description | Count | | ------------------------------------------------------------------------------------------ | --------------------------------------------------- | ----- | | [Controls](/elements-docs/elements-language/dev-resources/build-tools/controls.md) | UI control definitions for `properties.config.json` | 90+ | | [Properties](/elements-docs/elements-language/dev-resources/build-tools/properties.md) | Reusable value definitions (`use` references) | 13 | | [Shared Hooks](/elements-docs/elements-language/dev-resources/build-tools/shared-hooks.md) | JavaScript utility functions for `hooks.source.js` | 35+ | --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://docs.realmacsoftware.com/elements-docs/elements-language/dev-resources/build-tools.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.