Framed aspects tool
Abstract
OverviewA browser-based tool for editing and managing annotated software product line projects whose source files contain XML tags marking modules, feature selections, and variable references.The tool parses these into an editable interface, manages project configuration, and exports resolved product instances as a ZIP archive.Running the applicationRequirements: Node.js 18 or newer, npm 9 or newer.Extract the downloaded archive, open a terminal in the extracted folder, and run:npm installnpm run devOpen http://localhost:5173 in your browser.The application is fully dockerized and includes a Dockerfile that defines all dependencies and the startup command. To run a local instance, build the image and start a container, for example:docker build -t framed-aspects-tool .docker run -p 8080:80 framed-aspects-toolOpen http://localhost:8080 in your browser.The source code is licensed under the Apache 2.0 license.ManualProject StructureA valid project directory must contain one specification frame file, one or more composition frame files, and annotated source files of any type. Supported XML tags are: frame, option, select, set, adapt, and constrain. Variable references use the syntax .Loading a ProjectClick on the button with the programming language your project uses, select the project root directory, and grant access when prompted. If any file contains malformed XML, a parse error page is shown with the file path, message, and line and column number.EditorClick any file in the left sidebar directory tree to open it. The file is parsed into a sequence of code blocks - plain text blocks and feature blocks rendered one after another. You can edit the code in these blocks if they are activated in the configuration. Changes are applied automatically.To insert a new block, right-click on an existing block. A context menu appears where you can choose the insertion position. Fill out the required fields for the block type you chose. To delete a block, select the remove option in the context menu.Click on Show Raw Code in the top toolbar to view the resolved file based on the current configuration. Click on Revert Changes to revert the file to its original content.ConfigurationClick Configuration in the navbar to open the configuration drawer. The drawer lists missing items as well as unused items. Missing items are variables or options referenced in source files but not yet configured. Unused items are configured but no longer referenced. You have the option to either add or remove the configuration entry.Existing variables, options, and constraints can be edited by clicking the respective controls next to each entry in the list. The drawer also displays configuration statistics and lists frames that are adapted.PresetsWhen you open the configuration drawer, you can save the current configuration as a preset. Click Save Preset, enter a name, and confirm to save the preset. Click Load Preset to browse and apply existing presets. Clicking on a preset updates the configuration entries and automatically applies the changes. A preset can only be applied if it exactly matches the current configuration detected in the project. In this view you can also delete any preset.SavingClick Save in the navbar. Only files modified since the last save are written to disk. The specification and composition frame files are always written on every save regardless of changes. A notification confirms how many files were saved.Deriving a ProductClick Derive Product in the navbar. If any variables or options are missing from the configuration, a dialog shows an error message and derivation is blocked. Resolve all missing items in the configuration drawer first. After confirming, a ZIP archive is downloaded containing all source files with XML annotations removed and variables substituted. Specification and composition frame files are excluded from the output. Files that produce empty content after resolution are excluded as well.Supporting FeaturesThe tool can generate a feature model from the project structure. Click Feature Model in the navbar to generate and display the feature model, which shows optional and mandatory modules and their nesting in a tree structure. Note that this model does not strictly follow formal feature model conventions and is rendered using different visual elements.Click Documentation in the navbar to generate documentation for your software product line. The documentation includes all variables, optional features, constraints, and adapted frames. Each entry shows the list of files where it is referenced, a text field where you can describe its responsibility, and buttons to include the configured value and the referenced locations in the final document. Clicking Export downloads the documentation in Markdown format.Closing a ProjectClick Close in the navbar. All in-memory state is cleared and the application returns to the start screen. Unsaved changes are lost - save before closing. After closing a project you can load another project.
Fields of Study & Subjects
Advanced Software Engineering Methodologies
Software Engineering Techniques and Practices
Product Development and Customization
Publication details
- Journal / source
- Figshare
- Publication date
- 26 February 2026
- Language
- EN